增加人工智能路由菜单

src/pages/artificial/policiesIssued/AddModal.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd';
+import styles from './SchemeConfig.less'
+
+import {
+  GetGISServerMapList,
+  publisService
+} from '@/services/webConfig/api';
+
+
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props;
+  const [loading, setLoading] = useState(false);
+  const [workSpace, setWorkSpace] = useState('');
+  const [serviceName, setServicename] = useState([{
+    value: 'geoserver',
+    item: 'geoserver'
+  }]);
+  const [workList, setWorkList] = useState([]);
+  const [gsIp, setGsIp] = useState([]);
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        if (type === 'add') {
+            let query = {
+              _version: 9999,
+              gsIP: obj.serviceadress,
+              gsPort:  obj.port,
+              gsAppName: obj.servicename,
+              gsUser:  obj.user,
+              gsWorkspaceName:  obj.workname,
+              gsPwd:  obj.password,
+              serviceName:  obj.name,
+              solution: solutionNames,
+            }
+          publisService(query,{timeout:120000})
+            .then(res => {
+              setLoading(false);
+              if (res.success) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description:  '新增成功',
+                });
+                setWorkList([])
+                handlelocalStorage('add',obj.serviceadress, obj.servicename)
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description:  '新增失败',
+                });
+              }
+            })
+            .catch(err => {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description:  '新增失败',
+              });
+              setLoading(false);
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
+      }
+    });
+  };
+
+  const handleEdit = () => {
+    // SetServiceConfig({
+    //   servicename: serviceName,
+    //   terminalType: 'base',
+    //   isBaseMap: true,
+    //   jsonCfg: JSON.stringify(query)
+    // })
+    //   .then(res => {
+    //     setLoading(false);
+    //     if (res.success) {
+    //       form.resetFields();
+    //       callBackSubmit();
+    //       notification.success({
+    //         message: '提示',
+    //         duration: 3,
+    //         description: res.message || '编辑成功',
+    //       });
+    //     } else {
+    //       notification.error({
+    //         message: '提示',
+    //         duration: 3,
+    //         description: res.message || '编辑失败',
+    //       });
+    //     }
+    //   })
+    //   .catch(err => setLoading(false));
+  };
+
+  const onFinish = value => { };
+  useEffect(() => {
+    switch (type) {
+      case 'add':
+        let gsIp = [];
+        let localStorageData = handlelocalStorage('get');
+        if (localStorageData) {
+          gsIp = localStorageData.map(item => ({
+            value: item.gsIp,
+            item: item.gsIp
+          }));
+        }
+        setGsIp(gsIp)
+        let localIps = ['192.168.12.7', '192.168.19.100']
+        let port = localIps.includes(gsIp) ? 8080 : 8088
+        form.setFieldsValue({ servicename: serviceName[0].value, port, ...formObj });
+        break;
+      case 'edit':
+        form.setFieldsValue({ ...formObj });
+        break;
+      default:
+        break;
+    }
+  }, [visible]);
+
+  //存储到localstorage
+  const handlelocalStorage = (type, gsIp, gisAppName) => {
+    if (!localStorage) return null;
+    let result = JSON.parse(localStorage.getItem('metaData'))
+    if (type == 'get') {
+      return result;
+    }
+    if (!result || !result.find(item => item.gsIp == gsIp)) {
+      if (!result) result = [];
+      result.push({
+        gsIp,
+        gisAppName: [{
+          value: gisAppName,
+          item: gisAppName
+        }]
+      })
+      localStorage.setItem('metaData', JSON.stringify(result))
+      return
+    }
+    let data = result.find(item => item.gsIp == gsIp)
+    let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName);
+    if (isHasGisAppName) return;
+    data.gisAppName.push({
+      value: gisAppName,
+      item: gisAppName
+    })
+    localStorage.setItem('metaData', JSON.stringify(result))
+  };
+
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+
+  const handleChange = () => { }
+
+
+  //选择工作空间
+  const selectWorkspace = () => {
+    let obj = form.getFieldsValue();
+    form.validateFields(['serviceadress', 'port', 'servicename', 'user', 'password']).then(validate => {
+      if (validate) {
+        let query = {
+          GISServerIP: obj.serviceadress,
+          GISServerPort: obj.port,
+          gsAppName: obj.servicename,
+          gsUser: obj.user,
+          gsPwd: obj.password,
+          isGeoServer: true,
+          _version: 9999,
+        }
+        GetGISServerMapList(query).then(res => {
+          if (Array.isArray(res)) {
+            const defaultValue= res[0].name||''
+            form.setFieldsValue({ name:defaultValue,workname:defaultValue});
+            setWorkList(res)
+            setWorkSpace(defaultValue)
+          }
+          else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '获取工作空间失败',
+            });
+          }
+        })
+      }
+    })
+
+  };
+  //选择工作空间
+  const handleWorkspace = (value) => {
+    form.setFieldsValue({
+      workname: value,
+      name:value
+    })
+    setWorkSpace(value)
+  }
+  const selectIp = (value)=>{
+    let localIps = ['192.168.12.7', '192.168.19.100']
+    let port = localIps.includes(value) ? 8080 : 8088
+    form.setFieldsValue({ port,serviceadress:value });
+    
+  }
+  return (
+    <Modal
+      title={`${type === 'add' ? '元数据发布' : '编辑'}`}
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '150px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender={true}
+      getContainer={false}
+    >
+      {visible && (
+        <Form form={form} {...layout} onFinish={onFinish}>
+          <Item
+            label="GIS服务器地址"
+            name="serviceadress"
+            rules={[{ required: true, message: '请选择服务名' }]}
+          >
+            <AutoComplete
+              placeholder="请输入GIS服务器地址"
+              options={gsIp}
+              onSelect={selectIp}
+            />
+          </Item>
+          <Item
+            label="GIS服务器端口"
+            name="port"
+            rules={[{ required: true, message: '请输入GIS服务器端口' }]}
+          >
+            <Input placeholder="请输入GIS服务器端口" allowClear />
+          </Item>
+
+          <Item
+            label="GIS服务器名"
+            name="servicename"
+            rules={[{ required: true, message: '请输入GIS服务器名' }]}
+          >
+            <AutoComplete
+              placeholder="Email"
+              options={serviceName}
+            />
+          </Item>
+          <Item
+            label="用户名称"
+            name="user"
+            rules={[{ required: true, message: '请输入用户名称' }]}
+          >
+            <Input placeholder="请输入用户名称" allowClear />
+          </Item>
+          <Item
+            label="用户密码"
+            name="password"
+            rules={[{ required: true, message: '请输入用户密码' }]}
+          >
+            <Input.Password placeholder="请输入用户密码" allowClear />
+          </Item>
+          <Item
+            label="工作空间名称"
+            name="workname"
+            rules={[{ required: true, message: '请选择工作空间名称' }]}
+          >
+            <div className={styles.imgList}>
+              <Select onChange={handleWorkspace} value ={workSpace}>
+                {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''}
+              </Select>
+              <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
+            </div>
+          </Item>
+          <Item
+            label="服务名称"
+            name="name"
+            rules={[{ required: true, message: '请输入服务名称' }]}
+          >
+            <Input placeholder="请输入服务名称" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/artificial/policiesIssued/SchemeConfig.less

+.container{
+    width: 100%;
+    height: calc(100vh - 100px) ;
+    background-color: #ffffff;
+    display: flex;
+    padding: 0.8rem;
+    .ant-table-thead tr th {
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.85);
+      }
+      overflow-y: scroll;
+      .ant-input-number-input{
+          background-color: #ffffff;
+          color: #000000;
+      }
+}
+.imgList{
+    display: flex;
+}
+.imgItem{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin:0  1rem 1rem 0;
+}
+.tileBtn{
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 0 0 2rem
+}
+.schemeName{
+    margin-right: 0.8rem;
+    font-weight: bold;
+}
+
+.schemeItem,.schemeBtn{
+    display: flex;
+    align-items: center;
+}
+.schemeBtn{
+    width: 12rem;
+    justify-content: center;
+}
+.mapItem{
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    height: 2.2rem;
+    align-items: center;
+    margin: 0.5rem 0;
+    width: 14.5rem;
+}
+.defaultTile{
+    background: #ccc;
+    color: white;
+    cursor: pointer;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: 3rem;
+     justify-content: center;
+
+}
+.mapText{
+    width: 10rem;
+    text-align: center;
+}
+.mapIcon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+.activeTile{
+    background-color: #4699f4
+}
+.dropList {
+    position: absolute;
+    right: 2%;
+    top: 25%;
+    color: rgba(0, 0, 0, 0.25);
+    z-index: 99;
+}
+.divider{
+    display: flex;
+    align-items: center;
+    line-height: 100%;
+    padding: 0.5rem;
+    .dividerIcon{
+        margin-left: 0.8rem;
+        color: #4699f4;   
+        cursor: pointer; 
+    }
+}
+.ant-table {
+    min-height: 15rem !important;
+  }
+  .cardsList{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .cardItem{
+    width: 18rem;
+    height: 18rem;
+    margin: 0 2rem;
+  }

src/pages/artificial/policiesIssued/policiesIssued.jsx

+import { Space, Table, Button, Popconfirm, notification } from 'antd';
+import React, { useState, useEffect } from 'react';
+import styles from './SchemeConfig.less'
+import {
+    GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData
+} from '@/services/webConfig/api';
+import AddModal from './AddModal'
+const VectorData = props => {
+    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
+    const [tileData, setTileData] = useState([]); // table表格数据
+    const [visible, setVisible] = useState(false); // 弹窗
+    const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗
+    const [flag, setFlag] = useState(0); // 更新list
+    const [loading, setLoading] = useState([]); // 更新状态
+    const [type, setType] = useState(''); // 弹窗类型
+    const [solutionNames, setSolutionNames] = useState('');
+    const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
+    const [currentMetaData,setCurrentMetaData] = useState(null)
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'serviceName',
+            key: 'serviceName',
+            align: 'center'
+        },
+        {
+            title: '方案名称',
+            dataIndex: 'GISServerIP',
+            key: 'GISServerIP',
+            align: 'center'
+        },
+        {
+            title: '方案类型',
+            dataIndex: 'GISServerPort',
+            key: 'GISServerPort',
+            align: 'center'
+        },
+        {
+            title: '任务名称',
+            dataIndex: 'GISServerProjectName',
+            key: 'GISServerProjectName',
+            align: 'center'
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '描述',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '编辑',
+            align: 'center',
+            render: (text, record, index) => (
+                <Space>
+                  
+                    <div onClick={e => e.stopPropagation()}>
+                        <Popconfirm
+                            title="是否删除该矢量数据？"
+                            okText="确认"
+                            cancelText="取消"
+                            onConfirm={() => {
+                                delConfirm(record);
+                            }}
+                        >
+                            <Button size="small" danger>
+                                删除
+                            </Button>
+                        </Popconfirm>
+                    </div>
+                </Space>
+            ),
+        },
+
+    ];
+
+
+ 
+    const onSubmit = prop => {
+        setVisible(false);
+        setFlag(flag+1)
+    };
+    const delConfirm = (record) => {
+        let query = {
+            serviceName: record.serviceName,
+            _version: 9999,
+            solution: solutionNames
+        }
+        deleteVectorService(query).then(res => {
+            if (res.success) {
+                setFlag(flag + 1)
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据成功',
+                });
+            } else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据失败',
+                });
+            };
+        })
+    }
+    const handleAdd = () => {
+        // setType('add');
+        // setVisible(true);
+    }
+    useEffect(() => {
+        renderTile();
+    }, [flag]);
+    // 获取瓦片数据配置数据
+    const renderTile = () => {
+      
+    };
+
+
+
+    return (
+        <>
+            <div className={styles.tileBtn}>
+                <Button type="primary" onClick={() => {
+                    handleAdd();
+                }} >
+                    新增
+                </Button>
+            </div>
+            <Table
+                columns={columns}
+                dataSource={tileData}
+                bordered
+                rowKey="createTime"
+                scroll={{ y: 400 }}
+                pagination={{
+                    showTotal: (total, range) =>
+                        `第${range[0]}-${range[1]} 条/共 ${total} 条`
+
+                }}
+            >
+            </Table>
+            <AddModal
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                callBackSubmit={onSubmit}
+                type={type}
+                formObj={formObj}
+                solutionNames={solutionNames}
+            />
+        </>
+    )
+}
+export default VectorData
\ No newline at end of file

