diff --git a/package.json b/package.json index c8100ee..08e817c 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "echarts": "^4.9.0", "element-resize-detector": "^1.2.3", "element-ui": "^2.13.2", + "fabric": "^5.3.0", "file-saver": "^2.0.5", "hammerjs": "^2.0.8", "jquery": "^3.6.0", diff --git a/src/components/360View/img-editor.vue b/src/components/360View/img-editor.vue index 1ffc301..d2bf2bf 100644 --- a/src/components/360View/img-editor.vue +++ b/src/components/360View/img-editor.vue @@ -25,6 +25,7 @@ import 'tui-image-editor/dist/tui-image-editor.css' import 'tui-color-picker/dist/tui-color-picker.css' import ImageEditor from 'tui-image-editor' +import { fabric } from 'fabric' // 汉化 const locale_zh = { // override default English locale to your custom @@ -199,12 +200,50 @@ export default { instance: null, textOne: '', textTwo: '', - textThree: '' + textThree: '', + editorOptions: { + includeUI: { + loadImage: { + path: '', + name: 'image' + }, + // menu: ['crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask + initMenu: 'draw', + selectionStyle: { + lineWidth: 5, + borderColor: '#000000' + }, + menuBarPosition: 'bottom', + locale: locale_zh, // 本地化语言为中文 + theme: customTheme // 自定义主题 + }, + fabricConfig: { + // 添加背景颜色 + backgroundColor: 'rgba(255, 255, 255, 1)', + // 禁用缩放 + scalable: false, + // 添加自定义图形 + customShapes: [ + { + name: 'triangle', + icon: 'path://M0,0 L50,50 L100,0 Z', + points: [25, 0, 50, 50, 0, 50], + offset: 25 + } + ] + } + } } }, mounted() { - // ImageEditor - + // const ref = this.$refs.can + // const canvas = new fabric.Canvas(ref) + // const rect = new fabric.Rect({ + // fill: 'red', + // width: 20, + // height: 20 + // }) + // canvas.add(rect) }, methods: { init(textOne, textTwo, textThree) { @@ -213,28 +252,12 @@ export default { textThree ? this.textThree = textThree : '' this.visible = true this.$nextTick(() => { - // console.log(this.imgUrl) + this.editorOptions.includeUI.loadImage.path = this.imgUrl this.instance = new ImageEditor( - document.querySelector('#tui-image-editor'), - { - includeUI: { - loadImage: { - path: this.imgUrl, - name: 'image' - }, - // menu: ['crop', 'rotate', 'draw', 'shape', 'icon', 'text', 'filter'], // 底部菜单按钮列表 隐藏镜像flip和遮罩mask - initMenu: 'draw', - selectionStyle: { - lineWidth: 5, - borderColor: '#000000' - }, - menuBarPosition: 'bottom', - locale: locale_zh, // 本地化语言为中文 - theme: customTheme // 自定义主题 - } - } + '#tui-image-editor', + this.editorOptions ) - // document.querySelector('.tie-btn-resize').style.display = 'none' // 隐藏顶部重置按钮 + this.instance.setBrush({ width: 20, color: 'red' }) document.querySelector('.tie-btn-mask').style.display = 'none' // 隐藏遮罩按钮 }) }, @@ -257,11 +280,9 @@ export default { // 替换图片 replaceHandle(e) { var file = e.target.files[0] - console.log(file) var reader = new FileReader() var that = this reader.readAsDataURL(file) - console.log(reader) reader.onload = function(e) { that.imgUrl = reader.result that.init() diff --git a/src/components/360View/index1.vue b/src/components/360View/index1.vue index 278fcf0..950141d 100644 --- a/src/components/360View/index1.vue +++ b/src/components/360View/index1.vue @@ -396,8 +396,12 @@ export default { this.drawerWidth = (this.drawerWidth === '500px') ? '800px' : '500px' }, backList() { - this.$parent.detailViewVisible = false - this.$parent.getDataListInitial() + if (this.$route.query.patientId) { + this.$router.go(-1) + } else { + this.$parent.detailViewVisible = false + this.$parent.getDataListInitial() + } }, // 360浏览器 handlePacs() { diff --git a/src/page-subspecialty/views/modules/formList/mraOrder.vue b/src/page-subspecialty/views/modules/formList/mraOrder.vue index 27fc93b..ed51c73 100644 --- a/src/page-subspecialty/views/modules/formList/mraOrder.vue +++ b/src/page-subspecialty/views/modules/formList/mraOrder.vue @@ -122,9 +122,10 @@