feat:宿主管理增加平台配置

src/pages/platformCenter/hostmanager/index.jsx

@@ -8,6 +8,7 @@ import GCKConfig from './gckConfig/index';
 import ETLConfig from './ETLConfig/index';
 import ProxyConfig from './proxyConfig/ProxyConfig';
 import GateConfig from './gateWay/gateWay';
+import PlatformConfig from './platformConfig/platformConfig';
 import RedisConfig from './redisConfig/index';
 
 const { TabPane } = Tabs;
@@ -46,6 +47,9 @@ const HostManager = () => {
         <TabPane tab="网关配置" key="6">
           {activeKey === '6' ? <GateConfig /> : null}
         </TabPane>
+        <TabPane tab="平台配置" key="8">
+          {activeKey === '8' ? <PlatformConfig /> : null}
+        </TabPane>
       </Tabs>
     </PageContainer>
   );

src/pages/platformCenter/hostmanager/platformConfig/constants.js

+export const initAddress = {
+  PandaIOT: 'http://localhost:10021',
+  PandaETL: 'http://localhost:17891',
+  PandaVMS: 'http://localhost:7000',
+  PandaACS: 'http://localhost:10066',
+  PandaMessage: 'http://localhost:8231',
+  EMQ: 'http://localhost:8083',
+};
+
+export const portObj = {
+  PandaIOT: '10021',
+  PandaETL: '17891',
+  PandaVMS: '7000',
+  PandaACS: '10066',
+  PandaMessage: '8231',
+  EMQ: '8083',
+};

src/pages/platformCenter/hostmanager/platformConfig/platformConfig.jsx

