TileConfig.jsx 9.05 KB
Newer Older
1
/* eslint-disable indent */
2 3 4 5 6 7 8 9 10 11 12
import {
  Space,
  Table,
  Button,
  Popconfirm,
  notification,
  Spin,
  Divider,
  Tooltip,
  Empty,
} from 'antd';
shaoan123's avatar
shaoan123 committed
13
import React, { useState, useEffect } from 'react';
14 15
import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
import AutoResponsive from 'autoresponsive-react';
16
import styles from '../SchemeConfig.less';
17
import { GettMaplayer, deleteConfig, GetMaplayerByTerminalType } from '@/services/webConfig/api';
18
import AddModal from './AddModal';
皮倩雯's avatar
皮倩雯 committed
19 20
import EditModal from './EditModal';
import NewEditModal from './NewEditModal';
21 22
import Cards from './card';
import AddProjectModal from './AddProjectModal';
23
const TileData = props => {
24 25
  const [treeLoading, setTreeLoading] = useState(false); // 弹窗显示
  const [tileData, setTileData] = useState([]); // table表格数据
26
  const [cardData, setCardData] = useState([]);
27
  const [visible, setVisible] = useState(false); // 弹窗
28
  const [projectVisible, setProjectVisible] = useState(false);
皮倩雯's avatar
皮倩雯 committed
29 30
  const [addVisible, setAddVisible] = useState(false); // 弹窗
  const [editVisible, setEditVisible] = useState(false);
31 32 33
  const [type, setType] = useState(''); // 弹窗类型
  const [formObj, setFormObj] = useState({});
  const [flag, setFlag] = useState(0); // 弹窗类型
34
  const [baseMap, setBaseMap] = useState([]); // 底图数据
皮倩雯's avatar
皮倩雯 committed
35
  const [name, setName] = useState([]);
36 37
  const [flagAdd, setFlagAdd] = useState(0);
  const [type1, setType1] = useState('');
38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56
  const columns = [
    {
      title: '服务名',
      dataIndex: 'servicename',
      key: 'servicename',
      align: 'center',
    },
    {
      title: '标签',
      dataIndex: 'label',
      key: 'label',
      align: 'center',
    },
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
57 58 59 60 61 62 63
    // {
    //   title: '透明度',
    //   dataIndex: 'alpha',
    //   key: 'alpha',
    //   align: 'center',
    //   render: (text, record) => <span>{`${(text * 100).toFixed()}%`}</span>,
    // },
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
    {
      title: '编辑',
      align: 'center',
      render: (text, record) => (
        <Space>
          <Button
            type="primary"
            size="small"
            onClick={() => {
              changebaseMap(record);
            }}
          >
            编辑
          </Button>
          <div onClick={e => e.stopPropagation()}>
            <Popconfirm
              title="是否删除该底图?"
              okText="确认"
              cancelText="取消"
              onConfirm={() => {
                delConfirm(record);
              }}
            >
              <Button size="small" danger>
                删除
              </Button>
            </Popconfirm>
          </div>
        </Space>
      ),
    },
  ];
96 97 98 99 100 101 102 103

  useEffect(() => {
    setTreeLoading(true);
    GetMaplayerByTerminalType({
      terminalType: 'baseMapscheme',
      isBaseMap: false,
    }).then(res => {
      console.log('res', res);
104
      if (res.code == '0') {
105
        setTreeLoading(false);
106 107
        console.log(res.data.optionalLayer.layers);
        setCardData(res.data.optionalLayer.layers);
108 109 110 111 112
      } else {
        setTreeLoading(false);
      }
    });
  }, [flagAdd]);
113 114 115
  const changebaseMap = record => {
    setType('edit');
    setFormObj(record);
皮倩雯's avatar
皮倩雯 committed
116
    setEditVisible(true);
117 118
  };
  const onSubmit = prop => {
皮倩雯's avatar
皮倩雯 committed
119
    setEditVisible(false);
120
    setFlag(flag + 1);
皮倩雯's avatar
皮倩雯 committed
121
    setAddVisible(false);
122
  };
123

124 125 126 127 128
  const onSubmitProject = prop => {
    setProjectVisible(false);
    setFlagAdd(flagAdd + 1);
  };

129 130 131 132
  const delConfirm = record => {
    const { servicename = '' } = record;
    setTreeLoading(true);
    deleteConfig({
133
      servicename,
134 135 136 137 138
      terminalType: 'base',
      isBaseMap: true,
    })
      .then(res => {
        setFlag(flag + 1);
139
        setFlagAdd(flagAdd + 1);
140
        setTreeLoading(false);
141
        if (res.code == '0') {
142 143 144 145 146 147 148 149 150 151 152 153 154
          // form.resetFields();
          // callBackSubmit();
          notification.success({
            message: '提示',
            duration: 3,
            description: res.message || '删除成功',
          });
        } else {
          notification.error({
            message: '提示',
            duration: 3,
            description: res.message || '删除失败',
          });
155
        }
156 157 158 159 160 161 162
      })
      .catch(err => {
        setFlag(flag + 1);
        setTreeLoading(false);
      });
  };
  const handleAdd = () => {
163 164 165 166 167 168 169 170 171 172 173
    // console.log(baseMap);
    // if (baseMap.length) {
    setType('add');
    setAddVisible(true);
    // } else {
    //   notification.warning({
    //     message: '提示',
    //     duration: 3,
    //     description: '地图类型已都存在,可编辑修改',
    //   });
    // }
174 175 176 177 178 179 180
  };
  useEffect(() => {
    renderTile();
  }, [flag]);
  // 获取瓦片数据配置数据
  const renderTile = () => {
    setTreeLoading(true);
皮倩雯's avatar
皮倩雯 committed
181 182 183 184 185 186 187 188
    const baseMapData = [
      // '谷歌地形',
      // '谷歌影像',
      '高德地形',
      '高德影像',
      '天地图地形',
      '天地图影像',
    ];
189 190 191 192
    GettMaplayer({
      terminalType: 'base',
      isBaseMap: true,
    }).then(res => {
193
      if (res.code == '0') {
194 195
        setTreeLoading(false);
        setTileData(res.data.general.baseMap.layers);
皮倩雯's avatar
皮倩雯 committed
196
        let data = [];
197
        res.data.general.baseMap.layers.map(item => {
皮倩雯's avatar
皮倩雯 committed
198
          data.push(item.servicename);
199 200 201 202 203
          let index = baseMapData.indexOf(item.servicename);
          if (index != -1) {
            baseMapData.splice(index, 1);
          }
        });
皮倩雯's avatar
皮倩雯 committed
204
        setName(data);
205 206 207 208 209 210 211 212 213 214
        setBaseMap(baseMapData);
      } else {
        setTreeLoading(false);
        notification.error({
          message: '获取失败',
          description: res.message,
        });
      }
    });
  };
215

216 217 218 219 220 221 222 223
  const addType = () => {
    setType1('schemeAdd');
    setProjectVisible(true);
  };

  const onDeletebaseMap = value => {
    setFlagAdd(flagAdd + 1);
  };
224
  return (
225
    <div className={styles.tileContainer}>
226
      <div>
227 228 229
        <Spin tip="loading..." spinning={treeLoading}>
          <Divider orientation="left">
            <div className={styles.divider}>
230 231
              基础底图{' '}
              <Tooltip title="新增基础底图">
232 233 234 235 236 237 238 239 240
                <PlusOutlined
                  onClick={() => {
                    handleAdd();
                  }}
                  style={{ marginTop: '5px', marginLeft: '10px', color: '#4699f4' }}
                />
              </Tooltip>
            </div>
          </Divider>
241 242 243 244 245
          <Table
            columns={columns}
            dataSource={tileData}
            bordered
            rowKey="servicename"
246 247 248 249 250
            pagination={false}
            // scroll={{ y: 600 }}
            // pagination={{
            //   showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
            // }}
251
          />
252 253
          <Divider orientation="left" style={{ marginTop: '50px' }}>
            <div className={styles.divider}>
254 255
              分级底图{' '}
              <Tooltip title="新增分级底图">
256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272
                <PlusOutlined
                  onClick={() => {
                    addType();
                  }}
                  style={{ marginTop: '5px', marginLeft: '10px', color: '#4699f4' }}
                />
              </Tooltip>
            </div>{' '}
          </Divider>
          <div className={styles.cardsList1}>
            {/* <AutoResponsive
            itemMargin="10"
            containerWidth="100%"
            itemClassName="item"
            gridWidth="100"
            transitionDuration=".5"
          > */}
273
            {cardData && cardData.length ? (
274 275 276 277 278 279 280 281 282 283 284
              cardData.map((item, index) => (
                <div
                  className={styles.cardItem}
                  key={index}
                  span={5}
                  offset={2}
                  style={{ marginBottom: '1rem' }}
                >
                  <Cards item={item} deletebaseMaps={onDeletebaseMap} cardData={cardData} />
                </div>
              ))
285 286 287
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
            )}
288 289
            {/* </AutoResponsive> */}
          </div>
290

291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325
          <AddModal
            visible={addVisible}
            onCancel={() => setAddVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
            name={name}
          />
          <EditModal
            visible={visible}
            onCancel={() => setVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
          />
          <NewEditModal
            visible={editVisible}
            onCancel={() => setEditVisible(false)}
            callBackSubmit={onSubmit}
            type={type}
            formObj={formObj}
            baseMap={baseMap}
            name={name}
          />
          <AddProjectModal
            visible={projectVisible}
            onCancel={() => setProjectVisible(false)}
            callBackSubmit={onSubmitProject}
            type={type1}
            formObj={formObj}
          />
        </Spin>
      </div>
326
    </div>
327 328 329
  );
};
export default TileData;