syber-lowcode-business-materials/lib/components/monitoring-card/Device.js

syber-lowcode-business-materials

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _DeviceHeartCenter = _interopRequireDefault(require("./DeviceHeartCenter"));
var _axios = _interopRequireDefault(require("axios"));
var _moment = _interopRequireDefault(require("moment"));
var _react = _interopRequireWildcard(require("react"));
var _DefaultImgBase = _interopRequireDefault(require("./DefaultImgBase64"));
require("./Device.scss");
var _variables = require("../../variables");
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
var EXIF = require('exif-js');
var NetError = '无网络';

//首页的单个设备
var Device = exports["default"] = /*#__PURE__*/function (_Component) {
  function Device(props) {
    var _props$LocalStorage;
    var _this;
    _this = _Component.call(this, props) || this;
    //心跳的回调
    _this.heartCallback = function (type, data) {
      if (type) {
        var rtcState;
        var activityPc = null;
        var activityPcName = '';
        if (data) {
          if (typeof data === 'string') {
            activityPc = data;
            activityPcName = '别人';
          } else if (typeof data === 'object') {
            // console.log("收到data:",data,this.props.LocalStorage.getId())
            activityPc = data.activityPc;
            activityPcName = data.activityPcName || '';
          }
        }
        if (activityPc) {
          var _this$props$LocalStor;
          if (((_this$props$LocalStor = _this.props.LocalStorage) === null || _this$props$LocalStor === void 0 ? void 0 : _this$props$LocalStor.getId()) === activityPc) {
            rtcState = 1;
            if (activityPcName) {
              activityPcName = activityPcName + '(自己)';
            } else {
              activityPcName = '自己';
            }
          } else {
            rtcState = 2;
          }
        } else {
          rtcState = 0; //可以连接
        }
        //收到心跳马上显示已链接
        if (_this.state.connectState !== 1 || _this.state.rtcState !== rtcState) {
          _this.setState({
            connectState: 1,
            rtcState: rtcState,
            activityPcName: activityPcName
          });
        }
        if (!_this.getImageFromOSS) {
          _this.listenImage();
        }
      } else {
        _this.setState({
          connectState: 2
        });

        //离线的设备，只拿一次
        if (!_this.getLastImgOnce) {
          _this.getLastImgOnce = true;
          _this.getImageFromOssAction();
        }
      }
    };
    _this.source = 'instruct';
    var deviceId = _this.props.deviceMessage._id;
    var deviceSize = _this.props.deviceSize || 'big';
    var diySizeConfig = _this.props.diySizeConfig || null;
    _this.state = {
      deviceId: deviceId,
      deviceMessage: _this.props.deviceMessage,
      //设备详细信息
      imgBase64: '',
      //缩略图base64数据
      imgDataMsg: null,
      //缩略图的基本信息
      imgGetError: null,
      //存储一切有关获取图片数据失败的原因
      compressWidth: diySizeConfig ? diySizeConfig.width : deviceSize === 'big' ? 172 : 86,
      //默认缩略图大小
      compressHeight: diySizeConfig ? diySizeConfig.height : deviceSize === 'big' ? 300 : 150,
      //默认缩略图大小
      connectState: 0,
      //链接状态 0 链接中 1 已链接 2断开连接
      rtcState: 0,
      //没人连接，1自己正在连接，2他人正在连接
      activityPcName: ''
    };
    _this.getImage = false; //用来判断缩略图断开
    _this.getImageInterval = 3000; //1获取缩略图时间

    _this.heartCenter = new _DeviceHeartCenter["default"]({
      TCPManage: props.TCPManage
    });
    _this.imgUrlHost = (_props$LocalStorage = props.LocalStorage) === null || _props$LocalStorage === void 0 ? void 0 : _props$LocalStorage.getWithoutId('rtc_rtshowHost');
    _this.imgUrl = _this.imgUrlHost + "/" + deviceId + ".jpg";
    return _this;
  }
  (0, _inheritsLoose2["default"])(Device, _Component);
  var _proto = Device.prototype;
  _proto.componentDidMount = function componentDidMount() {
    this.startHeart();
  };
  _proto.componentWillUnmount = function componentWillUnmount() {
    this.stopAction();
  };
  _proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps, nextContext) {
    if (nextProps.freezeView && !this.props.freezeView) {
      //停止心跳和获取图片
      // log("停止心跳和获取图片");
      this.stopAction();
    } else if (!nextProps.freezeView && this.props.freezeView) {
      //激活
      // log("激活");
      this.startHeart();
    }
  };
  _proto.stopAction = function stopAction() {
    //移除缩略图监听
    this.getImageFromOSS && clearInterval(this.getImageFromOSS);
    this.getImageFromOSS = null;
    this.heartCenter.removeHeartListen(this.state.deviceId, 'Device', false, this.heartCallback);
  };
  _proto.startHeart = function startHeart() {
    //主窗口，直接调用心跳管理中心
    console.log("开启心跳");
    this.heartCenter.initHeartListen(this.state.deviceId, 'Device', this.heartCallback);
  };
  _proto.listenImage = function listenImage(isReceive) {
    var _this2 = this;
    if (isReceive === void 0) {
      isReceive = true;
    }
    if (isReceive) {
      //需要获取缩略图
      this.getImageFromOSS && clearInterval(this.getImageFromOSS);
      this.props.TCPManage.sendToDevice(this.state.deviceId, 'restartThumbnail', {
        thumbnailTime: this.getImageInterval,
        serverTime: Date.now()
        // quality: 50,
        // scale: 0.5,
      });
      this.getImageFromOssAction();
      this.getImageFromOSS = setInterval(function () {
        _this2.getImageFromOssAction();
      }, this.getImageInterval);
    }
  };
  _proto.arrayBufferToBase64 = function arrayBufferToBase64(buffer) {
    //buffer数组长度超过10万的时候，可能会报错 栈溢出（必要的时候，可以切割数组分开来调用fromCharCode再组装结果）
    var str = String.fromCharCode.apply(String, new Uint8Array(buffer));
    return window.btoa(str);
  }

  //向存储服务器拿缩略图
  ;
  _proto.getImageFromOssAction = function getImageFromOssAction() {
    var _this3 = this;
    if (this.props.freezeView) {
      return;
    }
    (0, _axios["default"])({
      method: 'get',
      url: this.imgUrl + '?temp=' + Math.random(),
      // url: this.imgUrl + "?x-oss-process=image/resize,p_50",
      headers: {
        'Content-Type': 'text/plain'
      },
      responseType: 'arraybuffer'
    }).then(function (_ref) {
      var status = _ref.status,
        data = _ref.data;
      if (status === 200) {
        var imgMsg = EXIF.readFromBinaryFile(data);
        if (imgMsg) {
          _this3.setState({
            imgBase64: _this3.arrayBufferToBase64(data),
            imgDataMsg: imgMsg,
            imgGetError: null
          });
        } else {
          console.error('无法解析出缩略图信息');
          _this3.setState({
            // imgBase64: null,
            // imgDataMsg: null,
            imgGetError: '无法解析出缩略图信息'
          });
        }
      } else {
        console.error(status);
        _this3.setState({
          // imgBase64: null,
          // imgDataMsg: null,
          imgGetError: '缩略图获取失败'
        });
      }
    })["catch"](function (err) {
      // console.error(err);
      var str = err.toString();
      if (str.indexOf('failed with status code 404') !== -1) {
        str = '无缩略图';
      } else if (str.indexOf('Network Error') !== -1) {
        str = NetError;
      }
      _this3.setState({
        // imgBase64: null,
        // imgDataMsg: null,
        imgGetError: str
      });
    });
  };
  _proto.render = function render() {
    var _this4 = this;
    // if (this.state.imgBase64) {
    //     console.log("缩略图大小" + this.state.imgBase64.length / 1024);
    // }
    var _this$props = this.props,
      deviceSize = _this$props.deviceSize,
      noMargin = _this$props.noMargin,
      showExtraContent = _this$props.showExtraContent,
      diySizeConfig = _this$props.diySizeConfig;
    var _this$state = this.state,
      deviceId = _this$state.deviceId,
      compressWidth = _this$state.compressWidth,
      compressHeight = _this$state.compressHeight,
      imgDataMsg = _this$state.imgDataMsg;
    var scale = 0.8;
    if (diySizeConfig) {
      scale = diySizeConfig.scale;
    } else if (deviceSize && deviceSize === 'small') {
      scale = 0.4;
    } else if (deviceSize && deviceSize === 'big') {
      scale = 1;
    }
    var padding = this.props.padding || 20;
    var marginBottom = this.props.marginBottom || 20;
    return /*#__PURE__*/_react["default"].createElement("div", {
      style: imgDataMsg ? {
        marginBottom: marginBottom,
        width: imgDataMsg.ImageWidth * scale + padding,
        order: this.props.order || (imgDataMsg.ImageWidth > imgDataMsg.ImageHeight ? 3 : 2)
      } : {
        width: compressWidth + padding,
        marginBottom: marginBottom,
        order: this.props.order || 5
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: _variables.bizCssPrefix + (this.props.noScaleOnHover ? '-deviceContainerNoHover' : '-deviceContainer'),
      style: imgDataMsg ? {
        width: imgDataMsg.ImageWidth * scale,
        height: imgDataMsg.ImageHeight * scale,
        margin: noMargin ? '0 auto' : 10
      } : {
        width: compressWidth,
        height: compressHeight,
        margin: noMargin ? '0 auto' : 10
      },
      onClick: function onClick() {
        var _this4$props$onClick, _this4$props;
        (_this4$props$onClick = (_this4$props = _this4.props).onClick) === null || _this4$props$onClick === void 0 ? void 0 : _this4$props$onClick.call(_this4$props, _this4.state.deviceId);
      }
    }, this.renderDeviceState(), /*#__PURE__*/_react["default"].createElement("div", {
      style: deviceSize && deviceSize === 'small' ? {
        top: '5px',
        width: '12px',
        height: '2px'
      } : {},
      className: _variables.bizCssPrefix + '-phoneState' + ' ' + (this.state.connectState === 1 ? _variables.bizCssPrefix + '-phoneStateGreen' : _variables.bizCssPrefix + '-phoneStateError')
    })), showExtraContent ? showExtraContent : null);
  };
  _proto.renderDeviceState = function renderDeviceState() {
    var page;
    switch (this.state.rtcState) {
      case 0:
        page = this.renderImg();
        break;
      case 1:
      case 2:
        page = this.renderDefault(this.state.activityPcName + '   控制中');
        break;
      default:
        page = this.renderDefault('未知状态2');
    }
    switch (this.state.connectState) {
      case 0:
        return this.renderDefault('连接中');
      case 1:
        return page;
      case 2:
        // return this.renderDefault("数字人离线");
        return this.renderImg('数字人离线');
      default:
        return this.renderDefault('未知状态1');
    }
  };
  _proto.renderImg = function renderImg(extraMsg) {
    var _this$state2 = this.state,
      imgBase64 = _this$state2.imgBase64,
      imgGetError = _this$state2.imgGetError,
      imgDataMsg = _this$state2.imgDataMsg;
    var timeStr = '';
    var style = {};
    if (imgDataMsg) {
      var time = imgDataMsg.Make;
      var diff = Date.now() - time;
      if (diff > 10000) {
        //大于10秒，紫色
        style.color = this.props.overTimeColor || 'rgba(30, 144, 255, 0.75)';
      }
      if (diff > 60000) {
        timeStr = (0, _moment["default"])(Number(time)).fromNow();
      } else {
        timeStr = Math.ceil(diff / 1000) + ' 秒前';
      }
    }

    //新的逻辑，本次请求图片有错误展示错误信息，但是上一次的图片还是展示
    return imgBase64 ? /*#__PURE__*/_react["default"].createElement("div", {
      style: {
        width: '100%'
      }
    }, /*#__PURE__*/_react["default"].createElement("img", {
      draggable: false,
      src: 'data:image/jpg;base64,' + imgBase64,
      className: _variables.bizCssPrefix + '-defaultDevice'
    }), /*#__PURE__*/_react["default"].createElement("div", {
      className: _variables.bizCssPrefix + '-imgTimeBox',
      style: this.props.timeBoxStyle || {}
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: (0, _extends2["default"])({}, style)
    }, imgGetError || timeStr))) : this.renderDefault(extraMsg || '无画面');
  };
  _proto.renderDefault = function renderDefault(message) {
    if (message === NetError) {
      //历史没请求成功过，特殊处理，展示默认图

      return /*#__PURE__*/_react["default"].createElement("div", {
        style: {
          width: '100%'
        }
      }, /*#__PURE__*/_react["default"].createElement("img", {
        draggable: false,
        src: _DefaultImgBase["default"],
        className: _variables.bizCssPrefix + '-defaultDevice'
      }), /*#__PURE__*/_react["default"].createElement("div", {
        className: _variables.bizCssPrefix + '-imgTimeBox'
      }, /*#__PURE__*/_react["default"].createElement("div", {
        style: (0, _extends2["default"])({}, style)
      }, NetError)));
    }
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: _variables.bizCssPrefix + '-defaultDevice'
    }, /*#__PURE__*/_react["default"].createElement("div", {
      style: this.props.deviceSize === 'small' ? {
        fontSize: '12px'
      } : {}
    }, message));
  };
  return Device;
}(_react.Component);