syber-lowcode-business-materials
Version:
syber-lowcode-business-materials
365 lines (362 loc) • 23.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = EquipmentItem;
var _row = _interopRequireDefault(require("antd/lib/row"));
var _switch = _interopRequireDefault(require("antd/lib/switch"));
var _avatar = _interopRequireDefault(require("antd/lib/avatar"));
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _col = _interopRequireDefault(require("antd/lib/col"));
var _popover = _interopRequireDefault(require("antd/lib/popover"));
var _button = _interopRequireDefault(require("antd/lib/button"));
var _message2 = _interopRequireDefault(require("antd/lib/message"));
var _react = require("react");
var _stylesModule = _interopRequireDefault(require("./styles.module.scss"));
var _icons = require("@ant-design/icons");
var statusConfig = {
1: {
title: '缺勤',
value: 1,
color: '#FFA057',
bgColor: 'rgba(251,106,0,0.15)'
},
2: {
title: '空闲',
value: 2,
color: 'rgba(70,254,165,0.83)',
bgColor: 'rgb(227, 255, 241)'
},
3: {
title: '忙碌',
value: 3,
color: '#9EB1FF',
bgColor: 'rgba(47,98,255,0.24)'
},
4: {
title: '停工',
value: 4,
color: '#FF92AD',
bgColor: 'rgba(254,42,139,0.16)'
}
};
var mediaState = {
成功: '#2FD34C',
登录中: '#FF8230',
注册中: '#FF8230',
验证: '#FF8230 ',
未登录: 'rgb(220, 224, 230)',
失败: 'rgb(220, 224, 230)',
封号: 'red',
排队中: '#FF8230'
};
// 未登录/登录中/成功/封号/验证/失败
var mockMediaMap = [{
type: 'Youtube',
value: 2,
icon: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/space/youtube.svg'
}, {
type: 'Twitter',
value: 4,
icon: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/space/twitter.svg'
}, {
type: 'Facebook',
value: 3,
icon: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/space/facebook.svg'
}, {
type: 'Instagram',
value: 2,
icon: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/space/ins.svg'
}, {
type: 'Tiktok',
value: 2,
icon: 'https://cyber-resource-hz.oss-cn-hangzhou.aliyuncs.com/space/tiktok.svg'
}];
var getTime = function getTime(currentTimestamp) {
var now = Date.now(); // 获取当前时间的时间戳（毫秒）
var difference = now - currentTimestamp; // 计算差值（毫秒）
var minutes = Math.floor(difference / 60000); // 转换为分钟
if (minutes < 1) return '刚刚';
var hours = Math.floor(minutes / 60);
if (hours < 1) return minutes + " \u5206\u949F";
var days = Math.floor(hours / 24);
if (days < 1) return hours + " \u5C0F\u65F6";
var weeks = Math.floor(days / 7);
if (weeks < 1) return days + " \u5929";
var months = Math.floor(weeks / 4.345); // 粗略估计一个月有4.345周
if (months < 1) return weeks + " \u5468";
var years = Math.floor(months / 12);
if (years < 1) return months + " \u6708";
return years + " \u5E74";
};
var globalButtonStyle = {
color: '#5E3EDD',
borderColor: '#5E3EDD'
};
function EquipmentItem(props) {
var _props$checkedList, _props$equipmentData, _props$equipmentData2, _props$equipmentData3, _props$equipmentData4, _props$equipmentData5, _props$equipmentData6, _props$equipmentData7, _props$equipmentData8, _props$equipmentData9, _props$equipmentData10, _statusConfig$props$e, _props$equipmentData11, _props$equipmentData12, _statusConfig$props$e2, _props$equipmentData13, _props$equipmentData14, _statusConfig$props$e3, _props$equipmentData15, _props$equipmentData16, _statusConfig$props$e4, _props$equipmentData17, _props$equipmentData18, _props$equipmentData19, _props$equipmentData20, _props$equipmentData21, _props$equipmentData22, _props$equipmentData23, _props$equipmentData24, _props$equipmentData25, _props$equipmentData26, _props$equipmentData27, _props$equipmentData28, _props$equipmentData29, _props$equipmentData30;
var copyText = function copyText(str) {
var oInput = document.createElement('textarea');
oInput.value = str;
document.body.appendChild(oInput);
oInput.select();
document.execCommand('Copy');
oInput.style.display = 'none';
document.body.removeChild(oInput);
if (str && str.length > 100) {
str = str.substring(0, 100);
}
_message2["default"].success(/*#__PURE__*/React.createElement("div", {
style: {
whiteSpace: 'pre-wrap',
textAlign: 'left'
}
}, /*#__PURE__*/React.createElement("div", null, '复制成功:'), /*#__PURE__*/React.createElement("div", null, str)));
};
function calculateAge(time) {
var birthDate = new Date(time);
var now = new Date();
var age = now.getFullYear() - birthDate.getFullYear();
var monthDiff = now.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || monthDiff === 0 && now.getDate() < birthDate.getDate()) {
age--;
}
return age;
}
return /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].equipmentItem,
style: {
'--borderColor': props !== null && props !== void 0 && (_props$checkedList = props.checkedList) !== null && _props$checkedList !== void 0 && _props$checkedList.includes(props === null || props === void 0 ? void 0 : (_props$equipmentData = props.equipmentData) === null || _props$equipmentData === void 0 ? void 0 : _props$equipmentData._id) && props !== null && props !== void 0 && props.isCheckbox ? '#5E3EDD' : '#ebebeb'
},
onClick: function onClick(e) {
e.stopPropagation();
if (props !== null && props !== void 0 && props.isCheckbox) {
props === null || props === void 0 ? void 0 : props.onCheckboxChange(e, props === null || props === void 0 ? void 0 : props.equipmentData);
}
}
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].equipmentMessage
}, /*#__PURE__*/React.createElement("img", {
src: props === null || props === void 0 ? void 0 : (_props$equipmentData2 = props.equipmentData) === null || _props$equipmentData2 === void 0 ? void 0 : _props$equipmentData2.avatar,
alt: props === null || props === void 0 ? void 0 : (_props$equipmentData3 = props.equipmentData) === null || _props$equipmentData3 === void 0 ? void 0 : _props$equipmentData3.shard,
onClick: function onClick(e) {
e.stopPropagation();
(props === null || props === void 0 ? void 0 : props.onGoToPage) && props.onGoToPage(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData
});
}
}), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].messageRight
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].name
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].nameText
}, ((props === null || props === void 0 ? void 0 : (_props$equipmentData4 = props.equipmentData) === null || _props$equipmentData4 === void 0 ? void 0 : (_props$equipmentData5 = _props$equipmentData4.characterSettings) === null || _props$equipmentData5 === void 0 ? void 0 : (_props$equipmentData6 = _props$equipmentData5[1]) === null || _props$equipmentData6 === void 0 ? void 0 : _props$equipmentData6.name) || (props === null || props === void 0 ? void 0 : (_props$equipmentData7 = props.equipmentData) === null || _props$equipmentData7 === void 0 ? void 0 : (_props$equipmentData8 = _props$equipmentData7.characterSettings) === null || _props$equipmentData8 === void 0 ? void 0 : (_props$equipmentData9 = _props$equipmentData8[0]) === null || _props$equipmentData9 === void 0 ? void 0 : _props$equipmentData9.name)) + " (" + (props === null || props === void 0 ? void 0 : (_props$equipmentData10 = props.equipmentData) === null || _props$equipmentData10 === void 0 ? void 0 : _props$equipmentData10.shard) + ")"), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].tag,
style: {
background: (_statusConfig$props$e = statusConfig[props === null || props === void 0 ? void 0 : (_props$equipmentData11 = props.equipmentData) === null || _props$equipmentData11 === void 0 ? void 0 : (_props$equipmentData12 = _props$equipmentData11.device) === null || _props$equipmentData12 === void 0 ? void 0 : _props$equipmentData12.status]) === null || _statusConfig$props$e === void 0 ? void 0 : _statusConfig$props$e.bgColor
}
}, /*#__PURE__*/React.createElement(_icons.UserOutlined, {
style: {
color: (_statusConfig$props$e2 = statusConfig[props === null || props === void 0 ? void 0 : (_props$equipmentData13 = props.equipmentData) === null || _props$equipmentData13 === void 0 ? void 0 : (_props$equipmentData14 = _props$equipmentData13.device) === null || _props$equipmentData14 === void 0 ? void 0 : _props$equipmentData14.status]) === null || _statusConfig$props$e2 === void 0 ? void 0 : _statusConfig$props$e2.color
}
}), /*#__PURE__*/React.createElement("span", {
style: {
color: (_statusConfig$props$e3 = statusConfig[props === null || props === void 0 ? void 0 : (_props$equipmentData15 = props.equipmentData) === null || _props$equipmentData15 === void 0 ? void 0 : (_props$equipmentData16 = _props$equipmentData15.device) === null || _props$equipmentData16 === void 0 ? void 0 : _props$equipmentData16.status]) === null || _statusConfig$props$e3 === void 0 ? void 0 : _statusConfig$props$e3.color,
marginLeft: 4
}
}, (_statusConfig$props$e4 = statusConfig[props === null || props === void 0 ? void 0 : (_props$equipmentData17 = props.equipmentData) === null || _props$equipmentData17 === void 0 ? void 0 : (_props$equipmentData18 = _props$equipmentData17.device) === null || _props$equipmentData18 === void 0 ? void 0 : _props$equipmentData18.status]) === null || _statusConfig$props$e4 === void 0 ? void 0 : _statusConfig$props$e4.title))), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].robotMessageRow
}, (props === null || props === void 0 ? void 0 : (_props$equipmentData19 = props.equipmentData) === null || _props$equipmentData19 === void 0 ? void 0 : (_props$equipmentData20 = _props$equipmentData19.characterSettings) === null || _props$equipmentData20 === void 0 ? void 0 : (_props$equipmentData21 = _props$equipmentData20[0]) === null || _props$equipmentData21 === void 0 ? void 0 : _props$equipmentData21.gender) || '女', " \uFF5C ", (props === null || props === void 0 ? void 0 : (_props$equipmentData22 = props.equipmentData) === null || _props$equipmentData22 === void 0 ? void 0 : (_props$equipmentData23 = _props$equipmentData22.characterSettings) === null || _props$equipmentData23 === void 0 ? void 0 : (_props$equipmentData24 = _props$equipmentData23[0]) === null || _props$equipmentData24 === void 0 ? void 0 : _props$equipmentData24.age) || calculateAge(props === null || props === void 0 ? void 0 : (_props$equipmentData25 = props.equipmentData) === null || _props$equipmentData25 === void 0 ? void 0 : (_props$equipmentData26 = _props$equipmentData25.characterSettings) === null || _props$equipmentData26 === void 0 ? void 0 : (_props$equipmentData27 = _props$equipmentData26[0]) === null || _props$equipmentData27 === void 0 ? void 0 : _props$equipmentData27.birthday), "\u5C81 ", (props === null || props === void 0 ? void 0 : (_props$equipmentData28 = props.equipmentData) === null || _props$equipmentData28 === void 0 ? void 0 : _props$equipmentData28.deviceType) > 0 && '｜'), props !== null && props !== void 0 && (_props$equipmentData29 = props.equipmentData) !== null && _props$equipmentData29 !== void 0 && _props$equipmentData29.deviceId ? /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].copyText
}, /*#__PURE__*/React.createElement("span", {
className: _stylesModule["default"].ellipsis
}, "\u8BBE\u5907\u7F16\u53F7\uFF1A", props === null || props === void 0 ? void 0 : (_props$equipmentData30 = props.equipmentData) === null || _props$equipmentData30 === void 0 ? void 0 : _props$equipmentData30._id), /*#__PURE__*/React.createElement(_icons.CopyOutlined, {
className: _stylesModule["default"].copyIcon,
onClick: function onClick(e) {
var _props$equipmentData31;
e.stopPropagation();
if (props !== null && props !== void 0 && (_props$equipmentData31 = props.equipmentData) !== null && _props$equipmentData31 !== void 0 && _props$equipmentData31._id) {
var _props$equipmentData32;
copyText(props === null || props === void 0 ? void 0 : (_props$equipmentData32 = props.equipmentData) === null || _props$equipmentData32 === void 0 ? void 0 : _props$equipmentData32._id);
}
}
})) : '-'), /*#__PURE__*/React.createElement(_button["default"], {
type: "primary",
size: "middle",
onClick: function onClick(e) {
e.stopPropagation();
props === null || props === void 0 ? void 0 : props.onLongRange(e, props === null || props === void 0 ? void 0 : props.equipmentData);
},
style: {
padding: '0 26px',
borderRadius: '4px'
}
}, "\u8FDC\u7A0B")), mockMediaMap === null || mockMediaMap === void 0 ? void 0 : mockMediaMap.map(function (item, index) {
var _props$equipmentData33, _props$equipmentData34, _props$equipmentData35, _mediaData$extend, _mediaData$extend2, _mediaData$extend3, _mediaData$extend4, _mediaData$extend5, _mediaData$extend6, _mediaData$extend7, _mediaData$extend8, _mediaData$extend9, _mediaData$extend10, _mediaData$extend11, _mediaData$extend12, _mediaData$extend13;
var mediaData = props === null || props === void 0 ? void 0 : (_props$equipmentData33 = props.equipmentData) === null || _props$equipmentData33 === void 0 ? void 0 : (_props$equipmentData34 = _props$equipmentData33.socials) === null || _props$equipmentData34 === void 0 ? void 0 : (_props$equipmentData35 = _props$equipmentData34.filter(function (i) {
return i.type === item.type;
})) === null || _props$equipmentData35 === void 0 ? void 0 : _props$equipmentData35[0];
var state = (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend = mediaData.extend) === null || _mediaData$extend === void 0 ? void 0 : _mediaData$extend.stateLogin) || (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend2 = mediaData.extend) === null || _mediaData$extend2 === void 0 ? void 0 : _mediaData$extend2.stateLRegister) || '未登录'; //账号状态
var tipsType = mediaData !== null && mediaData !== void 0 && (_mediaData$extend3 = mediaData.extend) !== null && _mediaData$extend3 !== void 0 && _mediaData$extend3.stateLogin ? 'descLogin' : mediaData !== null && mediaData !== void 0 && (_mediaData$extend4 = mediaData.extend) !== null && _mediaData$extend4 !== void 0 && _mediaData$extend4.stateLRegister ? 'descRegister' : '';
return /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].mediaWrap,
key: index
}, /*#__PURE__*/React.createElement(_row["default"], {
style: {
display: 'flex',
alignItems: 'center',
height: '35px'
}
}, /*#__PURE__*/React.createElement(_col["default"], {
className: "gutter-row",
span: 5
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].mediaItem,
style: {
'--color': mediaState[state]
}
}, /*#__PURE__*/React.createElement("img", {
src: item.icon,
alt: "",
width: 16,
height: 16
}), /*#__PURE__*/React.createElement("span", {
style: {
'--color': mediaState[state]
},
className: _stylesModule["default"].mediaState
}), /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].mediaDate
}, (mediaData === null || mediaData === void 0 ? void 0 : mediaData.extend) && (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend5 = mediaData.extend) === null || _mediaData$extend5 === void 0 ? void 0 : _mediaData$extend5.updateTimeLogin) && typeof (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend6 = mediaData.extend) === null || _mediaData$extend6 === void 0 ? void 0 : _mediaData$extend6.updateTimeLogin) === 'number' && getTime(mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend7 = mediaData.extend) === null || _mediaData$extend7 === void 0 ? void 0 : _mediaData$extend7.updateTimeLogin) + " (" + state + ")", (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend8 = mediaData.extend) === null || _mediaData$extend8 === void 0 ? void 0 : _mediaData$extend8[tipsType]) && state !== '成功' && /*#__PURE__*/React.createElement(_popover["default"], {
placement: "top",
content: /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, mediaData === null || mediaData === void 0 ? void 0 : mediaData.extend[tipsType]))
}, /*#__PURE__*/React.createElement(_icons.QuestionCircleOutlined, null)), (state === '失败' || state === '未登录') && (mediaData === null || mediaData === void 0 ? void 0 : mediaData.account) && (mediaData === null || mediaData === void 0 ? void 0 : mediaData.password) && /*#__PURE__*/React.createElement(_icons.RedoOutlined, {
onClick: function onClick(e) {
e.stopPropagation();
(props === null || props === void 0 ? void 0 : props.onAutoLogin) && props.onAutoLogin(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: mediaData
});
}
})))), /*#__PURE__*/React.createElement(_col["default"], {
className: "gutter-row",
span: 8
}, mediaData !== null && mediaData !== void 0 && mediaData.account && state !== '未登录' ? /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].account
}, "\u8D26\u53F7\uFF1A", /*#__PURE__*/React.createElement("span", {
className: _stylesModule["default"].accountName,
style: {
margin: '0',
color: '#1890ff',
maxWidth: 'calc(100% - 60px)',
cursor: 'pointer'
},
onClick: function onClick(e) {
e.stopPropagation();
if (mediaData.extend.userLink) {
window.open(mediaData.extend.userLink);
}
}
}, mediaData === null || mediaData === void 0 ? void 0 : mediaData.account), /*#__PURE__*/React.createElement(_icons.LinkOutlined, {
onClick: function onClick(e) {
e.stopPropagation();
if (mediaData.extend.userLink) {
window.open(mediaData.extend.userLink);
}
}
})) : /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], {
size: 'small',
style: (0, _extends2["default"])({
marginRight: '12px',
borderRadius: '6px'
}, globalButtonStyle),
onClick: function onClick(e) {
e.stopPropagation();
props === null || props === void 0 ? void 0 : props.onSignIn(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: item
});
},
icon: /*#__PURE__*/React.createElement(_icons.UserAddOutlined, null)
}, "\u6CE8\u518C"), /*#__PURE__*/React.createElement(_button["default"], {
style: (0, _extends2["default"])({
borderRadius: '6px'
}, globalButtonStyle),
size: 'small',
onClick: function onClick(e) {
e.stopPropagation();
props === null || props === void 0 ? void 0 : props.onLogin(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: item
});
},
icon: /*#__PURE__*/React.createElement(_icons.UserOutlined, null)
}, "\u767B\u5F55"))), /*#__PURE__*/React.createElement(_col["default"], {
className: "gutter-row",
span: 4
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].account
}, (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend9 = mediaData.extend) === null || _mediaData$extend9 === void 0 ? void 0 : _mediaData$extend9.userAvatar) && /*#__PURE__*/React.createElement(_avatar["default"], {
style: {
marginRight: '4px'
},
icon: /*#__PURE__*/React.createElement("img", {
src: mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend10 = mediaData.extend) === null || _mediaData$extend10 === void 0 ? void 0 : _mediaData$extend10.userAvatar
})
}), (mediaData === null || mediaData === void 0 ? void 0 : mediaData.accountId) && /*#__PURE__*/React.createElement("span", {
className: _stylesModule["default"].accountName
}, mediaData === null || mediaData === void 0 ? void 0 : mediaData.accountId))), /*#__PURE__*/React.createElement(_col["default"], {
className: "gutter-row",
span: 4
}, /*#__PURE__*/React.createElement("div", {
className: _stylesModule["default"].raising,
onClick: function onClick(e) {
e.stopPropagation();
}
}, "\u517B\u53F7", /*#__PURE__*/React.createElement(_switch["default"], {
size: "small",
checked: (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend11 = mediaData.extend) === null || _mediaData$extend11 === void 0 ? void 0 : _mediaData$extend11.stateLActivity) === '养号中',
loading: mediaData === null || mediaData === void 0 ? void 0 : mediaData.loading,
onChange: function onChange(checked) {
props === null || props === void 0 ? void 0 : props.onChecked(event, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: mediaData,
checked: checked
});
},
disabled: !(state === '成功')
}), (mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend12 = mediaData.extend) === null || _mediaData$extend12 === void 0 ? void 0 : _mediaData$extend12.updateTimeActivity) && "" + getTime(mediaData === null || mediaData === void 0 ? void 0 : (_mediaData$extend13 = mediaData.extend) === null || _mediaData$extend13 === void 0 ? void 0 : _mediaData$extend13.updateTimeActivity))), /*#__PURE__*/React.createElement(_col["default"], {
className: "gutter-row",
span: 3
}, (mediaData === null || mediaData === void 0 ? void 0 : mediaData.account) && (mediaData === null || mediaData === void 0 ? void 0 : mediaData.password) && state !== '未登录' && /*#__PURE__*/React.createElement(_react.Fragment, null, /*#__PURE__*/React.createElement(_button["default"], {
size: 'small',
style: (0, _extends2["default"])({
marginRight: '4px',
borderRadius: '6px'
}, globalButtonStyle),
onClick: function onClick(e) {
e.stopPropagation();
props === null || props === void 0 ? void 0 : props.onPublish(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: item
});
},
disabled: !(state === '成功')
}, "\u53D1\u5E03"), /*#__PURE__*/React.createElement(_popover["default"], {
content: /*#__PURE__*/React.createElement(_button["default"], {
size: 'small',
style: (0, _extends2["default"])({
borderRadius: '6px'
}, globalButtonStyle),
onClick: function onClick(e) {
e.stopPropagation();
props === null || props === void 0 ? void 0 : props.onLogOut(e, {
equipmentData: props === null || props === void 0 ? void 0 : props.equipmentData,
mediaData: item
});
}
}, "\u9000\u51FA\u767B\u5F55"),
placement: "bottomLeft"
}, /*#__PURE__*/React.createElement(_icons.EllipsisOutlined, null))))));
}));
}