src/pages/artificial/taskScheduling/AddModal.jsx

+import React, { useState, useEffect } from 'react';
+import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd';
+import styles from './SchemeConfig.less'
+
+import {
+  GetGISServerMapList,
+  publisService
+} from '@/services/webConfig/api';
+
+
+const { Option } = Select;
+const AddModal = props => {
+  const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props;
+  const [loading, setLoading] = useState(false);
+  const [workSpace, setWorkSpace] = useState('');
+  const [serviceName, setServicename] = useState([{
+    value: 'geoserver',
+    item: 'geoserver'
+  }]);
+  const [workList, setWorkList] = useState([]);
+  const [gsIp, setGsIp] = useState([]);
+  const [form] = Form.useForm();
+  const { Item } = Form;
+  // 提交
+  const onSubmit = () => {
+    form.validateFields().then(validate => {
+      if (validate) {
+        setLoading(true);
+        let obj = form.getFieldsValue();
+        if (type === 'add') {
+            let query = {
+              _version: 9999,
+              gsIP: obj.serviceadress,
+              gsPort:  obj.port,
+              gsAppName: obj.servicename,
+              gsUser:  obj.user,
+              gsWorkspaceName:  obj.workname,
+              gsPwd:  obj.password,
+              serviceName:  obj.name,
+              solution: solutionNames,
+            }
+          publisService(query,{timeout:120000})
+            .then(res => {
+              setLoading(false);
+              if (res.success) {
+                form.resetFields();
+                callBackSubmit();
+                notification.success({
+                  message: '提示',
+                  duration: 3,
+                  description:  '新增成功',
+                });
+                setWorkList([])
+                handlelocalStorage('add',obj.serviceadress, obj.servicename)
+              } else {
+                notification.error({
+                  message: '提示',
+                  duration: 3,
+                  description:  '新增失败',
+                });
+              }
+            })
+            .catch(err => {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description:  '新增失败',
+              });
+              setLoading(false);
+            });
+        } else if (type === 'edit') {
+          handleEdit();
+        }
+      }
+    });
+  };
+
+  const handleEdit = () => {
+    // SetServiceConfig({
+    //   servicename: serviceName,
+    //   terminalType: 'base',
+    //   isBaseMap: true,
+    //   jsonCfg: JSON.stringify(query)
+    // })
+    //   .then(res => {
+    //     setLoading(false);
+    //     if (res.success) {
+    //       form.resetFields();
+    //       callBackSubmit();
+    //       notification.success({
+    //         message: '提示',
+    //         duration: 3,
+    //         description: res.message || '编辑成功',
+    //       });
+    //     } else {
+    //       notification.error({
+    //         message: '提示',
+    //         duration: 3,
+    //         description: res.message || '编辑失败',
+    //       });
+    //     }
+    //   })
+    //   .catch(err => setLoading(false));
+  };
+
+  const onFinish = value => { };
+  useEffect(() => {
+    switch (type) {
+      case 'add':
+        let gsIp = [];
+        let localStorageData = handlelocalStorage('get');
+        if (localStorageData) {
+          gsIp = localStorageData.map(item => ({
+            value: item.gsIp,
+            item: item.gsIp
+          }));
+        }
+        setGsIp(gsIp)
+        let localIps = ['192.168.12.7', '192.168.19.100']
+        let port = localIps.includes(gsIp) ? 8080 : 8088
+        form.setFieldsValue({ servicename: serviceName[0].value, port, ...formObj });
+        break;
+      case 'edit':
+        form.setFieldsValue({ ...formObj });
+        break;
+      default:
+        break;
+    }
+  }, [visible]);
+
+  //存储到localstorage
+  const handlelocalStorage = (type, gsIp, gisAppName) => {
+    if (!localStorage) return null;
+    let result = JSON.parse(localStorage.getItem('metaData'))
+    if (type == 'get') {
+      return result;
+    }
+    if (!result || !result.find(item => item.gsIp == gsIp)) {
+      if (!result) result = [];
+      result.push({
+        gsIp,
+        gisAppName: [{
+          value: gisAppName,
+          item: gisAppName
+        }]
+      })
+      localStorage.setItem('metaData', JSON.stringify(result))
+      return
+    }
+    let data = result.find(item => item.gsIp == gsIp)
+    let isHasGisAppName = data.gisAppName.find(item => item.value == gisAppName);
+    if (isHasGisAppName) return;
+    data.gisAppName.push({
+      value: gisAppName,
+      item: gisAppName
+    })
+    localStorage.setItem('metaData', JSON.stringify(result))
+  };
+
+  const layout = {
+    layout: 'horizontal',
+    labelCol: {
+      span: 4,
+    },
+    wrapperCol: {
+      span: 16,
+    },
+  };
+
+  const handleChange = () => { }
+
+
+  //选择工作空间
+  const selectWorkspace = () => {
+    let obj = form.getFieldsValue();
+    form.validateFields(['serviceadress', 'port', 'servicename', 'user', 'password']).then(validate => {
+      if (validate) {
+        let query = {
+          GISServerIP: obj.serviceadress,
+          GISServerPort: obj.port,
+          gsAppName: obj.servicename,
+          gsUser: obj.user,
+          gsPwd: obj.password,
+          isGeoServer: true,
+          _version: 9999,
+        }
+        GetGISServerMapList(query).then(res => {
+          if (Array.isArray(res)) {
+            const defaultValue= res[0].name||''
+            form.setFieldsValue({ name:defaultValue,workname:defaultValue});
+            setWorkList(res)
+            setWorkSpace(defaultValue)
+          }
+          else {
+            notification.error({
+              message: '提示',
+              duration: 3,
+              description: '获取工作空间失败',
+            });
+          }
+        })
+      }
+    })
+
+  };
+  //选择工作空间
+  const handleWorkspace = (value) => {
+    form.setFieldsValue({
+      workname: value,
+      name:value
+    })
+    setWorkSpace(value)
+  }
+  const selectIp = (value)=>{
+    let localIps = ['192.168.12.7', '192.168.19.100']
+    let port = localIps.includes(value) ? 8080 : 8088
+    form.setFieldsValue({ port,serviceadress:value });
+    
+  }
+  return (
+    <Modal
+      title={`${type === 'add' ? '元数据发布' : '编辑'}`}
+      bodyStyle={{ width: '100%', minHeight: '100px' }}
+      style={{ top: '150px' }}
+      width="700px"
+      destroyOnClose
+      maskClosable={false}
+      cancelText="取消"
+      okText="确认"
+      {...props}
+      onOk={() => onSubmit()}
+      confirmLoading={loading}
+      forceRender={true}
+      getContainer={false}
+    >
+      {visible && (
+        <Form form={form} {...layout} onFinish={onFinish}>
+          <Item
+            label="GIS服务器地址"
+            name="serviceadress"
+            rules={[{ required: true, message: '请选择服务名' }]}
+          >
+            <AutoComplete
+              placeholder="请输入GIS服务器地址"
+              options={gsIp}
+              onSelect={selectIp}
+            />
+          </Item>
+          <Item
+            label="GIS服务器端口"
+            name="port"
+            rules={[{ required: true, message: '请输入GIS服务器端口' }]}
+          >
+            <Input placeholder="请输入GIS服务器端口" allowClear />
+          </Item>
+
+          <Item
+            label="GIS服务器名"
+            name="servicename"
+            rules={[{ required: true, message: '请输入GIS服务器名' }]}
+          >
+            <AutoComplete
+              placeholder="Email"
+              options={serviceName}
+            />
+          </Item>
+          <Item
+            label="用户名称"
+            name="user"
+            rules={[{ required: true, message: '请输入用户名称' }]}
+          >
+            <Input placeholder="请输入用户名称" allowClear />
+          </Item>
+          <Item
+            label="用户密码"
+            name="password"
+            rules={[{ required: true, message: '请输入用户密码' }]}
+          >
+            <Input.Password placeholder="请输入用户密码" allowClear />
+          </Item>
+          <Item
+            label="工作空间名称"
+            name="workname"
+            rules={[{ required: true, message: '请选择工作空间名称' }]}
+          >
+            <div className={styles.imgList}>
+              <Select onChange={handleWorkspace} value ={workSpace}>
+                {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''}
+              </Select>
+              <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
+            </div>
+          </Item>
+          <Item
+            label="服务名称"
+            name="name"
+            rules={[{ required: true, message: '请输入服务名称' }]}
+          >
+            <Input placeholder="请输入服务名称" allowClear />
+          </Item>
+        </Form>
+      )}
+    </Modal>
+  );
+};
+export default AddModal;

