feats

src/components/GeoMap/VideoModel.jsx

@@ -1,10 +1,15 @@
 import { Modal, Button } from 'antd';
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import Hatc from '@/components/Hatc';
+import { getPreviewInfo } from '@/services/machinery';
 
 export default (props) => {
-  const { width = 600, machineryRef, visible, toggleVisible } = props;
+  const width = 960;
+  const height = 540;
+  const { machineryRef, visible, toggleVisible } = props;
 
-  const [url, setURL] = useState();
+  const [preview, setPreview] = useState();
+  const hatcRef = useRef();
 
   const TitleHolder = useMemo(() => <div>这是标题占位</div>, []);
 
@@ -14,12 +19,12 @@ export default (props) => {
 
   useEffect(() => {
     // 隐藏的时候取消视频播放
-    if (!visible) {
-      setURL(undefined);
+    if (visible) {
+      getPreviewInfo('05a281758ccfe9c68fcada81faee7cae').then(setPreview);
     } else {
-      setURL(
-        'https://yz-offical.oss-cn-shanghai.aliyuncs.com/%E7%9C%81%E5%8F%98%E7%94%B5%E5%9F%B9%E8%AE%AD%E5%9F%BA%E5%9C%B0%E8%A7%86%E9%A2%91%20A%20copy.mov',
-      );
+      if (hatcRef.current) {
+        hatcRef.current.stop();
+      }
     }
   }, [visible]);
 
@@ -32,9 +37,7 @@ export default (props) => {
       visible={visible}
       onCancel={handleCancel}
     >
-      <video style={{ display: 'block' }} width={width} controls src={url}>
-        您的浏览器不支持 video 。
-      </video>
+      <Hatc width={width} ref={hatcRef} height={height} previewParams={preview} />
     </Modal>
   );
 };

src/components/Hatc/index.jsx

@@ -0,0 +1,61 @@
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  forwardRef,
+  useImperativeHandle,
+} from 'react';
+import { Card } from 'antd';
+import SDK from './sdk';
+
+export default forwardRef((props, ref) => {
+  const id = useMemo(() => `hatc-${Math.random().toString(36).substring(2, 8)}`, []);
+
+  const { previewParams, width, height } = props;
+  const ctrlRef = useRef();
+  const [inited, setInited] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    SDK({ id, width, height }).then((res) => {
+      ctrlRef.current = res;
+      setInited(true);
+      setLoading(false);
+    });
+
+    return () => {
+      if (ctrlRef.current) {
+        ctrlRef.current.destroy();
+      }
+    };
+  }, [id, width, height]);
+
+  useEffect(() => {
+    if (inited) {
+      if (previewParams) {
+        setLoading(true);
+        ctrlRef.current
+          .preview(previewParams)
+          .then(() => {
+            setLoading(false);
+          })
+          .catch((err) => {
+            setLoading(false);
+            console.log('-------err----->', err);
+          });
+      }
+    }
+  }, [inited, previewParams]);
+
+  useImperativeHandle(ref, () => ({
+    stop: () => {
+      if (ctrlRef.current) {
+        ctrlRef.current.stopPreview();
+      }
+    },
+  }));
+
+  return <div id={id} />;
+});

src/components/Hatc/sdk.js

