Skip to content

F
founder_vue
Commit 41a0d536 by 米嘉伟
Options

Merge branch 'dev_zwpt' of http://47.92.108.28/changchao/founder_vue into dev_zwpt

parents 8d6dea51 a3fe02bd
Showing with 1879 additions and 294 deletions
src/components/ImageEd.vue
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-09-23 16:05:21
* @LastEditTime: 2021-09-26 09:43:51
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
......@@ -283,7 +283,7 @@
</div>
</div>
<div class="lt_middle_main">
<div class="source" @click="sourceEdit">
<div class="source" @click.self="sourceEdit">
<div class="title">源数据</div>
<div class="drawing">
<div class="body-container">
......@@ -292,7 +292,7 @@
</div>
<div class="edit" id="sourceEdit">编辑</div>
</div>
<div class="target" @click="targetEdit">
<div class="target" @click.self="targetEdit">
<div class="title">目标数据</div>
<div class="drawing">
<div class="body-container">
......@@ -488,7 +488,27 @@ export default {
// 是否展示历史下拉框
isHistoryOptions: false,
// 是否点击了历史
isActive_history: false
isActive_history: false,
// 标记-默认
sizeMr_source: false,
// 标记-小
sizeX_source: false,
// 标记-中
sizeZ_source: false,
// 标记-大
sizeD_source: false,
// 标记-默认
sizeMr_target: false,
// 标记-小
sizeX_target: false,
// 标记-中
sizeZ_target: false,
// 标记-大
sizeD_target: false,
// 同步-source
sourceTong: false,
// 同步-target
targetTong: false
};
},
components: {
......@@ -719,6 +739,24 @@ export default {
}
}
function activateShapeMode () {
if (imageEditor.getDrawingMode() !== 'SHAPE') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('SHAPE');
}
}
function activateIconMode () {
imageEditor.stopDrawingMode();
}
function activateTextMode () {
if (imageEditor.getDrawingMode() !== 'TEXT') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('TEXT');
}
}
// Attach image editor custom events
imageEditor.on({
objectAdded: function (objectProps) {
......@@ -759,22 +797,22 @@ export default {
console.log(objectProps);
});
},
objectActivated: function (obj) {
activeObjectId = obj.id;
if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
showSubMenu('shape');
setShapeToolbar(obj);
activateShapeMode();
} else if (obj.type === 'icon') {
showSubMenu('icon');
setIconToolbar(obj);
activateIconMode();
} else if (obj.type === 'text') {
showSubMenu('text');
setTextToolbar(obj);
activateTextMode();
}
},
// objectActivated: function (obj) {
// activeObjectId = obj.id;
// if (obj.type === 'rect' || obj.type === 'circle' || obj.type === 'triangle') {
// // showSubMenu('shape');
// // setShapeToolbar(obj);
// activateShapeMode();
// } else if (obj.type === 'icon') {
// // showSubMenu('icon');
// // setIconToolbar(obj);
// activateIconMode();
// } else if (obj.type === 'text') {
// // showSubMenu('text');
// // setTextToolbar(obj);
// activateTextMode();
// }
// },
mousedown: function (event, originPointer) {
if ($imageFilterSubMenu.is(':visible') && imageEditor.hasFilter('colorFilter')) {
imageEditor.applyFilter('colorFilter', {
......@@ -880,39 +918,231 @@ export default {
}
});
// 放大
$('.tui-image-editor').click(function (e) {
// 获取事件对象
var e = e || window.event;
// 获得当前点击位置距离浏览器顶部的距离
var top = e.pageY;
// 获得当前点击位置距离浏览器左侧的距离
var left = e.pageX;
console.log(top + '|' + left)
console.log(self.isEnlarge);
// 鼠标点击图片事件 - 放大
// $('.tui-image-editor').click(function (e) {
// // 获取事件对象
// var e = e || window.event;
// // 获得当前点击位置距离浏览器顶部的距离
// var top = e.pageY;
// // 获得当前点击位置距离浏览器左侧的距离
// var left = e.pageX;
// console.log(top + '|' + left)
// console.log(self.isEnlarge);
// // 放大
// if (self.isEnlarge) {
// self.zoomLevel = self.zoomLevel + 1
// if (self.zoomLevel == 4) {
// self.zoomLevel = 3
// }
// imageEditor.zoom({
// x: top,
// y: left,
// zoomLevel: self.zoomLevel
// })
// }
// })
// 标记
imageEditor.on('mousedown', function (e, originPointer) {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
console.log(originPointer);
// 默认
if (self.sizeMr_source) {
imageEditor
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 4,
ry: 4,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeX_source) {
// 小
imageEditor
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 2,
ry: 2,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeZ_source) {
// 中
imageEditor
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 6,
ry: 6,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeD_source) {
// 大
imageEditor
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 8,
ry: 8,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
}
// 放大
if (self.isEnlarge) {
self.zoomLevel = self.zoomLevel + 1
if (self.zoomLevel == 4) {
self.zoomLevel = 3
}
imageEditor.zoom({
x: top,
y: left,
x: originPointer.y,
y: originPointer.x,
zoomLevel: self.zoomLevel
})
if (self.sourceTong) {
imageEditor2.zoom({
x: originPointer.y,
y: originPointer.x,
zoomLevel: self.zoomLevel
})
}
}
});
// 标记
imageEditor2.on('mousedown', function (e, originPointer) {
window.event ? window.event.cancelBubble = true : e.stopPropagation();
console.log(originPointer);
// 默认
if (self.sizeMr_target) {
imageEditor2
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 4,
ry: 4,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeX_target) {
// 小
imageEditor2
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 2,
ry: 2,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeZ_target) {
// 中
imageEditor2
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 6,
ry: 6,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
} else if (self.sizeD_target) {
// 大
imageEditor2
.addShape('circle', {
fill: 'red',
stroke: 'blue',
strokeWidth: 0,
rx: 8,
ry: 8,
left: originPointer.x,
top: originPointer.y,
isRegular: false
})
.then(objectProps => {
console.log(objectProps.id);
});
}
// 放大
if (self.isEnlarge2) {
self.zoomLevel2 = self.zoomLevel2 + 1
if (self.zoomLevel2 == 4) {
self.zoomLevel2 = 3
}
imageEditor2.zoom({
x: top,
y: left,
x: originPointer.y,
y: originPointer.x,
zoomLevel: self.zoomLevel2
})
if (self.targetTong) {
imageEditor.zoom({
x: originPointer.y,
y: originPointer.x,
zoomLevel: self.zoomLevel
})
}
}
})
});
// 鼠标点击图片事件 - 放大
// $('.tui-image-editor2').click(function (e) {
// // 获取事件对象
// var e = e || window.event;
// // 获得当前点击位置距离浏览器顶部的距离
// var top = e.pageY;
// // 获得当前点击位置距离浏览器左侧的距离
// var left = e.pageX;
// console.log(top + '|' + left)
// if (self.isEnlarge2) {
// self.zoomLevel2 = self.zoomLevel2 + 1
// if (self.zoomLevel2 == 4) {
// self.zoomLevel2 = 3
// }
// imageEditor2.zoom({
// x: top,
// y: left,
// zoomLevel: self.zoomLevel2
// })
// }
// })
// 下载
......@@ -937,8 +1167,8 @@ export default {
w.document.body.innerHTML = '<img src="' + dataURL + '">';
}
} else {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var imageName = imageEditor2.getImageName();
var dataURL = imageEditor2.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
......@@ -1264,6 +1494,7 @@ export default {
* @return {*}
*/
historyChange () {
this.initStatus()
this.imageEditor._initHistory()
console.log(this.imageEditor);
console.log(this.historys);
......@@ -1594,6 +1825,7 @@ export default {
* @return {*}
*/
cancelPic () {
this.isActive_clear = false
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
......@@ -1604,6 +1836,7 @@ export default {
* @return {*}
*/
delPic () {
this.isActive_clear = false
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
......@@ -1620,6 +1853,130 @@ export default {
* @return {*}
*/
clearChange () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
// this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
this.isActive_clear = !this.isActive_clear
if (this.isActive_clear) {
$('.clear').css('background', '#055FE7')
......@@ -1639,6 +1996,18 @@ export default {
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = true
if (this.type == 'source') {
this.sizeD_source = true
this.sizeZ_source = false
this.sizeX_source = false
this.sizeMr_source = false
} else {
this.sizeD_target = true
this.sizeZ_target = false
this.sizeX_target = false
this.sizeMr_target = false
}
},
/**
* @description: 设置为中
......@@ -1650,6 +2019,18 @@ export default {
this.isSmallSizeActive = false
this.isMediumSizeActive = true
this.isBigSizeActive = false
if (this.type == 'source') {
this.sizeD_source = false
this.sizeZ_source = true
this.sizeX_source = false
this.sizeMr_source = false
} else {
this.sizeD_target = false
this.sizeZ_target = true
this.sizeX_target = false
this.sizeMr_target = false
}
},
/**
* @description: 设置为小
......@@ -1661,6 +2042,18 @@ export default {
this.isSmallSizeActive = true
this.isMediumSizeActive = false
this.isBigSizeActive = false
if (this.type == 'source') {
this.sizeD_source = false
this.sizeZ_source = false
this.sizeX_source = true
this.sizeMr_source = false
} else {
this.sizeD_target = false
this.sizeZ_target = false
this.sizeX_target = true
this.sizeMr_target = false
}
},
/**
* @description: 设置为默认大小
......@@ -1675,15 +2068,15 @@ export default {
if (this.type == 'source') {
console.log('默认');
this.imageEditor.setDrawingShape('circle', {
fill: 'transparent',
stroke: 'blue',
strokeWidth: 3,
rx: 10,
ry: 100
});
this.sizeD_source = false
this.sizeZ_source = false
this.sizeX_source = false
this.sizeMr_source = true
} else {
this.sizeD_target = false
this.sizeZ_target = false
this.sizeX_target = false
this.sizeMr_target = true
}
},
/**
......@@ -1692,6 +2085,131 @@ export default {
* @return {*}
*/
circleChange () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
// this.isActive_circle = false
// 是否展示园标记弹出框
// this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
// this.isMrSizeActive = true
// this.isSmallSizeActive = false
// this.isMediumSizeActive = false
// this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
......@@ -1702,6 +2220,26 @@ export default {
$('.icon_circle').css('background', '#055FE7')
} else {
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
this.isMrSizeActive = false
}
if (this.type == 'source') {
if (this.isActive_circle) {
this.sizeMr_source = true
} else {
this.sizeMr_source = false
this.sizeX_source = false
this.sizeZ_source = false
this.sizeD_source = false
}
} else {
if (this.isActive_circle) {
this.sizeMr_target = true
} else {
this.sizeMr_target = false
this.sizeX_target = false
this.sizeZ_target = false
this.sizeD_target = false
}
}
},
/**
......@@ -1824,44 +2362,170 @@ export default {
* @return {*}
*/
lineChange () {
this.isLineOptions = !this.isLineOptions
this.isActive_line = !this.isActive_line
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
if (!this.isLineOptions) {
this.isShowLineColor = false
this.imageEditor.stopDrawingMode();
this.imageEditor2.stopDrawingMode();
console.log(777);
} else {
// $selectLine.click()
}
if (this.isActive_line) {
$('.icon_line').css('background', '#055FE7')
} else {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
}
},
/**
* @description: 打开/关闭 画笔颜色选择
* @param {*}
* @return {*}
*/
openColorPicker () {
this.isShowLineColor = !this.isShowLineColor
},
/**
* @description: 截屏
* @param {*}
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
// this.isActive_line = false
// 是否打开线条的下拉框
// this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
// this.isNormalActiveIcon = true
// this.isNormalActiveName = true
// this.isThinActiveIcon = false
// this.isThinActiveName = false
// this.isMediumActiveIcon = false
// this.isMediumActiveName = false
// this.isBoldActiveIcon = false
// this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
this.isLineOptions = !this.isLineOptions
this.isActive_line = !this.isActive_line
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
if (!this.isLineOptions) {
this.isShowLineColor = false
this.imageEditor.stopDrawingMode();
this.imageEditor2.stopDrawingMode();
console.log(777);
} else {
// $selectLine.click()
}
if (this.isActive_line) {
$('.icon_line').css('background', '#055FE7')
} else {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
}
},
/**
* @description: 打开/关闭 画笔颜色选择
* @param {*}
* @return {*}
*/
openColorPicker () {
this.isShowLineColor = !this.isShowLineColor
},
/**
* @description: 截屏
* @param {*}
* @return {*}
*/
screenshot () {
this.initStatus()
html2canvas(
document.querySelector('.lt'),
{
......@@ -1887,6 +2551,130 @@ export default {
* @return {*}
*/
rotateChange () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
// this.isActive_rotate = false
// 是否展示旋转的下拉框
// this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
// this.isX = false
// 是否是Y轴翻转
// this.isY = false
// 是否是重置
// this.isReset = false
// 是否是左旋转
// this.isLeftRotate = false
// 是否是右旋转
// this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
......@@ -1911,6 +2699,130 @@ export default {
* @return {*}
*/
sizeChange () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
// this.isOptions = false
// 是否点击
// this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
this.isOptions = !this.isOptions
this.isActive = !this.isActive
if (this.isActive) {
......@@ -1925,44 +2837,188 @@ export default {
* @return {*}
*/
setOptions (opt) {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
// this.isEnlarge = false
// 目标是否放大
// this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
if (this.type == 'source') {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
this.sourceTong = false
} else {
$('.tong').addClass('active')
this.sourceTong = true
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
} else {
$('.yuan').addClass('active')
this.imageEditor.resetZoom()
this.imageEditor.changeCursor('auto');
this.isEnlarge = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
if(this.sourceTong) {
this.imageEditor2.resetZoom()
this.imageEditor2.changeCursor('auto');
this.isEnlarge2 = false
}
}
}
} else {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
this.targetTong = false
} else {
$('.tong').addClass('active')
this.targetTong = true
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge = false
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
} else {
$('.yuan').addClass('active')
this.imageEditor2.resetZoom()
this.imageEditor2.changeCursor('auto');
this.isEnlarge = false
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
if(this.targetTong) {
this.imageEditor.resetZoom()
this.imageEditor.changeCursor('auto');
this.isEnlarge = false
}
}
}
}
......@@ -1973,6 +3029,130 @@ export default {
* @return {*}
*/
hand () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
// this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
console.log(this.imageEditor);
console.log(this.imageEditor.ui);
console.log(555);
......@@ -1995,9 +3175,134 @@ export default {
* @return {*}
*/
enlarge () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
// this.isEnlarge = false
// 目标是否放大
// this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
// this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
console.log('放大');
if (this.type == 'source') {
this.isEnlarge = !this.isEnlarge
this.isEnlarge2 = !this.isEnlarge2
if (this.isEnlarge) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor.changeCursor('zoom-in');
......@@ -2007,6 +3312,7 @@ export default {
}
} else {
this.isEnlarge2 = !this.isEnlarge2
this.isEnlarge = !this.isEnlarge
if (this.isEnlarge2) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor2.changeCursor('zoom-in');
......@@ -2025,6 +3331,7 @@ export default {
this.type = 'source'
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#055FE7');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#D1D1D1');
this.initStatus()
},
/**
* @description: 切换目标
......@@ -2035,7 +3342,150 @@ export default {
this.type = 'target'
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#D1D1D1');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#055FE7');
this.initStatus()
},
/**
* @description: 数据初始化
* @param {*}
* @return {*}
*/
initStatus () {
$('.icon_line').css('background', 'rgba(5, 95, 231, 0.05)')
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
// 是否是小手
this.isHand = false
// 是否放大
this.isEnlarge = false
// 目标是否放大
this.isEnlarge2 = false
// 放大的倍数
// this.zoomLevel = 1
// 目标放大的倍数
// this.zoomLevel2 = 1
this.isOptions = false
// 是否点击
this.isActive = false
// 是否是点击状态
this.isActive_rotate = false
// 是否展示旋转的下拉框
this.isRotateOptions = false
// 旋转的度数
this.inputRotationRange = 0
// 旋转的度数--target
// this.inputRotationRange2 = 0
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
// 是否选中线条
this.isActive_line = false
// 是否打开线条的下拉框
this.isLineOptions = false
// 是否隐藏辅助线
this.isHideSubline = true
// 是否展示画笔颜色选择
this.isShowLineColor = false
// 线条样式切换
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
// 辅助线的id数组
this.lines = [],
// 是否点击了圆标记
this.isActive_circle = false
// 是否展示园标记弹出框
this.isCircleOptions = false
// 是否隐藏标记点
// this.isHideMarkPoint = false
// 大小切换
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
// 是否点击了清空按钮
this.isActive_clear = false
// 是否展示清空操作提示按钮
this.isShowClearDialog = false
// 是否选择了灰度
this.isGrayActive = false
// 是否选择了棕褐色
this.isVintageActive = false
// 是否选择了马蹄镜
this.isHorseshoeMirrorActive = false
// 是否选择了均衡化
this.isEqualizationActive = false
// 是否选择了锐化
this.isSharpenActive = false
// 是否选择了浮雕
this.isEmbossActive = false
// 是否选择了反向
this.isInvertActive = false
// 是否选择了去除白色
this.isRemoveWhiteActive = false
// 去白值
// this.inputRemoveWhiteRange = 10
// 去白值--target
// this.inputRemoveWhiteRange2 = 10
// 是否展示去白下拉框
this.optionsRemoveWhite = false
// 滤色器选项框
this.optionsColorFilter = false
// 是否选择了滤色器
this.isColorFilterActive = false
// 滤色器色值
// this.inputColorFilterRange = 45
// 滤色器色值---target
// this.inputColorFilterRange2 = 45
// 是否选择了正片叠底
this.isMultiplyActive = false
// 是否展示正片叠底框
this.optionsMultiply = false
// 是否选择了差异化
this.isBlendActive = false
// 是否展示差异化下拉框
this.optionsBlend = false
// 是否选择了亮度
this.isBrightnessActive = false
// 亮度
// this.inputBrightnessRange = 100
// 亮度 --- target
// this.inputBrightnessRange2 = 100
// 是否展示亮度弹窗
this.optionsBrightness = false
// 源数据/目标数据切换
// this.type = 'source'
// 是否展示历史下拉框
this.isHistoryOptions = false
// 是否点击了历史
this.isActive_history = false
this.sizeMr_source = false
this.sizeX_source = false
this.sizeZ_source = false
this.sizeD_source = false
this.sizeMr_target = false
this.sizeX_target = false
this.sizeZ_target = false
this.sizeD_target = false
// 同步
this.sourceTong = false
this.targetTong = false
}
},
watch: {
inputRotationRange (newValue, oldValue) {
......
src/views/cxyrd/LT.vue
......@@ -62,7 +62,8 @@ export default {
let destbarcode = sessionStorage.getItem('destbarcode') || ''
let qqid = sessionStorage.getItem('qqid') || ''
let qid = sessionStorage.getItem('qid') || ''
let querytype = 1
// 2：正查
let querytype = 2
this.$axios({
method: 'post',
url: '/api/matchcand/affirm/hit',
......@@ -88,8 +89,35 @@ export default {
* @return {*}
*/
Rdwc () {
let self = this
console.log('认定完成');
let affirmState = 1
let srcseqno = sessionStorage.getItem('srcseqno') || ''
let destseqno = sessionStorage.getItem('destseqno') || ''
let srcbarcode = sessionStorage.getItem('srcbarcode') || ''
let destbarcode = sessionStorage.getItem('destbarcode') || ''
let qqid = sessionStorage.getItem('qqid') || ''
let qid = sessionStorage.getItem('qid') || ''
// 2：正查
let querytype = 2
this.$axios({
method: 'post',
url: '/api/matchcand/affirm/finish',
data: {
affirmState,
srcseqno,
destseqno,
srcbarcode,
destbarcode,
qqid,
qid,
querytype
}
}).then(response => {
// 跟新列表数据
self.$bus.emit('updateFinderSource')
console.log(response);
})
}
},
};
......
src/views/cxyrd/QueryConfirm.vue
......@@ -657,7 +657,7 @@ export default {
// 打开新页面
let routeUrl = this.$router.resolve({
path: "/confirm/LT",
query: { rowData: row }
query: { rowData: row.qid }
});
window.open(routeUrl.href, "_blank");
}
......
src/views/cxyrd/modules/LTCandidate.vue
......@@ -13,7 +13,7 @@
<el-checkbox v-model="checked">显示已比中候选</el-checkbox>
</div>
<div class="lt_candidate_number">
<el-table highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" height="800" :data="tableData">
<el-table highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" height="800" :data="tableData" :row-class-name="tableRowClassName">
<el-table-column label="排名" type="index" width="50">
</el-table-column>
<!-- <el-table-column label="排名" width="50"></el-table-column>-->
......@@ -127,6 +127,7 @@ export default {
created () {
let self = this
self.$bus.on('initCandidate', (tableData) => {
console.log(tableData);
self.tableData = tableData
self.total = self.tableData.length
self.sourceTableData = tableData
......@@ -135,6 +136,26 @@ export default {
},
methods: {
/**
* @description: 比中与认定完成添加样式
* @param {*} row
* @param {*} column
* @param {*} rowIndex
* @param {*} columnIndex
* @return {*}
*/
tableRowClassName ({ row, column, rowIndex, columnIndex }) {
console.log(row);
// 比中的行
if (row.affirmStatus == 2) {
console.log(row);
return "Bizhong"
} else if (row.affirmStatus == 1) {
// 认定完成的行
console.log(row);
return "Identification"
}
},
/**
* @description: 切换指位选择
* @param {*}
* @return {*}
......@@ -927,18 +948,33 @@ export default {
handleCurrentChange (val, old) {
let self = this
console.log(val);
// 存储目标条码号
sessionStorage.setItem('destbarcode', val.destbarcode)
// 存储目的数据序号
sessionStorage.setItem('destseqno', val.destid)
// this.$axios.get(`/api/api/org/plainByBarcode/R1100002487002018050034/1/`)
this.$axios.get(`/api/org/plainByBarcode/${val.destbarcode}/${val.destid}/`)
.then(response => {
console.log(response);
self.$bus.emit('changImageEditTarget', response.data.ret.image)
if (val != null) {
// 存储目标条码号
sessionStorage.setItem('destbarcode', val.destbarcode)
// 存储目的数据序号
sessionStorage.setItem('destseqno', val.destid)
// this.$axios.get(`/api/api/org/plainByBarcode/R1100002487002018050034/1/`)
this.$axios.get(`/api/org/plainByBarcode/${val.destbarcode}/${val.destid}/`)
.then(response => {
console.log(response);
self.$bus.emit('changImageEditTarget', response.data.ret.image)
})
}
}
},
watch: {
checked (newValue, oldValue) {
console.log();
if (newValue) {
this.tableData = this.sourceTableData
} else {
this.tableData = this.sourceTableData.filter(item => {
return item.affirmStatus != 2
})
console.log(this.tableData);
}
}
}
},
};
const candidates = [
{
......@@ -974,99 +1010,117 @@ const candidates = [
];
</script>
<style scoped lang="scss">
div {
display: inline-block;
}
<style lang="scss">
.lt_candidate {
width: 100%;
height: 100%;
background: #f6f8fa;
border-radius: 8px;
}
.lt_candidate .lt_cnadidate_search {
width: 100%;
height: 48px;
}
.lt_candidate .lt_cnadidate_checked {
width: 100%;
height: 31px;
display: flex;
justify-content: flex-end;
}
.lt_candidate .lt_candidate_number {
width: 100%;
}
.lt_candidate .lt_candidate_bottom {
text-align: center;
height: 40px;
width: 100%;
}
.el-select .el-input {
width: 130px;
}
.input-with-select .el-input-group__prepend {
background-color: #fff;
}
.selectFinger {
z-index: 10;
position: absolute;
top: 187px;
right: 60px;
width: 236px;
height: 194px;
background: #FFFFFF;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #E6E6E8;
padding: 8px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
.left-title, .right-title {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #666666;
padding-left: 16px;
div {
display: inline-block;
}
.right-title {
margin-top: 7px;
.lt_cnadidate_search {
width: 100%;
height: 48px;
}
.line {
cursor: pointer;
box-sizing: border-box;
padding-left: 8px;
.lt_cnadidate_checked {
width: 100%;
height: 31px;
display: flex;
align-items: center;
width: 234px;
height: 32px;
.selected {
width: 14px;
height: 14px;
margin-right: 10px;
box-sizing: border-box;
display: flex;
justify-content: flex-end;
}
.lt_candidate_number {
width: 100%;
}
.lt_candidate_bottom {
text-align: center;
height: 40px;
width: 100%;
}
.el-select {
.el-input {
width: 130px;
}
.selected-type {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
margin-right: 24px;
}
.input-with-select {
.el-input-group__prepend {
background-color: #fff;
}
.item {
}
.selectFinger {
z-index: 10;
position: absolute;
// top: 187px;
// right: 60px;
top: 220px;
right: 60px;
width: 236px;
height: 194px;
background: #FFFFFF;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #E6E6E8;
padding: 8px 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
.left-title, .right-title {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
margin-right: 16px;
color: #666666;
padding-left: 16px;
}
.right-title {
margin-top: 7px;
}
.line {
cursor: pointer;
box-sizing: border-box;
padding-left: 8px;
display: flex;
align-items: center;
width: 234px;
height: 32px;
.selected {
width: 14px;
height: 14px;
margin-right: 10px;
box-sizing: border-box;
display: flex;
}
.selected-type {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
margin-right: 24px;
}
.item {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
margin-right: 16px;
&.active {
color: #006AFF;
}
}
&.active {
color: #006AFF;
background: #F5F5F7;
}
}
&.active {
background: #F5F5F7;
}
.Bizhong {
.cell {
color: #FF0039;
}
}
.Identification {
.cell {
color: #055FE7;
}
}
}
</style>
src/views/cxyrd/modules/LTSrc.vue
<template>
<div class="lt_src">
<div class="lt_top">
<label>任务号：{{ tableData.qid }}</label>
<!-- <label>任务号：{{ tableData.qid }}</label> -->
<label>任务号：{{ rwh }}</label>
<el-checkbox v-model="checked">显示已认定完成查询ID</el-checkbox>
</div>
<div class="lt_middle">
<!-- 源数据区 -->
<div class="lt_middle_src_data">
<el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius" :height="tableHeight" @row-click="getFirgerPrintDetail">
<el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius" :height="tableHeight" @row-click="getFirgerPrintDetail" :row-class-name="tableRowClassName">
<el-table-column prop="qqid" label="查询ID" width="80"></el-table-column>
<el-table-column prop="barcode" label="源条码号" width="190"></el-table-column>
<el-table-column prop="maxcandidatecnt" label="枚数" width="80"></el-table-column>
......@@ -42,17 +43,18 @@
export default {
name: "LTSrc",
props: ["srcData"],
watch: {
srcData: {
immediate: true,
handler (val) {
console.info("源数据传入组件的值为===>", val);
this.tableData = val;
}
}
},
// watch: {
// srcData: {
// immediate: true,
// handler (val) {
// console.info("源数据传入组件的值为===>", val);
// this.tableData = val;
// }
// }
// },
data () {
return {
rwh: null,
checked: true,
enumerate: null,
tableData: null,
......@@ -60,6 +62,7 @@ export default {
fingerSrc: require("../../../assets/img/img.png"),
isShowPrint: true,
tableHeight: 368,
sourceDataList: [],
dataList: [],
total: 0,
fingerTotal: 0,
......@@ -70,11 +73,30 @@ export default {
},
methods: {
/**
* @description: 比中与认定完成添加样式
* @param {*} row
* @param {*} column
* @param {*} rowIndex
* @param {*} columnIndex
* @return {*}
*/
tableRowClassName ({ row, column, rowIndex, columnIndex }) {
// 比中的行
if (row.affirmStatus == 2 || row.affirmStatus == 3) {
console.log(row);
return "Bizhong"
} else if (row.affirmStatus == 1) {
// 认定完成的行
console.log(row);
return "Identification"
}
},
/**
* @description: 选择切换
* @param {*} val
* @param {*} old
* @return {*}
*/
*/
handleCurrentChange (val, old) {
this.currentRow = val;
console.log(val);
......@@ -110,7 +132,8 @@ export default {
.post("/api/queryque/standardAll", {})
.then(response => {
console.log(response);
self.dataList = response.data.ret
self.sourceDataList = response.data.ret
self.dataList = self.sourceDataList
self.total = response.data.ret.length
console.log(self.dataList);
// 默认选中第一行
......@@ -135,6 +158,7 @@ export default {
},
// 指纹部分 增加边框
changeStyle (index, imageInfo) {
console.log(imageInfo);
let self = this
this.isActive = index;
console.log(this.isActive);
......@@ -142,16 +166,16 @@ export default {
sessionStorage.setItem('srcseqno', imageInfo.seq)
this.$bus.emit('changImageEdit', imageInfo.image)
this.$axios.post(`/api/query/matchcand/dest/${self.qqid}/${imageInfo.seq}`, {})
.then(response => {
console.log(response);
self.$bus.emit('initCandidate', response.data.ret)
})
.then(response => {
console.log(response);
self.$bus.emit('initCandidate', response.data.ret)
})
},
/**
* @description: 展开收缩切换
* @param {*}
* @return {*}
*/
*/
changeTableHeight () {
this.isShowPrint = !this.isShowPrint
if (!this.isShowPrint) {
......@@ -163,7 +187,28 @@ export default {
}
}
},
watch: {
/**
* @description: 过滤显示已认定完成查询ID
* @param {*} newValue
* @param {*} oldValue
* @return {*}
*/
checked(newValue, oldValue) {
console.log(newValue);
if(newValue) {
this.dataList = this.sourceDataList
} else {
this.dataList = this.sourceDataList.filter(item => {
return item.affirmStatus != 1
})
console.log(this.dataList);
}
}
},
mounted () {
console.log(this.$route.query.rowData);
this.rwh = this.$route.query.rowData
let self = this
// 初始状态下 展示当前任务的第一条指纹信息（指纹个数）
// this.enumerate = datas[0].enumerate;
......@@ -197,116 +242,124 @@ const datas = [
];
</script>
<style scoped lang="scss">
div {
display: inline-block;
}
label {
margin-right: 67px;
}
.el-button {
margin-left: 32px;
width: 24px;
height: 16px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #055fe7;
line-height: 16px;
font-weight: 350;
}
<style lang="scss">
.lt_src {
width: 100%;
height: 100%;
}
.lt_src .lt_top {
width: 100%;
margin: 0 0 10px 0;
}
.lt_src .lt_middle {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 8px;
}
.lt_middle_src_data {
border-radius: 8px;
width: 100%;
height: 416px;
}
.lt_middle_src_data .finger_print_number {
width: 100%;
height: 40px;
}
.lt_middle_finger_print {
width: 100%;
}
/* 指纹部分 */
.lt_middle_finger_print .lt_middle_finger_prints {
background: #f6f8fa;
margin-top: 12px;
overflow-y: auto;
width: 100%;
height: 400px;
}
/*底部的统计数据*/
.lt_middle_bottom {
text-align: center;
background: #f6f8fa;
height: 40px;
width: 100%;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #999999;
}
/* 单个指纹*/
.finger_print {
position: relative;
width: 106px;
height: 106px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #cccccc;
margin: 8px 4px 8px 4px;
img {
position: absolute;
top: 0;
left: 0;
div {
display: inline-block;
}
}
.finger_print_active {
position: relative;
width: 106px;
height: 106px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #055fe7;
.finger_print_number {
color: #ffffff;
label {
margin-right: 67px;
}
.el-button {
margin-left: 32px;
width: 24px;
height: 16px;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #055fe7;
line-height: 16px;
font-weight: 350;
}
.lt_top {
width: 100%;
margin: 0 0 10px 0;
}
.lt_middle {
width: 100%;
height: 100%;
background: #ffffff;
border-radius: 8px;
}
.lt_middle_src_data {
border-radius: 8px;
width: 100%;
height: 416px;
.Bizhong {
.cell {
color: #FF0039;
}
}
.Identification {
.cell {
color: #055FE7;
}
}
.finger_print_number {
width: 100%;
height: 40px;
}
}
.lt_middle_finger_print {
width: 100%;
.lt_middle_finger_prints {
background: #f6f8fa;
margin-top: 12px;
overflow-y: auto;
width: 100%;
height: 400px;
}
}
/*底部的统计数据*/
.lt_middle_bottom {
text-align: center;
background: #f6f8fa;
height: 40px;
width: 100%;
font-size: 12px;
font-family: MicrosoftYaHei;
color: #999999;
}
/* 单个指纹*/
.finger_print {
position: relative;
width: 106px;
height: 106px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #cccccc;
margin: 8px 4px 8px 4px;
img {
position: absolute;
top: 0;
left: 0;
}
.finger_print_number {
font-size: 12px;
width: 24px;
height: 24px;
background: #ddebff;
border-radius: 0px 0px 7px 0px;
z-index: 20;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.finger_print_number_active {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: #055fe7;
border-radius: 0px 0px 7px 0px;
}
}
.finger_print_active {
position: relative;
width: 106px;
height: 106px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #055fe7;
.finger_print_number {
color: #ffffff;
font-size: 12px;
}
}
}
/* 单个指纹 左上角的序号*/
.finger_print .finger_print_number {
font-size: 12px;
width: 24px;
height: 24px;
background: #ddebff;
border-radius: 0px 0px 7px 0px;
z-index: 20;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
}
.finger_print .finger_print_number_active {
position: absolute;
top: 0;
left: 0;
width: 24px;
height: 24px;
background: #055fe7;
border-radius: 0px 0px 7px 0px;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment