TileConfig.jsx 9.38 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 227 228 229 230 231 232 233 234 235 236 237 238 239 240
      <div style={{ height: 'calc(100vh - 153px)', overflowY: 'scroll' }}>
        <Spin tip="loading..." spinning={treeLoading}>
          {/* <div className={styles.tileBtn}>
            <Button
              type="primary"
              onClick={() => {
                handleAdd();
              }}
            >
              新增
            </Button>
          </div> */}
          <Divider orientation="left">
            <div className={styles.divider}>
              {' '}
241 242
              基础底图{' '}
              <Tooltip title="新增基础底图">
243 244 245 246 247 248 249 250 251
                <PlusOutlined
                  onClick={() => {
                    handleAdd();
                  }}
                  style={{ marginTop: '5px', marginLeft: '10px', color: '#4699f4' }}
                />
              </Tooltip>
            </div>
          </Divider>
252 253 254 255 256
          <Table
            columns={columns}
            dataSource={tileData}
            bordered
            rowKey="servicename"
257 258 259 260 261
            pagination={false}
            // scroll={{ y: 600 }}
            // pagination={{
            //   showTotal: (total, range) => `第${range[0]}-${range[1]} 条/共 ${total} 条`,
            // }}
262
          />
263 264
          <Divider orientation="left" style={{ marginTop: '50px' }}>
            <div className={styles.divider}>
265 266
              分级底图{' '}
              <Tooltip title="新增分级底图">
267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283
                <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"
          > */}
284
            {cardData && cardData.length ? (
285 286 287 288 289 290 291 292 293 294 295
              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>
              ))
296 297 298
            ) : (
              <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ margin: 'auto' }} />
            )}
299 300
            {/* </AutoResponsive> */}
          </div>
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 326 327 328 329 330 331 332 333 334 335 336
          <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>
337
    </div>
338 339 340
  );
};
export default TileData;