Initial commit: 大陆架零部件智能生产线数字孪生系统
- 实现TV1和TV2双大屏展示 - 集成ECharts数据可视化 - 实现实时数据刷新机制 - 添加刀具寿命管理模块 - 添加工单加工时长统计模块 - 添加加工中心7日工作时长统计模块 - 添加OEE分析、设备状态监控等功能 - 创建技术文档和使用说明书
This commit is contained in:
DaLuJia Developer
535
src/components/DMT/js/three-spritetext.module.js
Normal file
535
src/components/DMT/js/three-spritetext.module.js
Normal file
@@ -0,0 +1,535 @@
|
||||
import { LinearFilter, Sprite, SpriteMaterial, Texture } from 'three'
|
||||
|
||||
function _classCallCheck(instance, Constructor) {
|
||||
if (!(instance instanceof Constructor)) {
|
||||
throw new TypeError('Cannot call a class as a function')
|
||||
}
|
||||
}
|
||||
|
||||
function _defineProperties(target, props) {
|
||||
for (var i = 0; i < props.length; i++) {
|
||||
var descriptor = props[i]
|
||||
descriptor.enumerable = descriptor.enumerable || false
|
||||
descriptor.configurable = true
|
||||
if ('value' in descriptor) descriptor.writable = true
|
||||
Object.defineProperty(target, descriptor.key, descriptor)
|
||||
}
|
||||
}
|
||||
|
||||
function _createClass(Constructor, protoProps, staticProps) {
|
||||
if (protoProps) _defineProperties(Constructor.prototype, protoProps)
|
||||
if (staticProps) _defineProperties(Constructor, staticProps)
|
||||
Object.defineProperty(Constructor, 'prototype', {
|
||||
writable: false
|
||||
})
|
||||
return Constructor
|
||||
}
|
||||
|
||||
function _inherits(subClass, superClass) {
|
||||
if (typeof superClass !== 'function' && superClass !== null) {
|
||||
throw new TypeError('Super expression must either be null or a function')
|
||||
}
|
||||
|
||||
subClass.prototype = Object.create(superClass && superClass.prototype, {
|
||||
constructor: {
|
||||
value: subClass,
|
||||
writable: true,
|
||||
configurable: true
|
||||
}
|
||||
})
|
||||
Object.defineProperty(subClass, 'prototype', {
|
||||
writable: false
|
||||
})
|
||||
if (superClass) _setPrototypeOf(subClass, superClass)
|
||||
}
|
||||
|
||||
function _getPrototypeOf(o) {
|
||||
_getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
|
||||
return o.__proto__ || Object.getPrototypeOf(o)
|
||||
}
|
||||
return _getPrototypeOf(o)
|
||||
}
|
||||
|
||||
function _setPrototypeOf(o, p) {
|
||||
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
||||
o.__proto__ = p
|
||||
return o
|
||||
}
|
||||
|
||||
return _setPrototypeOf(o, p)
|
||||
}
|
||||
|
||||
function _isNativeReflectConstruct() {
|
||||
if (typeof Reflect === 'undefined' || !Reflect.construct) return false
|
||||
if (Reflect.construct.sham) return false
|
||||
if (typeof Proxy === 'function') return true
|
||||
|
||||
try {
|
||||
Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function() {}))
|
||||
return true
|
||||
} catch (e) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
function _assertThisInitialized(self) {
|
||||
if (self === void 0) {
|
||||
throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
|
||||
}
|
||||
|
||||
return self
|
||||
}
|
||||
|
||||
function _possibleConstructorReturn(self, call) {
|
||||
if (call && (typeof call === 'object' || typeof call === 'function')) {
|
||||
return call
|
||||
} else if (call !== void 0) {
|
||||
throw new TypeError('Derived constructors may only return object or undefined')
|
||||
}
|
||||
|
||||
return _assertThisInitialized(self)
|
||||
}
|
||||
|
||||
function _createSuper(Derived) {
|
||||
var hasNativeReflectConstruct = _isNativeReflectConstruct()
|
||||
|
||||
return function _createSuperInternal() {
|
||||
var Super = _getPrototypeOf(Derived)
|
||||
var result
|
||||
|
||||
if (hasNativeReflectConstruct) {
|
||||
var NewTarget = _getPrototypeOf(this).constructor
|
||||
|
||||
result = Reflect.construct(Super, arguments, NewTarget)
|
||||
} else {
|
||||
result = Super.apply(this, arguments)
|
||||
}
|
||||
|
||||
return _possibleConstructorReturn(this, result)
|
||||
}
|
||||
}
|
||||
|
||||
function _slicedToArray(arr, i) {
|
||||
return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest()
|
||||
}
|
||||
|
||||
function _toConsumableArray(arr) {
|
||||
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread()
|
||||
}
|
||||
|
||||
function _arrayWithoutHoles(arr) {
|
||||
if (Array.isArray(arr)) return _arrayLikeToArray(arr)
|
||||
}
|
||||
|
||||
function _arrayWithHoles(arr) {
|
||||
if (Array.isArray(arr)) return arr
|
||||
}
|
||||
|
||||
function _iterableToArray(iter) {
|
||||
if (typeof Symbol !== 'undefined' && iter[Symbol.iterator] != null || iter['@@iterator'] != null) return Array.from(iter)
|
||||
}
|
||||
|
||||
function _iterableToArrayLimit(arr, i) {
|
||||
var _i = arr == null ? null : typeof Symbol !== 'undefined' && arr[Symbol.iterator] || arr['@@iterator']
|
||||
|
||||
if (_i == null) return
|
||||
var _arr = []
|
||||
var _n = true
|
||||
var _d = false
|
||||
|
||||
var _s, _e
|
||||
|
||||
try {
|
||||
for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) {
|
||||
_arr.push(_s.value)
|
||||
|
||||
if (i && _arr.length === i) break
|
||||
}
|
||||
} catch (err) {
|
||||
_d = true
|
||||
_e = err
|
||||
} finally {
|
||||
try {
|
||||
if (!_n && _i['return'] != null) _i['return']()
|
||||
} finally {
|
||||
if (_d) throw _e
|
||||
}
|
||||
}
|
||||
|
||||
return _arr
|
||||
}
|
||||
|
||||
function _unsupportedIterableToArray(o, minLen) {
|
||||
if (!o) return
|
||||
if (typeof o === 'string') return _arrayLikeToArray(o, minLen)
|
||||
var n = Object.prototype.toString.call(o).slice(8, -1)
|
||||
if (n === 'Object' && o.constructor) n = o.constructor.name
|
||||
if (n === 'Map' || n === 'Set') return Array.from(o)
|
||||
if (n === 'Arguments' || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen)
|
||||
}
|
||||
|
||||
function _arrayLikeToArray(arr, len) {
|
||||
if (len == null || len > arr.length) len = arr.length
|
||||
|
||||
for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]
|
||||
|
||||
return arr2
|
||||
}
|
||||
|
||||
function _nonIterableSpread() {
|
||||
throw new TypeError('Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.')
|
||||
}
|
||||
|
||||
function _nonIterableRest() {
|
||||
throw new TypeError('Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.')
|
||||
}
|
||||
|
||||
var three = typeof window !== 'undefined' && window.THREE ? window.THREE // Prefer consumption from global THREE, if exists
|
||||
: {
|
||||
LinearFilter: LinearFilter,
|
||||
Sprite: Sprite,
|
||||
SpriteMaterial: SpriteMaterial,
|
||||
Texture: Texture
|
||||
}
|
||||
|
||||
var _default = /* #__PURE__*/(function(_three$Sprite) {
|
||||
_inherits(_default, _three$Sprite)
|
||||
|
||||
var _super = _createSuper(_default)
|
||||
|
||||
function _default() {
|
||||
var _this
|
||||
|
||||
var text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : ''
|
||||
var textHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 10
|
||||
var color = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'rgba(255, 255, 255, 1)'
|
||||
|
||||
_classCallCheck(this, _default)
|
||||
|
||||
_this = _super.call(this, new three.SpriteMaterial())
|
||||
_this._text = ''.concat(text)
|
||||
_this._textHeight = textHeight
|
||||
_this._color = color
|
||||
_this._backgroundColor = false // no background color
|
||||
|
||||
_this._padding = 0
|
||||
_this._borderWidth = 0
|
||||
_this._borderRadius = 0
|
||||
_this._borderColor = 'white'
|
||||
_this._strokeWidth = 0
|
||||
_this._strokeColor = 'white'
|
||||
_this._fontFace = 'Arial'
|
||||
_this._fontSize = 90 // defines text resolution
|
||||
|
||||
_this._fontWeight = 'normal'
|
||||
_this._canvas = document.createElement('canvas')
|
||||
_this.material.depthTest = false
|
||||
_this._genCanvas()
|
||||
|
||||
return _this
|
||||
}
|
||||
|
||||
_createClass(_default, [{
|
||||
key: 'text',
|
||||
get: function get() {
|
||||
return this._text
|
||||
},
|
||||
set: function set(text) {
|
||||
this._text = text
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'textHeight',
|
||||
get: function get() {
|
||||
return this._textHeight
|
||||
},
|
||||
set: function set(textHeight) {
|
||||
this._textHeight = textHeight
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'color',
|
||||
get: function get() {
|
||||
return this._color
|
||||
},
|
||||
set: function set(color) {
|
||||
this._color = color
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'backgroundColor',
|
||||
get: function get() {
|
||||
return this._backgroundColor
|
||||
},
|
||||
set: function set(color) {
|
||||
this._backgroundColor = color
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'padding',
|
||||
get: function get() {
|
||||
return this._padding
|
||||
},
|
||||
set: function set(padding) {
|
||||
this._padding = padding
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'borderWidth',
|
||||
get: function get() {
|
||||
return this._borderWidth
|
||||
},
|
||||
set: function set(borderWidth) {
|
||||
this._borderWidth = borderWidth
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'borderRadius',
|
||||
get: function get() {
|
||||
return this._borderRadius
|
||||
},
|
||||
set: function set(borderRadius) {
|
||||
this._borderRadius = borderRadius
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'borderColor',
|
||||
get: function get() {
|
||||
return this._borderColor
|
||||
},
|
||||
set: function set(borderColor) {
|
||||
this._borderColor = borderColor
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'fontFace',
|
||||
get: function get() {
|
||||
return this._fontFace
|
||||
},
|
||||
set: function set(fontFace) {
|
||||
this._fontFace = fontFace
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'fontSize',
|
||||
get: function get() {
|
||||
return this._fontSize
|
||||
},
|
||||
set: function set(fontSize) {
|
||||
this._fontSize = fontSize
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'fontWeight',
|
||||
get: function get() {
|
||||
return this._fontWeight
|
||||
},
|
||||
set: function set(fontWeight) {
|
||||
this._fontWeight = fontWeight
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'strokeWidth',
|
||||
get: function get() {
|
||||
return this._strokeWidth
|
||||
},
|
||||
set: function set(strokeWidth) {
|
||||
this._strokeWidth = strokeWidth
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: 'strokeColor',
|
||||
get: function get() {
|
||||
return this._strokeColor
|
||||
},
|
||||
set: function set(strokeColor) {
|
||||
this._strokeColor = strokeColor
|
||||
|
||||
this._genCanvas()
|
||||
}
|
||||
}, {
|
||||
key: '_genCanvas',
|
||||
value: function _genCanvas() {
|
||||
var _this2 = this
|
||||
|
||||
var canvas = this._canvas
|
||||
var ctx = canvas.getContext('2d')
|
||||
var border = Array.isArray(this.borderWidth) ? this.borderWidth : [this.borderWidth, this.borderWidth] // x,y border
|
||||
|
||||
var relBorder = border.map(function(b) {
|
||||
return b * _this2.fontSize * 0.1
|
||||
}) // border in canvas units
|
||||
|
||||
var borderRadius = Array.isArray(this.borderRadius) ? this.borderRadius : [this.borderRadius, this.borderRadius, this.borderRadius, this.borderRadius] // tl tr br bl corners
|
||||
|
||||
var relBorderRadius = borderRadius.map(function(b) {
|
||||
return b * _this2.fontSize * 0.1
|
||||
}) // border radius in canvas units
|
||||
|
||||
var padding = Array.isArray(this.padding) ? this.padding : [this.padding, this.padding] // x,y padding
|
||||
|
||||
var relPadding = padding.map(function(p) {
|
||||
return p * _this2.fontSize * 0.1
|
||||
}) // padding in canvas units
|
||||
|
||||
var lines = this.text.split('\n')
|
||||
var font = ''.concat(this.fontWeight, ' ').concat(this.fontSize, 'px ').concat(this.fontFace)
|
||||
ctx.font = font // measure canvas with appropriate font
|
||||
|
||||
var innerWidth = Math.max.apply(Math, _toConsumableArray(lines.map(function(line) {
|
||||
return ctx.measureText(line).width
|
||||
})))
|
||||
var innerHeight = this.fontSize * lines.length
|
||||
canvas.width = innerWidth + relBorder[0] * 2 + relPadding[0] * 2
|
||||
canvas.height = innerHeight + relBorder[1] * 2 + relPadding[1] * 2 // paint border
|
||||
|
||||
if (this.borderWidth) {
|
||||
ctx.strokeStyle = this.borderColor
|
||||
|
||||
if (relBorder[0]) {
|
||||
// left + right borders
|
||||
var hb = relBorder[0] / 2
|
||||
ctx.lineWidth = relBorder[0]
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(hb, relBorderRadius[0])
|
||||
ctx.lineTo(hb, canvas.height - relBorderRadius[3])
|
||||
ctx.moveTo(canvas.width - hb, relBorderRadius[1])
|
||||
ctx.lineTo(canvas.width - hb, canvas.height - relBorderRadius[2])
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
if (relBorder[1]) {
|
||||
// top + bottom borders
|
||||
var _hb = relBorder[1] / 2
|
||||
|
||||
ctx.lineWidth = relBorder[1]
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[0]), _hb)
|
||||
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[1]), _hb)
|
||||
ctx.moveTo(Math.max(relBorder[0], relBorderRadius[3]), canvas.height - _hb)
|
||||
ctx.lineTo(canvas.width - Math.max(relBorder[0], relBorderRadius[2]), canvas.height - _hb)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
if (this.borderRadius) {
|
||||
// strike rounded corners
|
||||
var cornerWidth = Math.max.apply(Math, _toConsumableArray(relBorder))
|
||||
|
||||
var _hb2 = cornerWidth / 2
|
||||
|
||||
ctx.lineWidth = cornerWidth
|
||||
ctx.beginPath();
|
||||
[!!relBorderRadius[0] && [relBorderRadius[0], _hb2, _hb2, relBorderRadius[0]], !!relBorderRadius[1] && [canvas.width - relBorderRadius[1], canvas.width - _hb2, _hb2, relBorderRadius[1]], !!relBorderRadius[2] && [canvas.width - relBorderRadius[2], canvas.width - _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[2]], !!relBorderRadius[3] && [relBorderRadius[3], _hb2, canvas.height - _hb2, canvas.height - relBorderRadius[3]]].filter(function(d) {
|
||||
return d
|
||||
}).forEach(function(_ref) {
|
||||
var _ref2 = _slicedToArray(_ref, 4)
|
||||
var x0 = _ref2[0]
|
||||
var x1 = _ref2[1]
|
||||
var y0 = _ref2[2]
|
||||
var y1 = _ref2[3]
|
||||
|
||||
ctx.moveTo(x0, y0)
|
||||
ctx.quadraticCurveTo(x1, y0, x1, y1)
|
||||
})
|
||||
ctx.stroke()
|
||||
}
|
||||
} // paint background
|
||||
|
||||
if (this.backgroundColor) {
|
||||
ctx.fillStyle = this.backgroundColor
|
||||
|
||||
if (!this.borderRadius) {
|
||||
ctx.fillRect(relBorder[0], relBorder[1], canvas.width - relBorder[0] * 2, canvas.height - relBorder[1] * 2)
|
||||
} else {
|
||||
// fill with rounded corners
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(relBorder[0], relBorderRadius[0]);
|
||||
[[relBorder[0], relBorderRadius[0], canvas.width - relBorderRadius[1], relBorder[1], relBorder[1], relBorder[1]], // t
|
||||
[canvas.width - relBorder[0], canvas.width - relBorder[0], canvas.width - relBorder[0], relBorder[1], relBorderRadius[1], canvas.height - relBorderRadius[2]], // r
|
||||
[canvas.width - relBorder[0], canvas.width - relBorderRadius[2], relBorderRadius[3], canvas.height - relBorder[1], canvas.height - relBorder[1], canvas.height - relBorder[1]], // b
|
||||
[relBorder[0], relBorder[0], relBorder[0], canvas.height - relBorder[1], canvas.height - relBorderRadius[3], relBorderRadius[0]] // t
|
||||
].forEach(function(_ref3) {
|
||||
var _ref4 = _slicedToArray(_ref3, 6)
|
||||
var x0 = _ref4[0]
|
||||
var x1 = _ref4[1]
|
||||
var x2 = _ref4[2]
|
||||
var y0 = _ref4[3]
|
||||
var y1 = _ref4[4]
|
||||
var y2 = _ref4[5]
|
||||
|
||||
ctx.quadraticCurveTo(x0, y0, x1, y1)
|
||||
ctx.lineTo(x2, y2)
|
||||
})
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
}
|
||||
|
||||
ctx.translate.apply(ctx, _toConsumableArray(relBorder))
|
||||
ctx.translate.apply(ctx, _toConsumableArray(relPadding)) // paint text
|
||||
|
||||
ctx.font = font // Set font again after canvas is resized, as context properties are reset
|
||||
|
||||
ctx.fillStyle = this.color
|
||||
ctx.textBaseline = 'bottom'
|
||||
var drawTextStroke = this.strokeWidth > 0
|
||||
|
||||
if (drawTextStroke) {
|
||||
ctx.lineWidth = this.strokeWidth * this.fontSize / 10
|
||||
ctx.strokeStyle = this.strokeColor
|
||||
}
|
||||
|
||||
lines.forEach(function(line, index) {
|
||||
var lineX = (innerWidth - ctx.measureText(line).width) / 2
|
||||
var lineY = (index + 1) * _this2.fontSize
|
||||
drawTextStroke && ctx.strokeText(line, lineX, lineY)
|
||||
ctx.fillText(line, lineX, lineY)
|
||||
}) // Inject canvas into sprite
|
||||
|
||||
if (this.material.map) this.material.map.dispose() // gc previous texture
|
||||
|
||||
var texture = this.material.map = new three.Texture(canvas)
|
||||
texture.minFilter = three.LinearFilter
|
||||
texture.needsUpdate = true
|
||||
var yScale = this.textHeight * lines.length + border[1] * 2 + padding[1] * 2
|
||||
this.scale.set(yScale * canvas.width / canvas.height, yScale, 0.001)
|
||||
}
|
||||
}, {
|
||||
key: 'clone',
|
||||
value: function clone() {
|
||||
return new this.constructor(this.text, this.textHeight, this.color).copy(this)
|
||||
}
|
||||
}, {
|
||||
key: 'copy',
|
||||
value: function copy(source) {
|
||||
three.Sprite.prototype.copy.call(this, source)
|
||||
this.color = source.color
|
||||
this.backgroundColor = source.backgroundColor
|
||||
this.padding = source.padding
|
||||
this.borderWidth = source.borderWidth
|
||||
this.borderColor = source.borderColor
|
||||
this.fontFace = source.fontFace
|
||||
this.fontSize = source.fontSize
|
||||
this.fontWeight = source.fontWeight
|
||||
this.strokeWidth = source.strokeWidth
|
||||
this.strokeColor = source.strokeColor
|
||||
return this
|
||||
}
|
||||
}])
|
||||
|
||||
return _default
|
||||
}(three.Sprite))
|
||||
|
||||
export { _default as default }
|
||||
Reference in New Issue
Block a user