feat: 组态、mqtt组件增加订阅mqtt传参

packages/base-components/MqttView/src/MqttView.md

@@ -20,6 +20,7 @@ group:
 | mqttSsl     | 是否加密            | bool                          | false        |
 | siteCode    | 站点编码            | string                        | -            |
 | devices     | 设备编码集合        | array                         | []           |
+| params      | Mqtt 订阅参数传递   | object                        | {}           |
 | callback    | 订阅的回调          | function(value,code,topic){ } | function(){} |
 | controlback | 控制的回调          | function(value,code,topic){ } | function(){} |
 

packages/base-components/MqttView/src/index.js

@@ -10,6 +10,7 @@ class MqttView {
     this.devices = props.devices;
     this.callback = props.callback;
     this.controlback = props.controlback;
+    this.params = props.params || {};
     this.flag = false;
   }
 
@@ -25,11 +26,12 @@ class MqttView {
       path = this.mqttPath,
       userName = 'admin',
       password = 'public';
+    const queryStr = this.toQueryString(this.params);
     this.saveWaCount = 0;
     this.saveWaClient = new MqttClient.Client(
       hostname,
       port,
-      `${path}?_site=${this.siteCode}`,
+      `${path}?_site=${this.siteCode}${queryStr ? '&' + queryStr : ''}`,
       clientId,
     );
     this.saveWaOptions = {
@@ -155,6 +157,13 @@ class MqttView {
       })
       .toUpperCase();
   }
+
+  // 转为url参数
+  toQueryString(obj) {
+    return Object.keys(obj)
+      .map((key) => encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]))
+      .join('&');
+  }
 }
 
 MqttView.propTypes = {
@@ -163,6 +172,7 @@ MqttView.propTypes = {
   mqttSsl: PropTypes.bool,
   siteCode: PropTypes.string,
   devices: PropTypes.array,
+  params: PropTypes.object,
   callback: PropTypes.func,
   controlback: PropTypes.func,
 };
@@ -173,6 +183,7 @@ MqttView.defaultProps = {
   mqttSsl: false,
   siteCode: '',
   devices: [],
+  params: {},
   callback: () => {},
   controlback: () => {},
 };

packages/extend-components/EC_ConfigurationView/src/EC_ConfigurationView.md

@@ -36,6 +36,7 @@ group:
 | isZoom         | 是否可缩放(手持上建议设置 true)  | boolean          | false  |
 | flowShow       | 是否水流效果（无数据表现）       | boolean          | true   |
 | messaged       | 传递信息给组态                   | object           | {}     |
+| params         | Mqtt 订阅参数传递                | object           | {}     |
 | customBack     | 自定义交互的回调，返回点击的模型 | function(node){} | -      |
 
 ### 工艺回放

packages/extend-components/EC_ConfigurationView/src/RealModel.js

@@ -999,6 +999,7 @@ const ConfigurationView = (props) => {
             mqttSsl: globalConfig.mqtt_IsSSL,
             siteCode: globalConfig?.mqtt_mess?.site_code || '',
             devices: devicesCode,
+            params: props.params || {},
             callback: refreshData,
             controlback: controlData,
           })
@@ -3328,6 +3329,7 @@ ConfigurationView.defaultProps = {
   isZoom: false,
   flowShow: true,
   messaged: {},
+  params: {},
   customBack: () => {},
 };
 
@@ -3339,6 +3341,7 @@ ConfigurationView.propTypes = {
   isZoom: PropTypes.bool,
   flowShow: PropTypes.bool,
   messaged: PropTypes.object,
+  params: PropTypes.object,
   customBack: PropTypes.func,
 };
 

packages/extend-components/EC_ConfigurationView/src/demos/Basic.tsx

@@ -12,17 +12,21 @@ const Demo = () => {
     <>
       <div style={{ width: '100%', height: '600px', background: '#242835' }}>
         <PandaConfiguration
-          name={name}
-          devices={devices.split(',')}
-          // name={'崇左丽江水厂原水泵房'}
-          // devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003'.split(
-          //   ',',
-          // )}
+          // name={name}
+          // devices={devices.split(',')}
+          name={'崇左丽江水厂原水泵房'}
+          devices={'EQZT00000007,CPBA00000001,CPAA00000001,EQZT00000008,CPDA00000001,CPAD00000001,LJSC00000002,EQZT00000005,EQZT00000004,EQZT00000002,EQZT00000003'.split(
+            ',',
+          )}
           // name={'丽江水厂原水提升泵D单元'}
           // devices={'CPAA00000001, CPAD00000001, LJSC00000002'.split(',')}
           config={globalConfig}
           deviceName={['工艺流程1', '工艺流程2', '工艺流程3']}
           messaged={messaged}
+          params={{
+            name: '1213',
+            title: 'mqtt参数',
+          }}
           // isZoom={true}
           // flowShow={false}
         />