+/*
+ * @Author: chenshifa
+ * @Description: 宿主管理
+ */
+
+import platformServices from '@/services/platform/api';
+import platformIcon from './img/平台.png';
+import { Button, Input, message, Select, Spin, Switch, Form, Modal } from 'antd';
+import classNames from 'classnames';
+import _ from 'lodash';
+import React, { useEffect, useRef, useState } from 'react';
+import { PlusOutlined, DeleteOutlined, ExclamationCircleOutlined } from '@ant-design/icons'
+import { initAddress, portObj } from './constants';
+import {
+    GetDataBaseConfig,
+    GetBasicInfo,
+    CreateSiteCode,
+  } from '@/services/hostmanager/hostmanager';
+import styles from './platformConfig.less';
+const getIp =(str)=>{
+    let reg = new RegExp(/\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/);
+    let strArr = str.match(reg)
+    return strArr?.[0] || ''
+}
+
+const SUCCESS_CODE = 0;
+const { Option } = Select;
+const PlatformConfig = (props) => {
+  const params = props.route ? props.route.params : props;
+  const [tips, setTips] = useState('');
+  const [sitecode, setSiteCode] = useState('')
+  const [visible, setVisible] = useState(false);
+  const [platformInfo, setPlatformInfo] = useState([
+    {
+      HostKey: 'PandaIOT',
+      HostName: '物联网平台',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+    {
+      HostKey: 'PandaETL',
+      HostName: 'ETL平台',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+
+    {
+      HostKey: 'PandaVMS',
+      HostName: '视频平台',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+    {
+      HostKey: 'PandaACS',
+      HostName: '门禁平台',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+    {
+      HostKey: 'PandaMessage',
+      HostName: '消息平台',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+    {
+      HostKey: 'EMQ',
+      HostName: '数据转推服务',
+      HostAddress: '',
+      HostApiAddress: '',
+      conStatus: '未配置',
+      Version: '/',
+      IsInuse: false,
+      HostAttr: {},
+      loading: false,
+    },
+  ]);
+  const [dataBaseInfo, setDataBaseInfo] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [statusArr, setStatusArr] = useState([]);
+  const [getWayChecked, setGetWayChecked] = useState(true);
+  let indexRef = useRef(null)
+  const showModal = (i) => {
+    indexRef.current = i
+    setVisible(true)
+};
+  const handleCancel = () => setVisible(false);
+  // 数据库信息获取
+  const getDataBaseConfig = async () => {
+    try {
+      const res = await platformServices.GetDataBaseConfig();
+      if (res?.code === SUCCESS_CODE) {
+        setDataBaseInfo(res?.data);
+      } else {
+        message.error(res?.message);
+      }
+    } catch (err) {
+      message.error(res?.message);
+      console.log(err);
+    }
+  };
+
+  // 获去服务地址、播放地址
+  const getChangeAddress = (val) => {
+    let reg =
+      /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/;
+    let regs = new RegExp(reg);
+
+    const port = portObj[val.HostKey] || '';
+    if (regs.test(val.HostAddress)) {
+      const apiAddress = `http://${val.HostAddress}:${port}`;
+      const wsAddress = `ws://${val.HostAddress}:${port}`;
+      return { apiAddress, wsAddress };
+    } else {
+      const apiAddress = `https://${val.HostAddress}`;
+      const wsAddress = `wss://${val.HostAddress}`;
+      return { apiAddress, wsAddress };
+    }
+  };
+
+  // 测试平台连接
+  const getPingHost = async (val, index) => {
+    setTips(`正在验证平台地址是否可访问，请稍后......`);
+    if (val?.HostAddress === 'localhost') {
+      message.success(`${val?.HostName}地址访问正常！`);
+    } else {
+      const _platformInfo = _.cloneDeep(platformInfo);
+      _platformInfo[index].loading = true;
+      setPlatformInfo(_platformInfo);
+      try {
+        const res = await platformServices.PingHost({
+          ipOrAddr: getIp(val?.HostAddress) || '',
+        });
+        if (res && res.code === 0) {
+          // 测试接口正常
+          if (res.data) {
+            message.success(`${val?.HostName}地址访问正常！`);
+
+            let _statusArr = _.cloneDeep(statusArr);
+            if (_statusArr.includes(val?.HostName)) {
+              const index = _statusArr.indexOf(val?.HostName);
+              _statusArr.splice(index, 1);
+              setStatusArr(_statusArr);
+            }
+
+            // 自动填写服务地址或播放地址
+            const { apiAddress, wsAddress } = getChangeAddress(val);
+            const _platformInfo = _.cloneDeep(platformInfo);
+            _platformInfo[index].HostApiAddress = apiAddress;
+            if (val.HostKey === 'PandaVMS') {
+              _platformInfo[index].HostAttr.WsAddress = wsAddress;
+            }
+            _platformInfo[index].loading = false;
+            setPlatformInfo(_platformInfo);
+
+            setPlatformInfo(_platformInfo);
+          } else {
+            let _statusArr = _.cloneDeep(statusArr);
+            if (!_statusArr.includes(val?.HostName)) {
+              _statusArr.push(val?.HostName);
+            }
+            setStatusArr(_statusArr);
+            const _platformInfo = _.cloneDeep(platformInfo);
+            _platformInfo[index].loading = false;
+            setPlatformInfo(_platformInfo);
+            message.error(`${val?.HostName}地址访问异常，请检查输入内容！`);
+          }
+        } else {
+          message.error(`${res?.msg}`);
+        }
+      } catch (err) {
+        message.error(err);
+      }
+    }
+  };
+
+  // 获取平台宿主地址，并统一测试连接
+  const getAllHostConfig = async () => {
+    setLoading(true);
+    try {
+      let res = await platformServices.GetAllHostConfig();
+      if (res && res.code === 0) {
+        let resCop = _.cloneDeep(res).data?.map((item, index) => {
+          return Object.assign(
+            {},
+            {
+              ...item,
+              conStatus: '未配置',
+              Version: item.Version ? item.Version : '/',
+              HostAddress: item.HostAddress ? item.HostAddress : index < 6  ? 'localhost' : '',
+              HostApiAddress: item.HostApiAddress
+                ? item.HostApiAddress
+                : initAddress[item.HostKey],
+            },
+          );
+        });
+        // 默认值填写播放地址，ssl
+        const findvmsIndex = resCop.findIndex(
+          (ele) => ele.HostKey === 'PandaVMS',
+        );
+        const findemqIndex = resCop.findIndex((ele) => ele.HostKey === 'EMQ');
+        resCop[findvmsIndex].HostAttr.WsAddress = resCop[findvmsIndex].HostAttr
+          .WsAddress
+          ? resCop[findvmsIndex].HostAttr.WsAddress
+          : 'ws://localhost:7000';
+        resCop[findemqIndex].HostAttr.IsSSL = resCop[findemqIndex].HostAttr
+          .IsSSL
+          ? resCop[findemqIndex].HostAttr.IsSSL
+          : 'true';
+
+
+        const iotIndex = resCop.findIndex((ele) => ele.HostKey === 'PandaIOT');
+        const etlIndex = resCop.findIndex((ele) => ele.HostKey === 'PandaETL');
+        const acsIndex = resCop.findIndex((ele) => ele.HostKey === 'PandaACS');
+        const msgIndex = resCop.findIndex(
+          (ele) => ele.HostKey === 'PandaMessage',
+        );
+
+        // 测试连接6个平台，获取连接状态
+        const iot = resCop[iotIndex].IsInuse
+          ? platformServices.IOTIsOpenGck({
+              siteCode: sitecode,
+            })
+          : new Promise((resolve, rej) => resolve(1));
+        const etl = resCop[etlIndex].IsInuse
+          ? platformServices.ETLIsOpenGck({
+              sitecode,
+            })
+          : new Promise((resolve, rej) => resolve(1));
+        const msg = resCop[msgIndex].IsInuse
+          ? platformServices.MSGIsOpenGck({ sitecode })
+          : new Promise((resolve, rej) => resolve(1));
+        const acs = resCop[acsIndex].IsInuse
+          ? platformServices.ACSIsOpenGck({ siteCode: sitecode })
+          : new Promise((resolve, rej) => resolve(1));
+        const vms = resCop[findvmsIndex].IsInuse
+          ? platformServices.VMSIsOpenGck({
+              siteCode: sitecode,
+            })
+          : new Promise((resolve, rej) => resolve(1));
+
+        Promise.all(
+          [iot, etl, vms, acs, msg].map((promise) =>
+            promise.catch((e) => console.log(e)),
+          ),
+        )
+          .then((result) => {
+            setLoading(false);
+
+            result?.forEach((item, index) => {
+              if ((item && item.data) || (item && item.success)) {
+                resCop[index].conStatus = '已连接';
+              }
+            });
+            setPlatformInfo(resCop);
+          })
+          .catch((err) => {
+            console.log(err);
+            setLoading(false);
+          });
+      } else {
+        // message.error(res?.message);
+        setLoading(false);
+      }
+    } catch (err) {
+      message.error('获取信息服务器报错，请稍后再试！');
+      setLoading(false);
+      console.log(err);
+    }
+  };
+
+  // 保存单个
+  const getHostConfig = async (clickItem, index) => {
+    setLoading(true);
+    try {
+      let res = await platformServices.GetAllHostConfig();
+      if (res && res.code === SUCCESS_CODE) {
+        let resCop = _.cloneDeep(res).data?.map((item) => {
+          return Object.assign(
+            {},
+            {
+              ...item,
+              IsInuse: true,
+              conStatus: '未配置',
+              Version: item.Version ? item.Version : '/',
+              HostAddress: item.HostAddress ? item.HostAddress : 'localhost',
+              HostApiAddress: item.HostApiAddress
+                ? item.HostApiAddress
+                : initAddress[item.HostKey],
+            },
+          );
+        });
+        setPlatformInfo(resCop);
+        setTimeout(() => {
+          pingCon(clickItem, index);
+        }, 0);
+      } else {
+        setLoading(false);
+        // message.error(res?.message);
+        // const _platformInfo = _.cloneDeep(platformInfo);
+        // _platformInfo[index].loading = false;
+        // setPlatformInfo(_platformInfo);
+      }
+    } catch (err) {
+      // message.error('获取信息服务器报错，请稍后再试！');
+      setLoading(false);
+      console.log(err);
+    }
+  };
+
+  useEffect(() => {
+    if (!getWayChecked) {
+      changeGetWay(true, 'save');
+    }
+    getSiteCode();
+    getDataBaseConfig();
+    
+  }, []);
+  
+  useEffect(()=>{
+    if(sitecode){
+      getAllHostConfig();
+    }
+  }, [sitecode])
+
+    const getSiteCode = () => {
+      GetBasicInfo().then(res => {
+        setLoading(true);
+        if (res.code === 0) {
+          setSiteCode(res.data);
+        }
+      });
+    };
+  // saveInfo
+  // HostKey:PandaETL\EMQ\PandaMessgae\PandaACS\PandaVMS\PandaIOT
+  const saveInfo = async (item, index) => {
+    setTips('');
+    if (statusArr.includes(item?.HostName)) {
+      message.error('请输入可访问的平台地址！');
+      return;
+    }
+    if(index < 6){
+        changeGetWay(true, 'save');
+    }
+    // 保存页面信息
+    const params1 = {
+      otherSettings: item.OtherSettings,
+      hostKey: item?.HostKey,
+      hostName: item?.HostName,
+      isInuse: true,
+      version: item?.Version,
+      hostAddress: item?.HostAddress,
+      hostApiAddress: item?.HostApiAddress,
+      hostAttr: {
+        WsAddress: item?.HostAttr?.WsAddress,
+        IsSSL: item?.HostAttr?.IsSSL,
+      },
+    };
+    if (item.HostKey === 'EMQ') {
+      // 直接保存
+      const params = {
+        tcpAddress: item?.HostAddress,
+        iotAddress: getIp(item?.HostAddress || ''),
+        sslSafe: item.HostAttr.IsSSL === 'true' ? 1 : 0,
+      };
+      const res = await platformServices.SaveTcpAddress(params);
+      if (res?.code === SUCCESS_CODE) {
+        message.success('保存成功！');
+      } else {
+        message.warn(res?.msg);
+      }
+    } else {
+      const res1 = await saveHostConfig(params1);
+      if (res1 && res1?.code === SUCCESS_CODE) {
+        // 第一步保存成功后再保存数据库信息
+        if (item.HostKey === 'PandaIOT') {
+          const params = {
+            // host: item?.HostApiAddress,
+            host: dataBaseInfo?.ip,
+            user: dataBaseInfo?.userName,
+            pwd: dataBaseInfo?.password,
+            dataBaseName: dataBaseInfo?.dbName,
+            siteCode: sitecode
+          };
+          const res = await platformServices.AddDBV2(params);
+          if (res && res?.status === 200) {
+            message.success('保存成功！');
+            // 更新状态 非EMQ保存后获取测试连接状态
+            getHostConfig(item, index);
+          } else {
+            message.warn(res?.msg);
+          }
+        }else if (item.HostKey === 'PandaETL') {
+          const params = {
+            // host: item?.HostApiAddress,
+            Host: dataBaseInfo?.ip,
+            UserName: dataBaseInfo?.userName,
+            Pwd: dataBaseInfo?.password,
+            DB: dataBaseInfo?.dbName,
+            ConnectionName: '数据中台',
+            siteCode: sitecode,
+            Port: 1433,
+          };
+          const res = await platformServices.SettingGCK(params);
+          if (res?.code === '0') {
+            message.success('保存成功！');
+            // 更新状态 非EMQ保存后获取测试连接状态
+            getHostConfig(item, index);
+          } else {
+            message.warn(res?.msg);
+          }
+        }else if (item.HostKey === 'PandaVMS') {
+          const params = {
+            host: dataBaseInfo?.ip,
+            user: dataBaseInfo?.userName,
+            password: dataBaseInfo?.password,
+            database: dataBaseInfo?.dbName,
+            siteCode: sitecode, 
+            port: 1433,
+          };
+          const res = await platformServices.SaveVMS(params);
+          if (res?.code === 0) {
+            message.success('保存成功！');
+            // 更新状态 非EMQ保存后获取测试连接状态
+            getHostConfig(item, index);
+          } else {
+            message.warn(res?.msg);
+          }
+        }else if (item.HostKey === 'PandaACS') {
+          const params = {
+            host: dataBaseInfo?.ip,
+            user: dataBaseInfo?.userName,
+            pwd: dataBaseInfo?.password,
+            dataBaseName: dataBaseInfo?.dbName,
+            siteCode: sitecode
+          };
+
+          const res = await platformServices.ACSAddDBV2(params);
+          if (res && res?.status === 200) {
+            message.success('保存成功！');
+            // 更新状态 非EMQ保存后获取测试连接状态
+            getHostConfig(item, index);
+          } else {
+            message.warn(res?.msg);
+          }
+        }else if (item.HostName === '消息平台') {
+          const params = {
+            siteCode: sitecode,
+            serverIP: dataBaseInfo?.ip,
+            userName: dataBaseInfo?.userName,
+            passWord: dataBaseInfo?.password,
+            dataBase: dataBaseInfo?.dbName,
+          };
+          const res = await platformServices.SaveMessage(params);
+          if (res?.code === SUCCESS_CODE) {
+            message.success('保存成功！');
+          } else {
+            message.warn(res?.ErrorMsg);
+          }
+        }else{
+            message.success('保存成功！');
+        }
+      }else{
+        message.error('保存失败！' + res1?.msg)
+      }
+    }
+  };
+
+  // 测试连接
+  const pingCon = async (item, index) => {
+    setTips('');
+    let res = {};
+    const _platformInfo = _.cloneDeep(platformInfo);
+    _platformInfo[index].loading = true;
+    setPlatformInfo(_platformInfo);
+    try {
+      if (item.HostKey === 'PandaIOT') {
+        res = await platformServices.IOTIsOpenGck({ siteCode: sitecode });
+      } else if (item.HostKey === 'PandaETL') {
+        res = await platformServices.ETLIsOpenGck({ sitecode });
+      } else if (item.HostName === '消息平台') {
+        res = await platformServices.MSGIsOpenGck({ sitecode });
+      } else if (item.HostName === '视频平台') {
+        res = await platformServices.VMSIsOpenGck({ siteCode: sitecode });
+      } else if (item.HostName === '门禁平台') {
+        res = await platformServices.ACSIsOpenGck({ siteCode: sitecode });
+      }
+      if ((res && res.data) || (res && res?.success)) {
+        message.success('测试连接成功！');
+        const _platformInfo = _.cloneDeep(platformInfo);
+        _platformInfo[index].conStatus = '已连接';
+        _platformInfo[index].IsInuse = true;
+        _platformInfo[index].loading = false;
+        setPlatformInfo(_platformInfo);
+      } else {
+        message.error('测试连接失败，请修改地址！');
+        const _platformInfo = _.cloneDeep(platformInfo);
+        _platformInfo[index].conStatus = '连接失败';
+        _platformInfo[index].loading = false;
+        setPlatformInfo(_platformInfo);
+      }
+      setLoading(false);
+    } catch (err) {
+      // message.error(res?.message);
+      _platformInfo[index].loading = false;
+      setPlatformInfo(_platformInfo);
+      console.log(err);
+      setLoading(false);
+    }
+  };
+  //
+  const changePlatformAddress = (e, item, index) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    _platformInfo[index].HostAddress = e.target.value;
+    setPlatformInfo(_platformInfo);
+  };
+
+  const changeServiceAddress = (e, item, index) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    _platformInfo[index].HostApiAddress = e.target.value;
+    setPlatformInfo(_platformInfo);
+  };
+
+  const changePlayAddress = (e, item, index) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    _platformInfo[index].HostAttr.WsAddress = e.target.value;
+    setPlatformInfo(_platformInfo);
+  };
+
+  const changeOtherAtrr = (e, index, i) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    if(_platformInfo[index].OtherSettings){
+        const keys = Object.keys(_platformInfo[index].OtherSettings)
+        _platformInfo[index].OtherSettings[keys[i]] = e.target.value;
+        setPlatformInfo(_platformInfo);
+    }
+   
+  }
+
+  const deleteOtherAtrr = (index, i) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    if(_platformInfo[index].OtherSettings){
+        Modal.confirm({
+            title: '删除提示',
+            icon: <ExclamationCircleOutlined />,
+            content: '确认删除吗？',
+            okText: '确认',
+            cancelText: '取消',
+            onOk: ()=>{
+                const keys = Object.keys(_platformInfo[index].OtherSettings)
+                platformServices.DeleteHostConfigByKey({ key: keys[i] }).then(res=>{
+                    if(res.code == 0){
+                        delete _platformInfo[index].OtherSettings[keys[i]];
+                        setPlatformInfo(_platformInfo);
+                    }
+                })
+            }
+          });
+       
+    }
+  }
+
+  // 保存页面信息
+  const saveHostConfig = async (data) => {
+    try {
+      const res = await platformServices.SaveHostConfig(data);
+      if (res && res?.code === SUCCESS_CODE) {
+        return res;
+      } else {
+        message.error(res && res?.message);
+      }
+    } catch (err) {
+      message.error(res && res?.message);
+      console.log(err);
+    }
+  };
+
+  const setSSL = (value, item, index) => {
+    const _platformInfo = _.cloneDeep(platformInfo);
+    _platformInfo[index].HostAttr.IsSSL = value;
+    setPlatformInfo(_platformInfo);
+  };
+
+  const changeGetWay = async (value, type) => {
+    setGetWayChecked(value);
+    try {
+      const res = await platformServices.UpdateGeteWay({ isUsed: value });
+      if (res && res.code === 0) {
+        message.success(
+          type && type === 'save'
+            ? `自动开启网关成功！`
+            : `${value ? '开启' : '关闭'}网关成功！`,
+        );
+      } else {
+        message.warn(`网关状态切换失败，请稍后重试！`);
+      }
+    } catch (error) {
+      console.log(error);
+    }
+  };
+
+  const handleAddProperty = (values) => {
+    if(indexRef.current > -1 && platformInfo[indexRef.current].OtherSettings){
+        const { key, value } = values;
+        const _platformInfo = _.cloneDeep(platformInfo);
+        _platformInfo[indexRef.current].OtherSettings[key] = value;
+        setPlatformInfo(_platformInfo)
+        handleCancel();
+    }
+ 
+  };
+  // 自定义校验函数
+  const validateKey = (_, value) => {
+    if(indexRef.current > -1 && platformInfo[indexRef.current].OtherSettings){
+        const keys = Object.keys(platformInfo[indexRef.current].OtherSettings)
+        if (value && keys.includes(value.trim())) {
+            return Promise.reject(new Error(`字段名${value}已存在`));
+          }
+    }
+   
+    return Promise.resolve();
+  };
+  return (
+    <div className={styles.platformConfig} style={{
+        height: window.innerHeight - 130 + 'px',
+    }}>
+      {loading ? (
+        <Spin delay={1000} 
+          style={{
+            width: '100%',
+            height: '100%',
+            background: 'rgba(255,255,255,0.7)',
+            zIndex: 100,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'absolute',
+          }}
+          spinning={loading}
+        />
+      ) : (
+        ''
+      )}
+      <div className={classNames(styles.rightBox, 'wkt-scroll-light')}>
+        <div className={styles.tableTitleCon}>
+          <div className={styles.tableTitle}>平台配置管理</div>
+          {/* <div className={styles.getWay}>
+            <div>网关状态：</div>
+            <Switch
+              checkedChildren="开启"
+              unCheckedChildren="关闭"
+              checked={getWayChecked}
+              onChange={(value) => changeGetWay(value)}
+            />
+          </div> */}
+        </div>
+        <div className={styles.tableBox}>
+          {platformInfo.map((item, index) => {
+            return (
+              <div key={item.HostKey} className={styles.card}>
+                {item.loading ? (
+                  <Spin delay={1000} 
+                    style={{
+                      width: '100%',
+                      height: '100%',
+                      background: 'rgba(255,255,255,0.7)',
+                      zIndex: 100,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      position: 'absolute',
+                    }}
+                    spinning={item.loading}
+                    tip={tips}
+                  />
+                ) : (
+                  ''
+                )}
+                <div className={styles.cardTitleCon}>
+                  <img src={platformIcon} alt=""></img>
+                  <div className={styles.cardTitle}>
+                    {`${item?.HostName} (${item?.HostKey})`}
+                  </div>
+                </div>
+                <div className={styles.cardCon}>
+                    {index < 6 && <>
+                        <div className={styles.cardConItem}>
+                    <div className={styles.cardConItemName}>
+                      {item.HostKey !== 'EMQ' ? '平台地址：' : '连接地址：'}
+                    </div>
+                    <Input
+                      status={statusArr.includes(item.HostName) ? 'error' : ''}
+                      placeholder="请输入平台地址"
+                      value={item.HostAddress}
+                      onBlur={() => {
+                        getPingHost(item, index);
+                      }}
+                      onChange={(e) => {
+                        changePlatformAddress(e, item, index);
+                      }}
+                    />
+                  </div>
+                  {item.HostKey !== 'EMQ' && (
+                    <div className={styles.cardConItem}>
+                      <div className={styles.cardConItemName}>服务地址：</div>
+                      <Input
+                        placeholder="请输入服务地址"
+                        value={item.HostApiAddress}
+                        onChange={(e) => {
+                          changeServiceAddress(e, item, index);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {item.HostKey === 'PandaVMS' && (
+                    <div className={styles.cardConItem}>
+                      <div className={styles.cardConItemName}>播放地址：</div>
+                      <Input
+                        placeholder="请输入播放地址"
+                        value={item?.HostAttr?.WsAddress}
+                        onChange={(e) => {
+                          changePlayAddress(e, item, index);
+                        }}
+                      />
+                    </div>
+                  )}
+                  {item.HostKey === 'EMQ' && (
+                    <div className={styles.cardConItem}>
+                      <div className={styles.cardConItemName}>是否SSL：</div>
+                      <Select
+                        style={{ width: '100%' }}
+                        allowClear
+                        placeholder="请选择机构"
+                        value={item.HostAttr.IsSSL}
+                        onChange={(value) => {
+                          setSSL(value, item, index);
+                        }}
+                      >
+                        <Option value={'true'}>是</Option>
+                        <Option value={'false'}>否</Option>
+                      </Select>
+                    </div>
+                  )}
+                  {item.HostKey !== 'EMQ' && (
+                    <div className={styles.cardConItem}>
+                      <div className={styles.cardConItemName}>连接状态：</div>
+                      <Input disabled value={item.conStatus} />
+                    </div>
+                  )}
+                  {item.HostKey !== 'EMQ' && (
+                    <div className={styles.cardConItem}>
+                      <div className={styles.cardConItemName}>平台版本：</div>
+                      <Input value={item.Version} disabled />
+                    </div>
+                  )}</>
+
+                    }
+                 
+               
+                    {item.OtherSettings && Object.keys(item.OtherSettings).map((k, i)=> (
+                        <div className={classNames(styles.cardConItem, styles.otherAtt)}>
+                        <div className={styles.cardConItemName}>{k}：</div>
+                        <Input value={item.OtherSettings[k]} onChange={e=> changeOtherAtrr(e, index, i)}/>
+                        <DeleteOutlined style={{ color: 'red', cursor: 'pointer', position: 'absolute', right: '-25px' }} onClick={()=> deleteOtherAtrr(index, i)}/>
+                      </div> 
+                    ))
+                    }
+                       <div className={styles.cardCustomItem}>
+                      <Button icon={<PlusOutlined/>} type={'primary'} onClick={()=> showModal(index)} size={'small'}>添加</Button>
+                    </div>
+                </div>
+                <div className={styles.cardBtn}>
+                  {(item.HostKey !== 'EMQ' && index < 6) && (
+                    <Button
+                      disabled={!item.IsInuse}
+                      onClick={() => {
+                        pingCon(item, index);
+                      }}
+                    >
+                      测试连接
+                    </Button>
+                  )}
+
+                  <Button
+                    onClick={() => {
+                      saveInfo(item, index);
+                    }}
+                  >
+                    保存修改
+                  </Button>
+                </div>
+                {item.IsInuse ? (
+                  <div className={styles.checkIcon}>已启用</div>
+                ) : (
+                  <div className={styles.uncheckIcon}>未启用</div>
+                )}
+              </div>
+            );
+          })}
+         
+        </div>
+      </div>
+      <Modal
+            title="添加配置"
+            visible={visible}
+            onCancel={handleCancel}
+            destroyOnClose
+            footer={null}
+        >
+            <Form layout="vertical" onFinish={handleAddProperty}>
+            <Form.Item name="key" label="名称" rules={[{ required: true, message: '请输入名称' }, { validator: validateKey }]}>
+                <Input placeholder="请输入名称" />
+            </Form.Item>
+            <Form.Item name="value" label="值" rules={[{ required: true, message: '请输入值' }]}>
+                <Input placeholder="请输入值" />
+            </Form.Item>
+            <Button type="primary" htmlType={'submit'} style={{ marginTop: 10 }}>确定</Button>
+            </Form>
+        </Modal>
+    </div>
+  );
+};
+export default PlatformConfig;

src/pages/platformCenter/hostmanager/platformConfig/platformConfig.less

+@import '~antd/es/style/themes/default.less';
+.platformConfig {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  padding: 8px;
+
+  .rightBox {
+    flex: 1;
+    padding: 5px;
+    background-color: #fff;
+    display: flex;
+    flex-direction: column;
+    .tableTitleCon {
+      flex: none;
+      border-bottom: 1px solid #f1f5f8;
+      padding: 10px 0 10px 5px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .tableTitleCon {
+        font-weight: 500;
+        font-size: 16px;
+      }
+      .getWay{
+        display: flex;
+        align-items: center;
+        margin-right: 20px;
+      }
+    }
+    .tableBox {
+      flex: 1;
+      margin-top: 10px;
+      overflow: hidden;
+      display: flex;
+      //justify-content: space-evenly;
+      align-items: center;
+      flex-wrap: wrap;
+      overflow-y: scroll;
+      .card {
+        width: 32.5%;
+        height: 48%;
+        margin: 5px;
+        background-image: url('./img/platformBg.png');
+        background-position: center;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+
+        .checkIcon {
+          position: absolute;
+          top: 15px;
+          right: 15px;
+          font-size: 18px;
+          font-weight: bold;
+          color: rgb(40, 169, 1);
+        }
+        .uncheckIcon {
+          position: absolute;
+          top: 15px;
+          right: 15px;
+          font-size: 18px;
+          font-weight: bold;
+          color: rgb(123, 128, 125);
+        }
+        .cardTitleCon {
+          height: 15%;
+          padding: 16px 15px 0 15px;
+          display: flex;
+          align-items: center;
+          img {
+            width: 25px;
+            height: 25px;
+            margin-right: 10px;
+          }
+          .cardTitle {
+            font-size: 17px;
+            font-weight: bold;
+          }
+        }
+
+        .cardCon {
+          height: 70%;
+          overflow: auto;
+
+          &::-webkit-scrollbar {
+            width: 4px !important;
+            /*高宽分别对应横竖滚动条的尺寸*/
+            height: 6px !important;
+          }
+
+          &::-webkit-scrollbar-thumb {
+            background: #b9bdc0;
+            border-radius: 6px;
+          }
+
+          &::-webkit-scrollbar-track {
+            background: transparent;
+            border-radius: 5px;
+          }
+          padding: 10px 40px;
+          :global {
+            .@{ant-prefix}-input[disabled] {
+              background-color: #fff;
+            }
+          }
+          .cardConItem {
+            display: flex;
+            margin: 12px 10px;
+            align-items: center;
+            .cardConItemName {
+              min-width: 100px;
+            }
+            &.otherAtt{
+                position: relative;
+            }
+          }
+
+          .cardCustomItem{
+            display: flex;
+            margin: 12px 10px;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+        .cardBtn {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 18%;
+          overflow: hidden;
+          display: flex;
+          align-items: center;
+          justify-content: space-evenly;
+          :global {
+            .@{ant-prefix}-btn[disabled] {
+              background: #fff !important;
+            }
+          }
+        }
+      }
+    }
+  }
+}

src/services/platform/api.js

+import { get, post } from '@/services/index';
+const _Iot = '/Iot';
+const _pandaACS = '/PandaACS';
+const _civdata = '/CivData';
+// 新增站点
+ const GetDataBaseConfig = params => get(`/PandaOMS/OMS/DBManager/GetDataBaseConfig`, params);
+
+ const PingHost = params => get('/PandaOMS/OMS/HostManager/PingHost', params);
+
+ const GetAllHostConfig = params => get('/PandaOMS/OMS/HostManager/GetAllHostConfig', params);
+
+ const DeleteHostConfigByKey = params => get('/PandaOMS/OMS/HostManager/DeleteHostConfigByKey', params);
+
+ const IOTIsOpenGck = params => get(`${_Iot}/PandaIotWCF/IsOpenGck`, params);
+
+ const ETLIsOpenGck = params => get(`${_civdata}/SystemSetting/IsOpenGck`, params);
+
+ const MSGIsOpenGck = params => get('/Message/api/Message/IsOpenGck', params);
+
+ const ACSIsOpenGck = params => get(`${_pandaACS}/api/HealthCheck/PingACSPlatform`, params);
+
+ const VMSIsOpenGck = params => get('/pandavms/sys/isopengck', params);
+
+ const SaveTcpAddress = params => get(`/PandaOMS/OMS/HostManager/SaveTcpAddress`, params);
+
+ const AddDBV2 = params => post(`${_Iot}/api/DB/AddDBV2`, params);
+
+ const SettingGCK = params => get(`${_civdata}/SystemSetting/SettingGCK`, params);
+
+ const SaveVMS = params => get('/pandavms/db/add', params);
+
+ const ACSAddDBV2 = params => post(`${_pandaACS}/api/DB/AddDBV2`, params);
+
+ const SaveMessage = params => post('/Message/api/Message/ConnetMsgPlatform', params);
+
+ const SaveHostConfig = params => post('/PandaOMS/OMS/HostManager/SaveHostConfig', params);
+
+ const UpdateGeteWay = params => get('/PandaOMS/OMS/HostManager/UpdateGeteWay', params);
+
+ export default {
+    GetDataBaseConfig,
+    PingHost,
+    GetAllHostConfig,
+    IOTIsOpenGck,
+    ETLIsOpenGck,
+    MSGIsOpenGck,
+    ACSIsOpenGck,
+    VMSIsOpenGck,
+    SaveTcpAddress,
+    AddDBV2,
+    SettingGCK,
+    SaveVMS,
+    ACSAddDBV2,
+    SaveMessage,
+    SaveHostConfig,
+    UpdateGeteWay,
+    DeleteHostConfigByKey
+ }