Skip to content

C
CivManage
Commit 31e7efcc authored by shaoan123's avatar shaoan123
Browse files
Options

制作任务调度弹框

parent afa63011
Pipeline #26605 skipped with stages
        Hide whitespace changes
        Inline Side-by-side
        Showing with 78 additions and 278 deletions
        src/pages/artificial/taskScheduling/AddModal.jsx
        View file @ 31e7efcc
        import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
        import { Form, Modal, Input, Select, AutoComplete, Button, notification } from 'antd'; import { Form, Modal, Input, Select , notification } from 'antd';
        import styles from './SchemeConfig.less' import styles from './taskScheduling.less'
        import { import {
        GetGISServerMapList, GetGISServerMapList,
        publisService publisService
        } from '@/services/webConfig/api'; } from '@/services/webConfig/api';
        const { Option } = Select;
        const { TextArea } = Input;
        const AddModal = props => { const AddModal = props => {
        const { callBackSubmit = () => { }, type, formObj, visible,solutionNames } = props; const { callBackSubmit = () => { }, type, formObj, visible, solutionNames } = props;
        const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
        const [workSpace, setWorkSpace] = useState(''); const [workSpace, setWorkSpace] = useState('');
        const [serviceName, setServicename] = useState([{ const [serviceName, setServicename] = useState([{
        value: 'geoserver',
        item: 'geoserver'
        }]); }]);
        const [workList, setWorkList] = useState([]); const [workList, setWorkList] = useState([]);
        const [gsIp, setGsIp] = useState([]); const [gsIp, setGsIp] = useState([]);
        ...@@ -28,46 +26,8 @@ const AddModal = props => { ...@@ -28,46 +26,8 @@ const AddModal = props => {
        setLoading(true); setLoading(true);
        let obj = form.getFieldsValue(); let obj = form.getFieldsValue();
        if (type === 'add') { 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') { } else if (type === 'edit') {
        handleEdit(); handleEdit();
        } }
        ...@@ -107,18 +67,7 @@ const AddModal = props => { ...@@ -107,18 +67,7 @@ const AddModal = props => {
        useEffect(() => { useEffect(() => {
        switch (type) { switch (type) {
        case 'add': case 'add':
        let gsIp = []; form.setFieldsValue({ ...formObj });
        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; break;
        case 'edit': case 'edit':
        form.setFieldsValue({ ...formObj }); form.setFieldsValue({ ...formObj });
        ...@@ -128,34 +77,7 @@ const AddModal = props => { ...@@ -128,34 +77,7 @@ const AddModal = props => {
        } }
        }, [visible]); }, [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 = { const layout = {
        layout: 'horizontal', layout: 'horizontal',
        ...@@ -167,56 +89,9 @@ const AddModal = props => { ...@@ -167,56 +89,9 @@ const AddModal = props => {
        }, },
        }; };
        const handleChange = () => { } const handleWorkspace = () => { }
        //选择工作空间
        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 ( return (
        <Modal <Modal
        title={`${type === 'add' ? '元数据发布' : '编辑'}`} title={`${type === 'add' ? '元数据发布' : '编辑'}`}
        ...@@ -236,66 +111,88 @@ const AddModal = props => { ...@@ -236,66 +111,88 @@ const AddModal = props => {
        {visible && ( {visible && (
        <Form form={form} {...layout} onFinish={onFinish}> <Form form={form} {...layout} onFinish={onFinish}>
        <Item <Item
        label="GIS服务器地址" label="任务名称"
        name="serviceadress" name="serviceadress"
        rules={[{ required: true, message: '请选择服务名' }]} rules={[{ required: true, message: '请输入任务名称' }]}
        > >
        <AutoComplete <Input placeholder="请输入任务名称" allowClear />
        placeholder="请输入GIS服务器地址"
        options={gsIp}
        onSelect={selectIp}
        />
        </Item> </Item>
        <Item <Item
        label="GIS服务器端口" label="场景"
        name="port" name="port"
        rules={[{ required: true, message: '请输入GIS服务器端口' }]} rules={[{ required: true, message: '请选择场景' }]}
        > >
        <Input placeholder="请输入GIS服务器端口" allowClear /> <Select onChange={handleWorkspace} value={workSpace}>
        {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        </Select>
        </Item> </Item>
        <Item <Item
        label="GIS服务器名" label="策略名称"
        name="servicename" name="servicename"
        rules={[{ required: true, message: '请输入GIS服务器名' }]} rules={[{ required: true, message: '请选择策略名称' }]}
        > >
        <AutoComplete <Select onChange={handleWorkspace} value={workSpace}>
        placeholder="Email" {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        options={serviceName} </Select>
        />
        </Item> </Item>
        <Item <Item
        label="用户名称" label="类型"
        name="user" name="user"
        rules={[{ required: true, message: '请输入用户名称' }]} rules={[{ required: true, message: '请选择类型' }]}
        > >
        <Input placeholder="请输入用户名称" allowClear /> <Select onChange={handleWorkspace} value={workSpace}>
        {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        </Select>
        </Item> </Item>
        <Item <Item
        label="用户密码" label="设备类型"
        name="password" name="password"
        rules={[{ required: true, message: '请输入用户密码' }]} rules={[{ required: true, message: '请输入设备类型' }]}
        > >
        <Input.Password placeholder="请输入用户密码" allowClear /> <Select onChange={handleWorkspace} value={workSpace}>
        {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        </Select>
        </Item> </Item>
        <Item <Item
        label="工作空间名称" label="设备编码"
        name="workname" name="workname"
        rules={[{ required: true, message: '请选择工作空间名称' }]} rules={[{ required: true, message: '请选择设备编码' }]}
        > >
        <div className={styles.imgList}> <Select onChange={handleWorkspace} value={workSpace}>
        <Select onChange={handleWorkspace} value ={workSpace}> {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} </Select>
        </Select>
        <Button style={{ marginLeft: '0.5rem' }} onClick={() => { selectWorkspace() }}>选择工作空间</Button>
        </div>
        </Item> </Item>
        <Item <Item
        label="服务名称" label="预测间隔"
        name="name" name="name"
        rules={[{ required: true, message: '请输入服务名称' }]} rules={[{ required: true, message: '请输入预测间隔' }]}
        >
        <div className={styles.predict}></div>
        <Input style={{width:'70%' }} placeholder="请输入预测间隔" allowClear />
        <Select style={{ marginLeft: '0.5rem',width:'28%' }} onChange={handleWorkspace} value={workSpace}>
        {/* {workList.length ? workList.map((item, index) => { return <Option key={index} value={item.name}>{item.name}</Option> }) : ''} */}
        </Select>
        </Item>
        <Item
        label="间隔(Cron)"
        name="serviceadress"
        rules={[{ required: true, message: '请输入间隔' }]}
        >
        <Input placeholder="请输入间隔" allowClear />
        </Item>
        <Item
        label="首次预测时间"
        name="serviceadress"
        rules={[{ required: true, message: '请选择首次预测时间' }]}
        >
        <Input placeholder="请选择首次预测时间" allowClear />
        </Item>
        <Item
        label="描述"
        name="serviceadress"
        > >
        <Input placeholder="请输入服务名称" allowClear /> <TextArea placeholder="可输入描述信息" rows={4} allowClear />
        </Item> </Item>
        </Form> </Form>
        )} )}
        ......
        src/pages/artificial/taskScheduling/SchemeConfig.less deleted 100644 → 0
        View file @ afa63011
        .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
        View file @ 31e7efcc
        import { Space, Table, Button, Popconfirm, notification } from 'antd'; import { Space, Table, Button, Popconfirm, notification } from 'antd';
        import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
        import styles from './SchemeConfig.less' import styles from './taskScheduling.less'
        import { import {
        GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData GetVectorService, deleteVectorService, getSolutionList, updatePublishedMetaData
        } from '@/services/webConfig/api'; } from '@/services/webConfig/api';
        ...@@ -121,8 +121,8 @@ const VectorData = props => { ...@@ -121,8 +121,8 @@ const VectorData = props => {
        }) })
        } }
        const handleAdd = () => { const handleAdd = () => {
        // setType('add'); setType('add');
        // setVisible(true); setVisible(true);
        } }
        useEffect(() => { useEffect(() => {
        renderTile(); renderTile();
        ......
        src/pages/artificial/taskScheduling/taskScheduling.less 0 → 100644
        View file @ 31e7efcc
        .predict{
        display: flex;
        }
        .tileBtn{
        display: flex;
        justify-content: flex-end;
        width: 100%;
        padding: 0 0 2rem
        }
        \ No newline at end of file
        Markdown is supported
        0% or
        You are about to add 0 people to the discussion. Proceed with caution.
        Finish editing this message first!
        Please register or to comment