src/pages/artificial/taskScheduling/SchemeConfig.less

+.container{
+    width: 100%;
+    height: calc(100vh - 100px) ;
+    background-color: #ffffff;
+    display: flex;
+    padding: 0.8rem;
+    .ant-table-thead tr th {
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.85);
+      }
+      overflow-y: scroll;
+      .ant-input-number-input{
+          background-color: #ffffff;
+          color: #000000;
+      }
+}
+.imgList{
+    display: flex;
+}
+.imgItem{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin:0  1rem 1rem 0;
+}
+.tileBtn{
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    padding: 0 0 2rem
+}
+.schemeName{
+    margin-right: 0.8rem;
+    font-weight: bold;
+}
+
+.schemeItem,.schemeBtn{
+    display: flex;
+    align-items: center;
+}
+.schemeBtn{
+    width: 12rem;
+    justify-content: center;
+}
+.mapItem{
+    display: flex;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    height: 2.2rem;
+    align-items: center;
+    margin: 0.5rem 0;
+    width: 14.5rem;
+}
+.defaultTile{
+    background: #ccc;
+    color: white;
+    cursor: pointer;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    width: 3rem;
+     justify-content: center;
+
+}
+.mapText{
+    width: 10rem;
+    text-align: center;
+}
+.mapIcon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+}
+.activeTile{
+    background-color: #4699f4
+}
+.dropList {
+    position: absolute;
+    right: 2%;
+    top: 25%;
+    color: rgba(0, 0, 0, 0.25);
+    z-index: 99;
+}
+.divider{
+    display: flex;
+    align-items: center;
+    line-height: 100%;
+    padding: 0.5rem;
+    .dividerIcon{
+        margin-left: 0.8rem;
+        color: #4699f4;   
+        cursor: pointer; 
+    }
+}
+.ant-table {
+    min-height: 15rem !important;
+  }
+  .cardsList{
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .cardItem{
+    width: 18rem;
+    height: 18rem;
+    margin: 0 2rem;
+  }

src/pages/artificial/taskScheduling/taskScheduling.jsx

+import { Space, Table, Button, Popconfirm, notification } from 'antd';
+import React, { useState, useEffect } from 'react';
+import styles from './SchemeConfig.less'
+import {
+    GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData
+} from '@/services/webConfig/api';
+import AddModal from './AddModal'
+const VectorData = props => {
+    const [treeLoading, setTreeLoading] = useState(false);// 弹窗显示
+    const [tileData, setTileData] = useState([]); // table表格数据
+    const [visible, setVisible] = useState(false); // 弹窗
+    const [previewVisible, setPreviewVisible] = useState(false); // 预览弹窗
+    const [flag, setFlag] = useState(0); // 更新list
+    const [loading, setLoading] = useState([]); // 更新状态
+    const [type, setType] = useState(''); // 弹窗类型
+    const [solutionNames, setSolutionNames] = useState('');
+    const [formObj, setFormObj] = useState({ user: 'admin', password: 'geoserver' });
+    const [currentMetaData,setCurrentMetaData] = useState(null)
+    const columns = [
+        {
+            title: '序号',
+            dataIndex: 'index',
+            key: 'serviceName',
+            align: 'center'
+        },
+        {
+            title: '场景名称',
+            dataIndex: 'GISServerIP',
+            key: 'GISServerIP',
+            align: 'center'
+        },
+        {
+            title: '任务名称',
+            dataIndex: 'GISServerPort',
+            key: 'GISServerPort',
+            align: 'center'
+        },
+        {
+            title: '状态',
+            dataIndex: 'GISServerProjectName',
+            key: 'GISServerProjectName',
+            align: 'center'
+        },
+        {
+            title: '任务类型',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '间隔',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '描述',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '访问方式',
+            dataIndex: 'publishTime',
+            key: 'publishTime',
+            align: 'center'
+        },
+        {
+            title: '编辑',
+            align: 'center',
+            render: (text, record, index) => (
+                <Space>
+                  
+                    <div onClick={e => e.stopPropagation()}>
+                        <Popconfirm
+                            title="是否删除该矢量数据？"
+                            okText="确认"
+                            cancelText="取消"
+                            onConfirm={() => {
+                                delConfirm(record);
+                            }}
+                        >
+                            <Button size="small" danger>
+                                删除
+                            </Button>
+                        </Popconfirm>
+                    </div>
+                </Space>
+            ),
+        },
+
+    ];
+
+
+ 
+    const onSubmit = prop => {
+        setVisible(false);
+        setFlag(flag+1)
+    };
+    const delConfirm = (record) => {
+        let query = {
+            serviceName: record.serviceName,
+            _version: 9999,
+            solution: solutionNames
+        }
+        deleteVectorService(query).then(res => {
+            if (res.success) {
+                setFlag(flag + 1)
+                notification.success({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据成功',
+                });
+            } else {
+                notification.error({
+                    message: '提示',
+                    duration: 3,
+                    description: '删除元数据失败',
+                });
+            };
+        })
+    }
+    const handleAdd = () => {
+        // setType('add');
+        // setVisible(true);
+    }
+    useEffect(() => {
+        renderTile();
+    }, [flag]);
+    // 获取瓦片数据配置数据
+    const renderTile = () => {
+      
+    };
+
+
+
+    return (
+        <>
+            <div className={styles.tileBtn}>
+                <Button type="primary" onClick={() => {
+                    handleAdd();
+                }} >
+                    新增
+                </Button>
+            </div>
+            <Table
+                columns={columns}
+                dataSource={tileData}
+                bordered
+                rowKey="createTime"
+                scroll={{ y: 400 }}
+                pagination={{
+                    showTotal: (total, range) =>
+                        `第${range[0]}-${range[1]} 条/共 ${total} 条`
+
+                }}
+            >
+            </Table>
+            <AddModal
+                visible={visible}
+                onCancel={() => setVisible(false)}
+                callBackSubmit={onSubmit}
+                type={type}
+                formObj={formObj}
+                solutionNames={solutionNames}
+            />
+        </>
+    )
+}
+export default VectorData
\ No newline at end of file

src/routes/config.js

@@ -39,6 +39,8 @@ import JumpContainer from '@/components/JumpContainer';
 import HostManager from '@/pages/platformCenter/hostmanager'
 import MessageManager from '@/pages/platformCenter/messageManage'
 import SchemeConfig from '@/pages/platformCenter/schemeConfig/schemeConfig';
+import TaskScheduling from '@/pages/artificial/taskScheduling/taskScheduling';
+import PoliciesIssued from '@/pages/artificial/policiesIssued/policiesIssued';
 // import ColConen from '@/components/Colophon/colContent';
 
 const iconStyle = { verticalAlign: '0.125em' };
@@ -274,6 +276,24 @@ export default {
             },
           ],
         },
+        {
+          path: '/artificial',
+          component: BlankLayout,
+          name: '人工智能',
+          icon: <CopyOutlined style={iconStyle} />,
+          routes: [
+            {
+              path: '/artificial/taskScheduling',
+              name: '任务调度',
+              component: TaskScheduling,
+            },
+            {
+              path: '/artificial/policiesIssued',
+              name: '策略下发',
+              component: PoliciesIssued,
+            }
+          ],
+        },
       ],
     },
   ],