syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
369 lines (363 loc) • 13.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import DeviceHeartCenter from "./DeviceHeartCenter";
import axios from 'axios';
import moment from 'moment';
import React, { Component, useRef } from 'react';
import DefaultImgBase64 from "./DefaultImgBase64";
import "./Device.scss";
import { bizCssPrefix } from "../../variables";
var EXIF = require('exif-js');
var NetError = '无网络';
//首页的单个设备
var Device = /*#__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({
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;
}
_inheritsLoose(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;
}
axios({
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.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.createElement("div", {
className: 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.createElement("div", {
style: deviceSize && deviceSize === 'small' ? {
top: '5px',
width: '12px',
height: '2px'
} : {},
className: bizCssPrefix + '-phoneState' + ' ' + (this.state.connectState === 1 ? bizCssPrefix + '-phoneStateGreen' : 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 = moment(Number(time)).fromNow();
} else {
timeStr = Math.ceil(diff / 1000) + ' 秒前';
}
}
//新的逻辑，本次请求图片有错误展示错误信息，但是上一次的图片还是展示
return imgBase64 ? /*#__PURE__*/React.createElement("div", {
style: {
width: '100%'
}
}, /*#__PURE__*/React.createElement("img", {
draggable: false,
src: 'data:image/jpg;base64,' + imgBase64,
className: bizCssPrefix + '-defaultDevice'
}), /*#__PURE__*/React.createElement("div", {
className: bizCssPrefix + '-imgTimeBox',
style: this.props.timeBoxStyle || {}
}, /*#__PURE__*/React.createElement("div", {
style: _extends({}, style)
}, imgGetError || timeStr))) : this.renderDefault(extraMsg || '无画面');
};
_proto.renderDefault = function renderDefault(message) {
if (message === NetError) {
//历史没请求成功过，特殊处理，展示默认图
return /*#__PURE__*/React.createElement("div", {
style: {
width: '100%'
}
}, /*#__PURE__*/React.createElement("img", {
draggable: false,
src: DefaultImgBase64,
className: bizCssPrefix + '-defaultDevice'
}), /*#__PURE__*/React.createElement("div", {
className: bizCssPrefix + '-imgTimeBox'
}, /*#__PURE__*/React.createElement("div", {
style: _extends({}, style)
}, NetError)));
}
return /*#__PURE__*/React.createElement("div", {
className: bizCssPrefix + '-defaultDevice'
}, /*#__PURE__*/React.createElement("div", {
style: this.props.deviceSize === 'small' ? {
fontSize: '12px'
} : {}
}, message));
};
return Device;
}(Component);
export { Device as default };