@@ -0,0 +1,111 @@
+/**
+ * https://yz-websit.oss-cn-hangzhou.aliyuncs.com/nanyang/%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8%E5%AA%92%E4%BD%93%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E.pdf
+ * SDK 使用大致说明
+ * 1、npm i web-control
+ * 2、使用 new WebControl 实例化插件
+ * 3、使用 JS_StartService 开启服务
+ * 4、使用 JS_SetWindowControlCallback 注册回调
+ * 5、使用 JS_CreateWnd 创建窗口
+ * 6、使用 JS_DestroyWnd 销毁窗口
+ * 7、使用 JS_Disconnect 断开连接
+ */
+
+/**
+ * SDK
+ */
+export default function SDK({ id, width, height }) {
+  return new Promise((resolve, reject) => {
+    const ctx = {};
+    const ctrl = new WebControl({
+      szPluginContainer: id,
+      iServicePortStart: 14430, // 固定值
+      iServicePortEnd: 14439, // 固定值
+      szClassId: '29DDBC9A-8AEA-4827-9C3A-805D697CF38F', // 固定值
+      cbConnectSuccess: function () {
+        console.log('cbConnectSuccess');
+
+        // ctrl.SetWindowControlCallback({
+        //   cbIntegrationCallBack: callback,
+        // });
+
+        ctrl
+          .JS_StartService('window', {
+            dllPath: './WebPreview.dll',
+          })
+          .then(() => {
+            resolve(ctx);
+          })
+          .catch((err) => {
+            console.error(err);
+            reject(err);
+          });
+      },
+      cbConnectError: function () {
+        console.log('cbConnectError');
+        reject(new Error('cbConnectError'));
+      },
+      cbConnectClose: function (bNormalClose) {
+        console.log('cbConnectClose');
+      },
+    });
+    ctx.ctrl = ctrl;
+
+    // 实时预览
+    function preview(params) {
+      console.log('------preview-------', params);
+      return ctrl.JS_CreateWnd(id, width, height).then(function (resp) {
+        console.log('------JS_CreateWnd-------', resp);
+        return ctrl
+          .JS_RequestInterface({
+            funcName: 'setPreviewLayout',
+            arguments: {
+              devSerialNum: params.devSerialNum,
+              productKey: params.productKey,
+              layout: 1,
+              channels: [{ channel: params.channel, channelName: '前视' }],
+              channelName: '前视',
+              channel: params.channel,
+            },
+          })
+          .then(function (oData) {
+            console.log('------setPreviewLayout-------', oData);
+            return ctrl
+              .JS_RequestInterface({
+                funcName: 'startPreview',
+                arguments: {
+                  url: params.url,
+                  devSerialNum: params.devSerialNum,
+                  productKey: params.productKey,
+                  channel: params.channel,
+                  streamType: params.streamType,
+                  code: params.code,
+                  protocol: params.protocol,
+                },
+              })
+              .then((res) => {
+                console.log('------startPreview-------', res);
+              });
+          });
+      });
+    }
+    ctx.preview = preview;
+
+    // 停止播放
+    function stopPreview() {
+      ctrl.JS_RequestInterface({
+        funcName: 'stopAllPreview',
+        arguments: {},
+      });
+      ctrl.JS_DestroyWnd();
+    }
+    ctx.stopPreview = stopPreview;
+
+    // 销毁
+    function destroy() {
+      // 关闭所有预览
+      stopPreview();
+      ctrl.JS_Disconnect();
+    }
+    ctx.destroy = destroy;
+  });
+}

src/pages/MonitoringScreen/index.jsx

@@ -129,19 +129,21 @@ export default (props) => {
   ]);
 
   useEffect(() => {
-    getWeather('邓州市').then((res) => {
-      if (res && res.length) {
-        const { casts } = res[0];
-        const { dayweather, nighttemp, daytemp } = casts[0];
-        const [min, max] =
-          parseInt(nighttemp) > parseInt(daytemp) ? [daytemp, nighttemp] : [nighttemp, daytemp];
-        setWeather(`${dayweather} ${min}-${max} °C`);
-      } else {
-        setWeather('暂无天气信息');
-      }
-    }).catch((err) => {
-      console.log(err.message)
-    });
+    getWeather('邓州市')
+      .then((res) => {
+        if (res && res.length) {
+          const { casts } = res[0];
+          const { dayweather, nighttemp, daytemp } = casts[0];
+          const [min, max] =
+            parseInt(nighttemp) > parseInt(daytemp) ? [daytemp, nighttemp] : [nighttemp, daytemp];
+          setWeather(`${dayweather} ${min}-${max} °C`);
+        } else {
+          setWeather('暂无天气信息');
+        }
+      })
+      .catch((err) => {
+        console.log(err.message);
+      });
   }, []);
 
   useParticlesJs(Styles['particles-js']);

src/pages/document.ejs

@@ -25,6 +25,7 @@
     <title>Ant Design Pro</title>
     <link rel="icon" href="<%= context.config.publicPath +'favicon.ico'%>" type="image/x-icon" />
     <script src="./js/particles.min.js"></script>
+    <script src="./js/jsWebControl-1.0.0.min.js"></script>
   </head>
   <body>
     <noscript>

src/services/machinery.js

@@ -41,3 +41,10 @@ export const getMachineryDetail = (id) => request(`/machinery/${id}`);
  * @returns
  */
 export const getduty = (id, params) => request(`/machinery/${id}/duty`, { params });
+
+/**
+ * 查询实时预览信息
+ * @param {*} id
+ * @returns
+ */
+export const getPreviewInfo = (id) => request(`/machinery/${id}/preview`);