feat: mqtt订阅增加账户信息

package.json

@@ -146,6 +146,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-private-methods": "^7.18.6",
+    "@wisdom-components/VmsVideo": "1.2.27",
     "@wisdom-components/basictable": "1.5.29",
     "@wisdom-components/ec_historyview": "^1.4.3",
     "@wisdom-components/empty": "^1.3.9",
@@ -153,12 +154,12 @@
     "@wisdom-components/loadbox": "1.1.4",
     "@wisdom-components/timerangepicker": "^1.3.4",
     "@wisdom-components/videoslidermodal": "1.1.2",
-    "@wisdom-components/VmsVideo": "1.2.27",
     "@wisdom-utils/utils": "0.0.46",
     "antd-mobile": "5.10.4",
     "axios": "^1.4.0",
     "classnames": "^2.2.6",
     "cross-spawn": "^7.0.3",
+    "crypto-js": "^4.2.0",
     "echarts": "^5.4.0",
     "echarts-for-react": "^3.0.2",
     "ezuikit-js": "^7.6.3",

packages/base-components/MqttView/src/demos/Base.tsx

@@ -9,6 +9,8 @@ class MqttDemo extends React.Component {
       flag: true,
     };
     this.mqttView = new PandaMqttView({
+      userName: 'panda',
+      password: '6FC08E462A0C87953CD3DB4706462E4B',
       mqttIP: 'emqttd10.panda-water.cn:443',
       mqttPath: '/mqtt',
       mqttSsl: true,

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

 import React, { useEffect } from 'react';
 import MqttClient from 'mqtt-client';
 import PropTypes from 'prop-types';
+import CryptoJS from 'crypto-js';
 class MqttView {
   constructor(props) {
+    this.userName = props.userName;
+    this.password = props.password;
     this.mqttIP = props.mqttIP;
     this.mqttPath = props.mqttPath;
     this.mqttSsl = props.mqttSsl;
@@ -24,8 +27,8 @@ class MqttView {
       cleanSession = true,
       ssl = this.mqttSsl,
       path = this.mqttPath,
-      userName = 'admin',
-      password = 'public';
+      userName = this.userName || 'admin',
+      password = this.password ? getDecryptedValue(this.password) : 'public';
     const queryStr = this.toQueryString(this.params);
     this.saveWaCount = 0;
     this.saveWaClient = new MqttClient.Client(
@@ -167,6 +170,8 @@ class MqttView {
 }
 
 MqttView.propTypes = {
+  userName: PropTypes.string,
+  password: PropTypes.string,
   mqttIP: PropTypes.string,
   mqttPath: PropTypes.string,
   mqttSsl: PropTypes.bool,
@@ -178,6 +183,8 @@ MqttView.propTypes = {
 };
 
 MqttView.defaultProps = {
+  userName: 'admin',
+  password: 'public',
   mqttIP: '',
   mqttPath: '/mqtt',
   mqttSsl: false,
@@ -188,4 +195,38 @@ MqttView.defaultProps = {
   controlback: () => {},
 };
 
+// 解密
+export const getDecryptedValue = (encryptedText) => {
+  const AESKey = '1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'; //32位
+  const AES_IV = '1234567890000000'; //16位
+  const key = CryptoJS.enc.Utf8.parse(AESKey);
+  const iv = CryptoJS.enc.Utf8.parse(AES_IV);
+
+  // 解密
+  const decrypted = CryptoJS.AES.decrypt(
+    { ciphertext: CryptoJS.enc.Hex.parse(encryptedText) },
+    key,
+    { iv: iv },
+  );
+
+  // 转换为明文
+  const plaintext = decrypted.toString(CryptoJS.enc.Utf8);
+
+  return plaintext;
+};
+
+// 加密
+export const getEncryptedValue = (password) => {
+  const AESKey = '1p2a3n4d5a6o7m8s9a10n1e2t3c4o5re'; //32位
+  const AES_IV = '1234567890000000'; //16位
+  const key = CryptoJS.enc.Utf8.parse(AESKey);
+  const iv = CryptoJS.enc.Utf8.parse(AES_IV);
+
+  const psd = CryptoJS.AES.encrypt(password, key, { iv: iv })
+    .ciphertext.toString(CryptoJS.enc.Hex)
+    .toUpperCase();
+
+  return psd;
+};
+
 export default MqttView;

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

@@ -995,6 +995,8 @@ const ConfigurationView = (props) => {
       if ((DomRef && !DomRef.current) || !twoDom) return setNoInitial(true);
       mqttView = devicesCode.length
         ? new MqttView({
+            userName: globalConfig?.mqtt_account || '',
+            password: globalConfig?.mqtt_password || '',
             mqttIP: globalConfig.mqtt_iotIP,
             mqttPath: globalConfig.mqtt_path,
             mqttSsl: globalConfig.mqtt_IsSSL,

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

@@ -999,6 +999,8 @@ const ConfigurationView = (props) => {
       if ((DomRef && !DomRef.current) || !twoDom) return setNoInitial(true);
       mqttView = devicesCode.length
         ? new MqttView({
+            userName: globalConfig?.mqtt_account || '',
+            password: globalConfig?.mqtt_password || '',
             mqttIP: globalConfig.mqtt_iotIP,
             mqttPath: globalConfig.mqtt_path,
             mqttSsl: globalConfig.mqtt_IsSSL,

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

@@ -3,7 +3,7 @@ import { Button } from 'antd';
 import PandaConfiguration from '../index';
 // import PandaConfigurationView from '../../es/index';
 const Demo = () => {
-  const [name, setName] = useState('cs0320');
+  const [name, setName] = useState('水厂工艺流程段');
   const [devices, setDevices] = useState('EQZT00000008');
   const [messaged, setMessaged] = useState({
     age: '运行监控1',
@@ -12,12 +12,12 @@ 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}
@@ -52,6 +52,8 @@ const Demo = () => {
 export default Demo;
 
 const globalConfig = {
+  mqtt_account: 'panda',
+  mqtt_password: '6FC08E462A0C87953CD3DB4706462E4B',
   token: 'a1372ef0ce7b4e4884d31cfd99fe92f6',
   mqtt_iotIP: 'emqttd10.panda-water.cn:443',
   mqtt_path: '/mqtt',