MeteDataModal.jsx 5.07 KB
Newer Older
皮倩雯's avatar
皮倩雯 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175
import React, { useEffect, useState, useRef } from 'react';
import { Spin, notification, Table, Modal, Tooltip } from 'antd';
import { ApartmentOutlined, PartitionOutlined } from '@ant-design/icons';
import Tree from '@/components/ExpendableTree';
import { GetLayerList, GetMetaDataPreview, GetLayerMetaDataPreview } from '@/services/gis/gis';
import { set } from 'lodash';
import styles from '../SchemeConfig.less';
const MeteDataModal = props => {
  const { metaData, visible, onCancel } = props;
  const [currentMeta, setCurrentMeta] = useState([]);
  const [metedataList, setMetedataList] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [loading, setLoading] = useState(false);
  const [expendKey, setExpendKey] = useState(''); // 保存默认展开项
  const [recored, setRecored] = useState('');
  const setRowClassName = e => (e.layerID === recored.layerID ? styles.clickRowStyle : '');

  useEffect(() => {
    if (visible) {
      getMeteData();
    } else {
      setMetedataList([]);
      setCurrentMeta([]);
    }
  }, [visible]);

  const getMeteData = () => {
    GetLayerList({ serviceName: metaData.GISServerProjectName }).then(res => {
      if (res.success) {
        getTree();
        setMetedataList(res.root);
        setRecored(res.root[0]);
      } else {
        notification.error({
          message: '提示',
          duration: 3,
          description: res.message,
        });
      }
    });
  };

  const getTree = () => {
    setLoading(true);
    GetMetaDataPreview({ serviceName: metaData.GISServerProjectName }).then(res => {
      console.log(res);
      setExpendKey('0-0');
      setLoading(false);
      setCurrentMeta(res);
    });
  };

  const columns = [
    {
      title: '图层',
      dataIndex: 'layerName',
      width: 150,
      key: 'layerName',
    },
  ];

  // 渲染机构树
  const mapTree = org => {
    const haveChildren = Array.isArray(org.children) && org.children.length > 0;
    return {
      title: (
        <div className={styles.title1}>
          <span className={styles.titleText}>
            {org.children.length == 0 ? (
              <span />
            ) : (
              <PartitionOutlined style={{ fontSize: '14px', color: '#1890FF' }} />
            )}
            <span style={{ marginLeft: '5px' }}>
              <Tooltip
                placement="left"
                title={org.text}
                overlayStyle={{
                  maxWidth: 800,
                  maxHeight: 900,
                  overflowY: 'scroll',
                  overflowX: 'hidden',
                }}
              >
                {org.text}
              </Tooltip>
            </span>
          </span>
        </div>
      ),
      key: org.id,
      // 判断它是否存在子集,若果存在就进行再次进行遍历操作,知道不存在子集便对其他的元素进行操作
      children: haveChildren ? org.children.map(i => mapTree(i)) : [],
    };
  };

  const onSelect = e => {
    console.log(e);
    setRecored(e);
    setLoading(true);
    if (e.layerID != null) {
      GetLayerMetaDataPreview({
        serviceName: metaData.GISServerProjectName,
        layerID: e.layerID,
      }).then(res => {
        setLoading(false);
        setCurrentMeta(res);
      });
    } else {
      getTree();
    }
  };

  const onSubmit = () => {};
  return (
    <Modal
      visible={visible}
      title={metaData ? `${metaData.ServiceName}的元数据` : '元数据'}
      bodyStyle={{ width: '100%', height: '650px' }}
      style={{ top: 50, borderRadius: '20px' }}
      width="1050px"
      cancelText="取消"
      okText="确认"
      {...props}
      onOk={() => onSubmit()}
    >
      <div className={styles.treeHeight}>
        <Spin spinning={isLoading}>
          <div style={{ width: '1000px', height: '640px', display: 'flex' }}>
            <div style={{ width: '300px' }}>
              <Table
                onRow={record => ({
                  onClick: e => {
                    onSelect(record);
                  }, // 点击行
                })}
                bordered
                rowClassName={setRowClassName}
                pagination={false}
                style={{ width: '300px' }}
                columns={columns}
                dataSource={metedataList}
                size="small"
                scroll={{
                  y: '600px',
                }}
              />
            </div>
            <Spin spinning={loading}>
              <div
                style={{
                  display: 'inline-block',
                  border: '1px solid #f0f0f0',
                  width: '700px',
                }}
              >
                <Tree
                  showIcon="true"
                  blockNode
                  defaultExpandAll
                  autoExpandParent
                  treeData={currentMeta.map(t => mapTree(t))}
                  // selectedKeys={[menuID]}
                  expandedKeys={currentMeta[0] && currentMeta[0].id}
                />
              </div>
            </Spin>
          </div>
        </Spin>
      </div>
    </Modal>
  );
};

export default MeteDataModal;