Skip to content

F
founder_vue
Commit cd3767f1 by 张超军
Options

正查调接口

parent ec5581fe
Showing with 3854 additions and 381 deletions
package-lock.json
......@@ -1875,37 +1875,6 @@
"webpack-merge": "^4.2.2"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"debug": {
"version": "4.2.0",
"resolved": "https://registry.npm.taobao.org/debug/download/debug-4.2.0.tgz?cache=0&sync_timestamp=1600502871403&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fdebug%2Fdownload%2Fdebug-4.2.0.tgz",
......@@ -1915,35 +1884,11 @@
"ms": "2.1.2"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"ms": {
"version": "2.1.2",
"resolved": "https://registry.npm.taobao.org/ms/download/ms-2.1.2.tgz",
"integrity": "sha1-0J0fNXtEP0kzgqjrPM0YOHKuYAk=",
"dev": true
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.5.0",
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.5.0.tgz",
"integrity": "sha1-CcTgcSRmiZ40uZpoZSTxkWX7KJI=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
}
}
}
},
......@@ -12983,6 +12928,11 @@
"resolved": "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz?cache=0&sync_timestamp=1600441210971&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue%2Fdownload%2Fvue-2.6.12.tgz",
"integrity": "sha1-9evU+mvShpQD4pqJau1JBEVskSM="
},
"vue-bus": {
"version": "1.2.1",
"resolved": "https://registry.npm.taobao.org/vue-bus/download/vue-bus-1.2.1.tgz",
"integrity": "sha1-UFd7C3P8GvnNqKR1/vL38P2tcEU="
},
"vue-cli-plugin-axios": {
"version": "0.0.4",
"resolved": "https://registry.npm.taobao.org/vue-cli-plugin-axios/download/vue-cli-plugin-axios-0.0.4.tgz",
......@@ -13061,6 +13011,63 @@
}
}
},
"vue-loader-v16": {
"version": "npm:vue-loader@16.7.0",
"resolved": "https://registry.nlark.com/vue-loader/download/vue-loader-16.7.0.tgz",
"integrity": "sha1-7hYbL2wnsLRZJkw8I9NAaLRx1XQ=",
"dev": true,
"optional": true,
"requires": {
"chalk": "^4.1.0",
"hash-sum": "^2.0.0",
"loader-utils": "^2.0.0"
},
"dependencies": {
"ansi-styles": {
"version": "4.3.0",
"resolved": "https://registry.nlark.com/ansi-styles/download/ansi-styles-4.3.0.tgz?cache=0&sync_timestamp=1618995625950&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fansi-styles%2Fdownload%2Fansi-styles-4.3.0.tgz",
"integrity": "sha1-7dgDYornHATIWuegkG7a00tkiTc=",
"dev": true,
"optional": true,
"requires": {
"color-convert": "^2.0.1"
}
},
"chalk": {
"version": "4.1.2",
"resolved": "https://registry.nlark.com/chalk/download/chalk-4.1.2.tgz?cache=0&sync_timestamp=1627646697260&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fchalk%2Fdownload%2Fchalk-4.1.2.tgz",
"integrity": "sha1-qsTit3NKdAhnrrFr8CqtVWoeegE=",
"dev": true,
"optional": true,
"requires": {
"ansi-styles": "^4.1.0",
"supports-color": "^7.1.0"
}
},
"color-convert": {
"version": "2.0.1",
"resolved": "https://registry.npm.taobao.org/color-convert/download/color-convert-2.0.1.tgz",
"integrity": "sha1-ctOmjVmMm9s68q0ehPIdiWq9TeM=",
"dev": true,
"optional": true,
"requires": {
"color-name": "~1.1.4"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npm.taobao.org/loader-utils/download/loader-utils-2.0.0.tgz",
"integrity": "sha1-5MrOW4FtQloWa18JfhDNErNgZLA=",
"dev": true,
"optional": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
}
}
},
"vue-router": {
"version": "3.4.6",
"resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.4.6.tgz?cache=0&sync_timestamp=1602077426782&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.4.6.tgz",
......
package.json
......@@ -23,6 +23,7 @@
"serve": "^12.0.0",
"tui-image-editor": "^3.15.0",
"vue": "^2.6.11",
"vue-bus": "^1.2.1",
"vue-clipboard2": "^0.3.1",
"vue-router": "^3.2.0",
"vue-wechat-title": "^2.0.7",
......
src/components/ImageEd.scss 0 → 100644
$sourceB: var(--sourceB, #055fe7); // #055FE7 // #D1D1D1
$targetB: var(--targetB, #d1d1d1);
$arrow: var(--arrow, url("../assets/img/zcedit/arrow.png"));
$arrow_rotate: var(--arrow_rotate, url("../assets/img/zcedit/arrow.png"));
* {
box-sizing: border-box;
}
// 画板********************************
// 画板******************************
div {
margin: 0;
padding: 0;
display: inline-block;
/*border: none;*/
}
.lt {
width: 100%;
background-color: #ffffff;
/*padding: 24px;*/
margin: 0;
padding: 0 24px 24px 24px;
display: flex;
flex-direction: column;
}
.lt_header {
height: 59px;
flex-grow: 1;
display: flex;
align-items: center;
border-bottom: 1px solid #eeeeee;
.title {
display: inline-block;
width: 352px;
margin-right: 16px;
font-size: 16px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #333333;
}
.center {
width: 1120px;
display: flex;
align-items: center;
.icon {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
&:active {
background: #055fe7;
}
}
.back {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 1px solid #aeb5c2;
}
.go {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
margin-right: 8px;
}
.drag,
.enlarge,
.size,
.download,
.line,
.history,
.rubber {
margin-right: 8px;
}
.rotate,
.screenshot,
.bzd {
margin-right: 40px;
}
.size,
.line {
&::after {
width: 10.25px;
height: 5.84px;
margin-left: 15px;
content: "";
background-image: url("../assets/img/zcedit/arrow.png");
background-position: center;
background-size: 10.25px 5.84px;
background-repeat: no-repeat;
}
}
.line_mix {
margin-right: 8px;
position: relative;
.icon_line {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
.line {
margin-right: 15px;
}
.arrow {
width: 10.25px;
height: 5.84px;
img {
object-fit: contain;
}
}
}
.lineOptions {
padding: 14px 24px;
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 240px;
height: 195px;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #e6e6e8;
.line_top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.line_left {
display: flex;
align-items: center;
span {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
margin-right: 10px;
}
.line_switch {
display: flex;
box-sizing: border-box;
width: 30px;
height: 16px;
/deep/.el-switch__core {
box-sizing: border-box;
width: 30px !important;
height: 16px;
&::after {
width: 16px;
height: 16px;
top: -1px;
}
}
}
}
.line_right {
cursor: pointer;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff3644;
}
}
.line_solid {
width: 192px;
height: 1px;
background: #e6e6e8;
}
.line_center {
margin-top: 5px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
.line_center_left {
display: flex;
align-items: center;
.straight_line {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
.straight_line_icon {
width: 30px;
height: 1px;
background-color: #333333;
margin-bottom: 10px;
}
.straight_line_name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
line-height: 19px;
}
}
.curve {
cursor: pointer;
margin-left: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.curve_icon {
margin-bottom: 10px;
width: 30px;
height: 1px;
background-color: #999;
}
.curve_name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
line-height: 19px;
}
}
}
.line_center_line {
width: 1px;
height: 40px;
background-color: #eeeeee;
}
.line_center_right {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.line_center_right_icon {
width: 20px;
height: 20px;
background: #000;
border-radius: 50%;
}
.line_center_right_name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
}
}
.line_dash {
box-sizing: border-box;
width: 192px;
height: 1px;
border: 1px dashed #e6e6e8;
}
.line_bottom {
margin-top: 10px;
display: flex;
justify-content: space-between;
align-items: center;
.line_bottom_item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
.line_bottom_item_icon {
box-sizing: border-box;
width: 30px;
height: 1px;
background-color: #999999;
margin-bottom: 10px;
}
.line_bottom_item_name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
}
.normal_icon {
background-color: #999;
}
.normal_name {
color: #999;
}
.thin_icon {
height: 2px;
}
.medium_icon {
height: 3px;
}
.bold_icon {
height: 4px;
}
}
.normalActiveIcon,
.thinActiveIcon,
.mediumActiveIcon,
.boldActiveIcon {
background-color: #333333 !important;
}
.normalActiveName,
.thinActiveName,
.mediumActiveName,
.boldActiveName {
color: #333333 !important;
}
}
}
}
.history_mix {
margin-right: 8px;
position: relative;
.icon_history {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 0;
}
}
.historyOptions {
padding: 14px 24px;
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 120px;
height: 160px;
overflow: auto;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #e6e6e8;
}
}
.clearConfirm {
z-index: 10;
position: absolute;
top: 50px;
right: 204px;
width: 300px;
height: 114px;
background: #ffffff;
box-shadow: 0px 18px 28px 10px rgba(0, 21, 51, 0.08);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 30px;
.tips {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
.btn-bottom {
margin-top: 17px;
display: flex;
.btn-confirm,
.btn-cancel {
cursor: pointer;
width: 72px;
height: 32px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #aeb5c2;
display: flex;
justify-content: center;
align-items: center;
&:hover {
background: #377fec;
color: #ffffff;
}
&:active {
background: #044cb9;
color: #ffffff;
}
}
.btn-confirm {
margin-right: 24px;
}
}
}
.tui-brush-color-picker {
z-index: 100;
background: #ffffff;
padding: 5px;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border: 1px solid #e6e6e8;
position: absolute;
right: 390px;
top: 97px;
}
.circle_mix {
margin-right: 8px;
position: relative;
width: 64px;
height: 32px;
.icon_circle {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
.circle {
margin-right: 15px;
}
.arrow {
width: 10.25px;
height: 5.84px;
img {
object-fit: contain;
}
}
}
.circleOptions {
padding: 14px 24px;
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 240px;
height: 194px;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #e6e6e8;
.circle_top {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
.circle_left {
display: flex;
align-items: center;
span {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
margin-right: 10px;
}
.circle_switch {
display: flex;
box-sizing: border-box;
width: 30px;
height: 16px;
/deep/.el-switch__core {
box-sizing: border-box;
width: 30px !important;
height: 16px;
&::after {
width: 16px;
height: 16px;
top: -1px;
}
}
}
}
.circle_right {
cursor: pointer;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #ff3644;
}
}
.circle_solid {
width: 192px;
height: 1px;
background: #e6e6e8;
}
.circle_size {
display: flex;
justify-content: space-between;
align-items: center;
.circle_size_item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
.item_top {
width: 20px;
height: 20px;
border: 1px solid #999999;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
.mr_size {
width: 6px;
height: 6px;
border-radius: 50%;
background: #e60012;
}
.samll_size {
width: 8px;
height: 8px;
border-radius: 50%;
background: #e60012;
}
.medium_size {
width: 10px;
height: 10px;
border-radius: 50%;
background: #e60012;
}
.big_size {
width: 12px;
height: 12px;
border-radius: 50%;
background: #e60012;
}
}
.item_name {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999999;
}
}
.mr_size_active,
.small_size_active,
.medium_size_active,
.big_size_active {
.item_top {
border: 1px solid #666;
}
.item_name {
color: #333333;
}
}
}
.circle_color {
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
.circle_color_top {
width: 20px;
height: 20px;
background: #e60012;
border-radius: 50%;
margin-left: 2px;
}
.circle_color_name {
width: 28px;
height: 19px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
}
}
}
.size_mix {
margin-right: 8px;
position: relative;
.icon_size {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
.size {
margin-right: 15px;
}
.arrow {
width: 10.25px;
height: 5.84px;
img {
object-fit: contain;
}
}
}
.sizeOptions {
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 120px;
height: 66px;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #e6e6e8;
div {
cursor: pointer;
width: 100%;
height: 32px;
line-height: 32px;
padding-left: 32px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
&.active {
background: #f5f5f7;
&::before {
content: "√";
margin-left: -20px;
margin-right: 9px;
font-size: 16px;
color: #000;
}
}
}
}
}
.rotate_mix {
margin-right: 40px;
position: relative;
.icon_rotate {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
}
.rotate {
margin-right: 15px;
}
.arrow {
width: 10.25px;
height: 5.84px;
img {
object-fit: contain;
}
}
}
.rotateOptions {
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 240px;
height: 237px;
background: #ffffff;
border-radius: 4px;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border: 1px solid #e6e6e8;
padding: 16px 25px;
.top {
width: 100%;
.rotate-top {
display: flex;
align-items: center;
.rotate_left {
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.rotate_icon {
width: 30px;
height: 30px;
img {
width: 30px;
height: 30px;
object-fit: contain;
}
}
.num {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
}
.rotate_right {
margin-left: 45px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.rotate_icon {
width: 30px;
height: 30px;
img {
width: 30px;
height: 30px;
object-fit: contain;
transform: rotateY(180deg);
}
}
.num {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
}
}
.rotate_bottom {
width: 100%;
.progress {
width: 100%;
#input-rotation-range {
width: 100%;
}
}
.desc {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.qj_v {
width: 40px;
height: 21px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #e6e9ec;
}
}
}
}
.line {
width: 192px;
height: 1px;
background: #e6e6e8;
margin: 16px 0;
}
.bottom {
display: flex;
.flap_x {
margin-right: 32px;
display: flex;
flex-direction: column;
align-items: center;
.flap_x_icon {
width: 28px;
height: 28px;
img {
object-fit: contain;
width: 28px;
height: 28px;
}
}
.flap_txt {
margin-top: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999;
}
}
.flap_y {
margin-right: 37px;
display: flex;
flex-direction: column;
align-items: center;
.flap_y_icon {
width: 28px;
height: 28px;
img {
object-fit: contain;
width: 28px;
height: 28px;
}
}
.flap_txt {
margin-top: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999;
}
}
.flap_line {
margin-right: 40px;
width: 1px;
height: 40px;
border: 1px solid #eeeeee;
}
.flap_reset {
display: flex;
flex-direction: column;
align-items: center;
.flap_reset_icon {
width: 28px;
height: 28px;
img {
object-fit: contain;
width: 28px;
height: 28px;
}
}
.flap_txt {
margin-top: 10px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #999;
}
}
.xActive,
.yActive,
.resetActive,
.leftRotateActive,
.rightRotateActive {
color: #333333 !important;
}
}
}
}
}
.right {
width: 352px;
margin-left: 16px;
}
}
.lt_main {
width: 100%;
display: flex;
flex-direction: row;
}
.lt_main_left {
width: 352px;
border: none;
// margin-right: 16px;
}
.lt_main_middle {
width: 100%;
display: flex;
flex-direction: column;
}
.lt_main_middle .lt_main_header {
height: 70px;
display: flex;
align-items: center;
justify-content: center;
.features {
cursor: pointer;
width: 40px;
height: 40px;
margin-right: 20px;
}
}
.lt_main_middle .lt_main_footer {
position: relative;
margin-top: 24px;
height: 70px;
width: 100%;
background: #f6f8fa;
border-radius: 8px;
display: flex;
align-items: center;
padding: 0 24px;
.btn {
cursor: pointer;
background: #f6f8fa;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-4px -4px 4px 0px #ffffff;
border-radius: 4px;
padding: 9px 12px;
margin-right: 16px;
&:last-child {
margin-right: 0;
}
&:active {
background: #055fe7;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-4px -4px 4px 0px #ffffff;
color: #ffffff;
}
}
.line {
width: 1px;
height: 40px;
background: #d8d8d8;
margin: 0 46px;
}
.grayActive,
.vintageActive,
.horseshoeMirrorActive,
.equalizationActive,
.sharpenActive,
.embossActive,
.invertActive,
.removeWhiteActive,
.colorFilterActive,
.multiplyActive,
.blendActive,
.brightnessActive {
background: #055fe7;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-4px -4px 4px 0px #ffffff;
color: #ffffff;
}
.remove-white,
.color-filter,
.multiply,
.blend,
.brightness {
box-sizing: border-box;
position: absolute;
top: -84px;
right: 59px;
width: 240px;
height: 82px;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border: 1px solid #e6e6e8;
padding: 17px 24px;
.title {
font-size: 14px;
font-family: MicrosoftYaHei;
color: #333333;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
.range-narrow {
width: 142px;
height: 3px;
}
.qb_v {
width: 34px;
height: 21px;
background: #ffffff;
border-radius: 2px;
border: 1px solid #e6e9ec;
}
}
}
.color-filter {
right: 315px;
}
.brightness {
right: 0;
}
.multiply {
right: 155px;
width: 200px;
right: 250px;
.content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
}
.blend {
width: 200px;
right: 250px;
.content {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
}
}
.lt_main_middle .lt_middle_main {
width: 100%;
height: 750px;
display: flex;
.source {
box-sizing: border-box;
width: 560px;
height: 750px;
margin-right: 16px;
background: #ffffff;
border-radius: 8px;
border: 2px solid $sourceB;
display: flex;
flex-direction: column;
.title {
font-size: 20px;
font-family: MicrosoftYaHei;
color: #333333;
margin: 16px 0 0 24px;
}
.edit {
width: 72px;
height: 32px;
background: #ddebff;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #055fe7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 60px 0 0 244px;
}
.drawing {
width: 520px;
height: 520px;
// background: rgba(0, 0, 0, 0.8);
margin-left: 14px;
margin-top: 60px;
.body-container {
width: 520px;
height: 520px;
display: flex;
.tui-image-editor2 {
width: 520px;
height: 520px;
}
}
}
}
.target {
box-sizing: border-box;
width: 560px;
height: 750px;
background: #ffffff;
border-radius: 8px;
border: 2px solid $targetB;
display: flex;
flex-direction: column;
.title {
font-size: 20px;
font-family: MicrosoftYaHei;
color: #333333;
margin: 16px 0 0 24px;
}
.edit {
width: 72px;
height: 32px;
background: #ddebff;
border-radius: 4px;
font-size: 14px;
font-family: MicrosoftYaHei;
color: #055fe7;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
margin: 60px 0 0 244px;
}
.drawing {
width: 520px;
height: 520px;
// background: rgba(0, 0, 0, 0.2);
margin-left: 14px;
margin-top: 60px;
.body-container {
width: 520px;
height: 520px;
display: flex;
.tui-image-editor2 {
width: 520px;
height: 520px;
}
}
}
}
}
.lt_main_right {
margin-left: 16px;
width: 352px;
border: none;
}
src/components/ImageEd.vue 0 → 100644
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-09-23 09:01:51
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
-->
<template>
<div class="lt">
<div class="lt_header">
<div class="center">
<el-tooltip class="item" effect="dark" content="撤销">
<div class="icon back disabled" id="btn-undo">
<img src="../assets/img/zcedit/back.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="恢复">
<div class="icon go disabled" id="btn-redo">
<img src="../assets/img/zcedit/go.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="移动">
<div class="icon drag" @click="hand">
<img v-if="!isHand" src="../assets/img/zcedit/drag.png" alt="">
<img v-else src="../assets/img/zcedit/drag_a.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="放大">
<div class="icon enlarge" @click="enlarge">
<img v-if="!isEnlarge" src="../assets/img/zcedit/enlarge.png" alt="">
<img v-else src="../assets/img/zcedit/enlarge_a.png" alt="">
</div>
</el-tooltip>
<div class="size_mix">
<div class="icon_size" @click="sizeChange">
<img class="size" v-if="!isActive" src="../assets/img/zcedit/size.png" alt="">
<img class="size" v-else src="../assets/img/zcedit/size_a.png" alt="">
<img class="arrow" v-if="!isActive" src="../assets/img/zcedit/arrow.png" alt="">
<img class="arrow" v-else src="../assets/img/zcedit/arrow_a.png" alt="">
</div>
<div class="sizeOptions" v-show="isOptions">
<div class="tong" @click="setOptions('tong')">同步操作</div>
<div class="yuan" @click="setOptions('yuan')">原尺寸显示</div>
</div>
</div>
<div class="rotate_mix">
<div class="icon_rotate" @click="rotateChange">
<img class="rotate" v-if="!isActive_rotate" src="../assets/img/zcedit/rotate.png" alt="">
<img class="rotate" v-else src="../assets/img/zcedit/rotate_a.png" alt="">
<img class="arrow" v-if="!isActive_rotate" src="../assets/img/zcedit/arrow.png" alt="">
<img class="arrow" v-else src="../assets/img/zcedit/arrow_a.png" alt="">
</div>
<div class="rotateOptions" v-show="isRotateOptions">
<div class="top">
<div class="rotate-top">
<div class="rotate_left" id="btn-rotate-clockwise">
<div class="rotate_icon">
<img v-if="!isLeftRotate" src="../assets/img/zcedit/left_rotate_d.png" alt="">
<img v-else src="../assets/img/zcedit/left_rotate_a.png" alt="">
</div>
<div class="num" :class="{leftRotateActive: isLeftRotate}">30</div>
</div>
<div class="rotate_right" id="btn-rotate-counter-clockwise">
<div class="rotate_icon">
<img v-if="!isRightRotate" src="../assets/img/zcedit/left_rotate_d.png" alt="">
<img v-else src="../assets/img/zcedit/left_rotate_a.png" alt="">
</div>
<div class="num" :class="{rightRotateActive: isRightRotate}">30</div>
</div>
</div>
<div class="rotate_bottom">
<div class="progress">
<input id="input-rotation-range" type="range" min="-360" :value="inputRotationRange" max="360" />
</div>
<div class="desc">
<div class="qj">区间</div>
<input class="qj_v" type="text" v-model="inputRotationRange">
</div>
</div>
</div>
<div class="line"></div>
<div class="bottom">
<div class="flap_x" id="btn-flip-x">
<div class="flap_x_icon">
<img v-if="!isX" src="../assets/img/zcedit/flap_x_d.png" alt="">
<img v-else src="../assets/img/zcedit/flap_x_a.png" alt="">
</div>
<div class="flap_txt" :class="{xActive: isX}">X轴</div>
</div>
<div class="flap_y" id="btn-flip-y">
<div class="flap_y_icon">
<img v-if="!isY" src="../assets/img/zcedit/flap_y_d.png" alt="">
<img v-else src="../assets/img/zcedit/flap_y_a.png" alt="">
</div>
<div class="flap_txt" :class="{yActive: isY}">Y轴</div>
</div>
<div class="flap_line"></div>
<div class="flap_reset" id="btn-reset-flip">
<div class="flap_reset_icon">
<img v-if="!isReset" src="../assets/img/zcedit/reset_d.png" alt="">
<img v-else src="../assets/img/zcedit/reset_a.png" alt="">
</div>
<div class="flap_txt" :class="{resetActive: isReset}">重置</div>
</div>
</div>
</div>
</div>
<el-tooltip class="item" effect="dark" content="下载">
<div class="icon download" id="btn-download">
<img src="../assets/img/zcedit/download.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="截屏">
<div class="icon screenshot" @click="screenshot">
<img src="../assets/img/zcedit/screenshot.png" alt="">
</div>
</el-tooltip>
<div class="icon bzd">
<img src="../assets/img/zcedit/bzd.png" alt="">
</div>
<div class="line_mix" @click="lineChange" id="btn-draw-line">
<div class="icon_line">
<img class="line" v-if="!isActive_line" src="../assets/img/zcedit/line.png" alt="">
<img class="line" v-else src="../assets/img/zcedit/line_a.png" alt="">
<img class="arrow" v-if="!isActive_line" src="../assets/img/zcedit/arrow.png" alt="">
<img class="arrow" v-else src="../assets/img/zcedit/arrow_a.png" alt="">
</div>
<div class="lineOptions" v-show="isLineOptions">
<div class="line_top">
<div class="line_left">
<span>隐藏辅助线</span>
<el-switch class="line_switch" v-model="isHideSubline" active-color="#055FE7">
</el-switch>
</div>
<div class="line_right" @click.stop="resetLines">重置</div>
</div>
<div class="line_solid"></div>
<div class="line_center">
<div class="line_center_left">
<div class="straight_line" name="select-line-type" data-val="lineDrawing" @click.stop="changeStraightLine">
<div class="straight_line_icon"></div>
<div class="straight_line_name">直线</div>
</div>
<div class="curve" name="select-line-type" data-val="freeDrawing" @click.stop="changeCurveLine">
<div class="curve_icon"></div>
<div class="curve_name">曲线</div>
</div>
</div>
<div class="line_center_line"></div>
<div class="line_center_right" @click.stop="openColorPicker">
<div class="line_center_right_icon"></div>
<div class="line_center_right_name">颜色</div>
</div>
</div>
<div class="line_dash"></div>
<div class="line_bottom">
<div class="line_bottom_item normal" id="normal" data-width="2" @click.stop="changeLineNormal">
<div class="line_bottom_item_icon normal_icon" :class="{normalActiveIcon: isNormalActiveIcon}"></div>
<div class="line_bottom_item_name normal_name" :class="{normalActiveName: isNormalActiveName}">默认</div>
</div>
<div class="line_bottom_item thin" id="thin" data-width="4" @click.stop="changeLineThin">
<div class="line_bottom_item_icon thin_icon" :class="{thinActiveIcon: isThinActiveIcon}"></div>
<div class="line_bottom_item_name" :class="{thinActiveName: isThinActiveName}">细</div>
</div>
<div class="line_bottom_item medium" id="medium" data-width="6" @click.stop="changeLineMedium">
<div class="line_bottom_item_icon medium_icon" :class="{mediumActiveIcon: isMediumActiveIcon}"></div>
<div class="line_bottom_item_name" :class="{mediumActiveName: isMediumActiveName}">中</div>
</div>
<div class="line_bottom_item bold" id="bold" data-width="8" @click.stop="changeLineBold">
<div class="line_bottom_item_icon bold_icon" :class="{boldActiveIcon: isBoldActiveIcon}"></div>
<div class="line_bottom_item_name" :class="{boldActiveName: isBoldActiveName}">粗</div>
</div>
</div>
</div>
</div>
<div v-show="isShowLineColor" id="tui-brush-color-picker" class="tui-brush-color-picker"></div>
<div class="circle_mix" @click="circleChange">
<div class="icon_circle">
<img class="circle" v-if="!isActive_circle" src="../assets/img/zcedit/circle.png" alt="">
<img class="circle" v-else src="../assets/img/zcedit/circle_a.png" alt="">
<img class="arrow" v-if="!isActive_circle" src="../assets/img/zcedit/arrow.png" alt="">
<img class="arrow" v-else src="../assets/img/zcedit/arrow_a.png" alt="">
</div>
<div class="circleOptions" v-show="isCircleOptions">
<div class="circle_top">
<div class="circle_left">
<span>隐藏标记点</span>
<el-switch class="circle_switch" v-model="isHideMarkPoint" active-color="#055FE7">
</el-switch>
</div>
<div class="circle_right">重置</div>
</div>
<div class="circle_solid"></div>
<div class="circle_size">
<div class="circle_size_item" @click.stop="changSizeMr" :class="{mr_size_active: isMrSizeActive}">
<div class="item_top">
<div class="mr_size"></div>
</div>
<div class="item_name">默认</div>
</div>
<div class="circle_size_item" @click.stop="changSizeSmall" :class="{small_size_active: isSmallSizeActive}">
<div class="item_top">
<div class="samll_size"></div>
</div>
<div class="item_name">小</div>
</div>
<div class="circle_size_item" @click.stop="changSizeMedium" :class="{medium_size_active: isMediumSizeActive}">
<div class="item_top">
<div class="medium_size"></div>
</div>
<div class="item_name">中</div>
</div>
<div class="circle_size_item" @click.stop="changSizeBig" :class="{big_size_active: isBigSizeActive}">
<div class="item_top">
<div class="big_size"></div>
</div>
<div class="item_name">大</div>
</div>
</div>
<div class="circle_solid"></div>
<div class="circle_color">
<div class="circle_color_top"></div>
<div class="circle_color_name">颜色</div>
</div>
</div>
</div>
<div class="history_mix" @click="historyChange">
<div class="icon_history">
<img class="history" v-if="!isActive_history" src="../assets/img/zcedit/history.png" alt="">
<img class="history" v-else src="../assets/img/zcedit/history_a.png" alt="">
</div>
<div class="historyOptions" v-show="isHistoryOptions">
<div class="history_item" v-for="(item, index) in historys" :key="index">
<div class="item_left">
<div class="look">√</div>
</div>
<div class="item_right">{{item}}</div>
</div>
</div>
</div>
<el-tooltip class="item" effect="dark" content="橡皮擦">
<div class="icon rubber">
<img src="../assets/img/zcedit/rubber.png" alt="">
</div>
</el-tooltip>
<el-tooltip class="item" effect="dark" content="清空">
<div class="icon clear" @click="clearChange">
<img v-if="!isActive_clear" src="../assets/img/zcedit/clear.png" alt="">
<img v-else src="../assets/img/zcedit/clear_a.png" alt="">
</div>
</el-tooltip>
<div class="clearConfirm" v-show="isShowClearDialog">
<div class="tips">确认要清空操作吗？该操作无法撤消！</div>
<div class="btn-bottom">
<div class="btn-confirm" @click="delPic">确认</div>
<div class="btn-cancel" @click="cancelPic">取消</div>
</div>
</div>
</div>
<div class="right"></div>
</div>
<div class="lt_main">
<div class="lt_main_middle">
<div class="lt_main_header">
<div class="features features1">
<img src="../assets/img/zcedit/features1.png" alt="">
</div>
<div class="features features2">
<img src="../assets/img/zcedit/features2.png" alt="">
</div>
<div class="features features3">
<img src="../assets/img/zcedit/features3.png" alt="">
</div>
<div class="features features4">
<img src="../assets/img/zcedit/features4.png" alt="">
</div>
<div class="features features5">
<img src="../assets/img/zcedit/features5.png" alt="">
</div>
<div class="features features6">
<img src="../assets/img/zcedit/features6.png" alt="">
</div>
</div>
<div class="lt_middle_main">
<div class="source" @click="sourceEdit">
<div class="title">源数据</div>
<div class="drawing">
<div class="body-container">
<div class="tui-image-editor"></div>
</div>
</div>
<div class="edit" id="sourceEdit">编辑</div>
</div>
<div class="target" @click="targetEdit">
<div class="title">目标数据</div>
<div class="drawing">
<div class="body-container">
<div class="tui-image-editor2"></div>
</div>
</div>
<div class="edit" id="targetEdit">编辑</div>
</div>
</div>
<div class="lt_main_footer">
<div class="btn" :class="{grayActive: isGrayActive}" @click="changeGray">灰度</div>
<div class="btn" :class="{vintageActive: isVintageActive}" @click="changeVintage">棕褐色</div>
<div class="btn" :class="{horseshoeMirrorActive: isHorseshoeMirrorActive}" @click="changeHorseshoeMirror">马蹄镜</div>
<div class="btn" :class="{equalizationActive: isEqualizationActive}" @click="changeEqualization">均衡化</div>
<div class="btn" :class="{sharpenActive: isSharpenActive}" @click="changeSharpen">锐化</div>
<div class="btn" :class="{embossActive: isEmbossActive}" @click="changeEmboss">浮雕</div>
<div class="btn" :class="{invertActive: isInvertActive}" @click="changeInvert">反相</div>
<div class="line"></div>
<div class="btn" :class="{colorFilterActive: isColorFilterActive}" @click="changeColorFilter">滤色器</div>
<div class="btn" :class="{blendActive: isBlendActive}" @click="changeBlend">差异化</div>
<div class="btn" :class="{multiplyActive: isMultiplyActive}" @click="changeMultiply">正片叠底</div>
<div class="btn" :class="{removeWhiteActive: isRemoveWhiteActive}" @click="changeRemoveWhite">去白</div>
<div class="btn" :class="{brightnessActive: isBrightnessActive}" @click="changeBrightness">亮度</div>
<!-- 去白弹框 -->
<div class="remove-white" v-show="optionsRemoveWhite">
<div class="title">去白</div>
<div class="content">
<input class="range-narrow" id="input-range-remove-white-distance" type="range" min="0" :value="inputRemoveWhiteRange" max="255" />
<input class="qb_v" type="text" v-model="inputRemoveWhiteRange">
</div>
</div>
<!-- 滤色器弹框 -->
<div class="color-filter" v-show="optionsColorFilter">
<div class="title">滤色器</div>
<div class="content">
<input class="range-narrow" id="input-range-color-filter-value" type="range" min="0" :value="inputColorFilterRange" max="255" />
<input class="qb_v" type="text" v-model="inputColorFilterRange">
</div>
</div>
<!-- 正片叠底弹框 -->
<div class="multiply" v-show="optionsMultiply">
<div class="content">
<div id="tui-multiply-color-picker"></div>
</div>
</div>
<!-- 差异化弹框 -->
<div class="blend" v-show="optionsBlend">
<div class="content">
<div id="tui-blend-color-picker"></div>
</div>
</div>
<!-- 亮度弹框 -->
<div class="brightness" v-show="optionsBrightness">
<div class="title">亮度</div>
<div class="content">
<input class="range-narrow" id="input-range-brightness-value" type="range" min="-255" :value="inputBrightnessRange" max="255" />
<input class="qb_v" type="text" v-model="inputBrightnessRange">
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
// 截屏
import html2canvas from 'html2canvas';
// import LTSrc from "./modules/LTSrc.vue";
// import LTCandidate from "./modules/LTCandidate.vue";
export default {
// 正查 倒查 查重
name: "LT",
data () {
return {
imageEditor: null,
imageEditor2: null,
// 是否是小手
isHand: false,
// 是否放大
isEnlarge: false,
// 目标是否放大
isEnlarge2: false,
// 放大的倍数
zoomLevel: 1,
// 目标放大的倍数
zoomLevel2: 1,
isOptions: false,
// 是否点击
isActive: false,
// 是否是点击状态
isActive_rotate: false,
// 是否展示旋转的下拉框
isRotateOptions: false,
// 旋转的度数
inputRotationRange: 0,
// 旋转的度数--target
inputRotationRange2: 0,
// 是否是X轴翻转
isX: false,
// 是否是Y轴翻转
isY: false,
// 是否是重置
isReset: false,
// 是否是左旋转
isLeftRotate: false,
// 是否是右旋转
isRightRotate: false,
// 是否选中线条
isActive_line: false,
// 是否打开线条的下拉框
isLineOptions: false,
// 是否隐藏辅助线
isHideSubline: true,
// 是否展示画笔颜色选择
isShowLineColor: false,
// 线条样式切换
isNormalActiveIcon: true,
isNormalActiveName: true,
isThinActiveIcon: false,
isThinActiveName: false,
isMediumActiveIcon: false,
isMediumActiveName: false,
isBoldActiveIcon: false,
isBoldActiveName: false,
// 辅助线的id数组
lines: [],
// 是否点击了圆标记
isActive_circle: false,
// 是否展示园标记弹出框
isCircleOptions: false,
// 是否隐藏标记点
isHideMarkPoint: false,
// 大小切换
isMrSizeActive: true,
isSmallSizeActive: false,
isMediumSizeActive: false,
isBigSizeActive: false,
// 是否点击了清空按钮
isActive_clear: false,
// 是否展示清空操作提示按钮
isShowClearDialog: false,
// 是否选择了灰度
isGrayActive: false,
// 是否选择了棕褐色
isVintageActive: false,
// 是否选择了马蹄镜
isHorseshoeMirrorActive: false,
// 是否选择了均衡化
isEqualizationActive: false,
// 是否选择了锐化
isSharpenActive: false,
// 是否选择了浮雕
isEmbossActive: false,
// 是否选择了反向
isInvertActive: false,
// 是否选择了去除白色
isRemoveWhiteActive: false,
// 去白值
inputRemoveWhiteRange: 10,
// 去白值--target
inputRemoveWhiteRange2: 10,
// 是否展示去白下拉框
optionsRemoveWhite: false,
// 滤色器选项框
optionsColorFilter: false,
// 是否选择了滤色器
isColorFilterActive: false,
// 滤色器色值
inputColorFilterRange: 45,
// 滤色器色值---target
inputColorFilterRange2: 45,
// 是否选择了正片叠底
isMultiplyActive: false,
// 是否展示正片叠底框
optionsMultiply: false,
// 是否选择了差异化
isBlendActive: false,
// 是否展示差异化下拉框
optionsBlend: false,
// 是否选择了亮度
isBrightnessActive: false,
// 亮度
inputBrightnessRange: 100,
// 亮度 --- target
inputBrightnessRange2: 100,
// 是否展示亮度弹窗
optionsBrightness: false,
// 源数据/目标数据切换
type: 'source',
imgFile: require('../assets/img/img.png'),
historys: [],
// 是否展示历史下拉框
isHistoryOptions: false,
// 是否点击了历史
isActive_history: false
};
},
components: {
// LTSrc,
// LTCandidate,
},
mounted () {
console.log($('#normal')[0].dataset.width);
let self = this
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var activeObjectId;
// Buttons
var $btns = $('.menu-item');
var $btnsActivatable = $btns.filter('.activatable');
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
var $btnUndo = $('#btn-undo');
var $btnRedo = $('#btn-redo');
var $btnDrawLine = $('#btn-draw-line');
var $btnFlipX = $('#btn-flip-x');
var $btnFlipY = $('#btn-flip-y');
var $btnResetFlip = $('#btn-reset-flip');
var $btnRotateClockwise = $('#btn-rotate-clockwise');
var $btnRotateCounterClockWise = $('#btn-rotate-counter-clockwise');
// Input etc.
var $inputRotationRange = $('#input-rotation-range');
var $inputFontSizeRange = $('#input-font-size-range');
var $inputRangeRemoveWhiteDistance = $('#input-range-remove-white-distance');
var $inputRangeBrightnessValue = $('#input-range-brightness-value');
var $inputCheckBlend = $('#input-check-blend');
var $inputRangeColorFilterValue = $('#input-range-color-filter-value');
var $imageFilterSubMenu = $('#image-filter-sub-menu');
// Select line type
var $selectLine = $('[name="select-line-type"]');
// Image editor
var imageEditor = null
var imageEditor2 = null
// if (self.type == 'source') {
// imageEditor = new tui.ImageEditor('.tui-image-editor', {
// cssMaxWidth: 520,
// cssMaxHeight: 520,
// selectionStyle: {
// cornerSize: 20,
// rotatingPointOffset: 70,
// },
// });
// this.imageEditor = imageEditor
// } else {
// imageEditor = new tui.ImageEditor('.tui-image-editor2', {
// cssMaxWidth: 520,
// cssMaxHeight: 520,
// selectionStyle: {
// cornerSize: 20,
// rotatingPointOffset: 70,
// },
// });
// this.imageEditor = imageEditor
// }
// imageEditor2.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
// imageEditor.clearUndoStack();
// });
imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: 520,
cssMaxHeight: 520,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
},
});
this.imageEditor = imageEditor
imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
});
imageEditor2 = new tui.ImageEditor('.tui-image-editor2', {
cssMaxWidth: 520,
cssMaxHeight: 520,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
},
});
this.imageEditor2 = imageEditor2
imageEditor2.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor2.clearUndoStack();
});
/*
$('#sourceEdit').on('click', function () {
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#055FE7');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#D1D1D1');
imageEditor.destroy()
imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: 520,
cssMaxHeight: 520,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
},
});
self.imageEditor = imageEditor
imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
});
})
$('#targetEdit').on('click', function () {
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#D1D1D1');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#055FE7');
imageEditor.destroy()
imageEditor = new tui.ImageEditor('.tui-image-editor2', {
cssMaxWidth: 520,
cssMaxHeight: 520,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
},
});
self.imageEditor = imageEditor
imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
});
})
*/
// Color picker for free drawing
// 笔刷颜色选择器
var brushColorpicker = tui.colorPicker.create({
container: $('#tui-brush-color-picker')[0],
color: '#000000',
});
// 正片叠底颜色选择器
var multiplyColorpicker = tui.colorPicker.create({
container: $('#tui-multiply-color-picker')[0],
color: '#7cafc2',
});
this.multiplyColorpicker = multiplyColorpicker
// 差异化颜色选择器
var blendColorpicker = tui.colorPicker.create({
container: $('#tui-blend-color-picker')[0],
color: '#00FF00',
});
this.blendColorpicker = blendColorpicker
function resizeEditor () {
var $editor = $('.tui-image-editor');
var $container = $('.tui-image-editor-canvas-container');
var height = parseFloat($container.css('max-height'));
$editor.height(height);
}
function getBrushSettings () {
var brushWidth = parseInt($('#normal')[0].dataset.width, 10);
var brushColor = brushColorpicker.getColor();
return {
width: brushWidth,
color: hexToRGBa(brushColor, 0.5),
};
}
// HEX to RGBA
function hexToRGBa (hex, alpha) {
var r = parseInt(hex.slice(1, 3), 16);
var g = parseInt(hex.slice(3, 5), 16);
var b = parseInt(hex.slice(5, 7), 16);
var a = alpha || 1;
return 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')';
}
function base64ToBlob (data) {
var mimeString = '';
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function (header, imageType) {
mimeString = imageType;
return '';
});
raw = atob(raw);
rawLength = raw.length;
uInt8Array = new Uint8Array(rawLength); // eslint-disable-line
for (i = 0; i < rawLength; i += 1) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], { type: mimeString });
}
function applyOrRemoveFilter (applying, type, options) {
if (applying) {
imageEditor.applyFilter(type, options).then(function (result) {
console.log(result);
});
} else {
imageEditor.removeFilter(type);
}
}
function applyOrRemoveFilter2 (applying, type, options) {
if (applying) {
imageEditor2.applyFilter(type, options).then(function (result) {
console.log(result);
});
} else {
imageEditor2.removeFilter(type);
}
}
// Attach image editor custom events
imageEditor.on({
objectAdded: function (objectProps) {
console.info(objectProps);
if (objectProps.type == 'line') {
self.lines.push(objectProps.id)
}
self.historys.push(objectProps.type)
console.log(111);
},
undoStackChanged: function (length) {
if (length) {
$btnUndo.removeClass('disabled');
} else {
$btnUndo.addClass('disabled');
}
resizeEditor();
},
redoStackChanged: function (length) {
if (length) {
$btnRedo.removeClass('disabled');
} else {
$btnRedo.addClass('disabled');
}
resizeEditor();
},
objectScaled: function (obj) {
if (obj.type === 'text') {
$inputFontSizeRange.val(obj.fontSize);
}
},
addText: function (pos) {
imageEditor
.addText('Double Click', {
position: pos.originPosition,
})
.then(function (objectProps) {
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();
}
},
mousedown: function (event, originPointer) {
if ($imageFilterSubMenu.is(':visible') && imageEditor.hasFilter('colorFilter')) {
imageEditor.applyFilter('colorFilter', {
x: parseInt(originPointer.x, 10),
y: parseInt(originPointer.y, 10),
});
}
},
});
imageEditor2.on({
objectAdded: function (objectProps) {
console.info(objectProps);
if (objectProps.type == 'line') {
self.lines.push(objectProps.id)
}
},
undoStackChanged: function (length) {
if (length) {
$btnUndo.removeClass('disabled2');
} else {
$btnUndo.addClass('disabled2');
}
resizeEditor();
},
redoStackChanged: function (length) {
if (length) {
$btnRedo.removeClass('disabled2');
} else {
$btnRedo.addClass('disabled2');
}
resizeEditor();
},
objectScaled: function (obj) {
if (obj.type === 'text') {
$inputFontSizeRange.val(obj.fontSize);
}
},
addText: function (pos) {
imageEditor2
.addText('Double Click', {
position: pos.originPosition,
})
.then(function (objectProps) {
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();
}
},
mousedown: function (event, originPointer) {
if ($imageFilterSubMenu.is(':visible') && imageEditor2.hasFilter('colorFilter')) {
imageEditor2.applyFilter('colorFilter', {
x: parseInt(originPointer.x, 10),
y: parseInt(originPointer.y, 10),
});
}
},
});
// 撤回
$btnUndo.on('click', function () {
console.log('撤销');
if (self.type == 'source') {
if (!$(this).hasClass('disabled')) {
imageEditor.discardSelection();
imageEditor.undo();
}
} else {
if (!$(this).hasClass('disabled2')) {
imageEditor2.discardSelection();
imageEditor2.undo();
}
}
});
// 恢复
$btnRedo.on('click', function () {
console.log('恢复');
if (self.type == 'source') {
if (!$(this).hasClass('disabled')) {
imageEditor.discardSelection();
imageEditor.redo();
}
} else {
if (!$(this).hasClass('disabled2')) {
imageEditor2.discardSelection();
imageEditor2.redo();
}
}
});
// 放大
$('.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
})
}
if (self.isEnlarge2) {
self.zoomLevel2 = self.zoomLevel2 + 1
if (self.zoomLevel2 == 4) {
self.zoomLevel2 = 3
}
imageEditor2.zoom({
x: top,
y: left,
zoomLevel: self.zoomLevel2
})
}
})
// 下载
$btnDownload.on('click', function () {
if (self.type == 'source') {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += '.' + type;
}
// Library: FileSaver - saveAs
saveAs(blob, imageName); // eslint-disable-line
} else {
alert('This browser needs a file-server');
w = window.open();
w.document.body.innerHTML = '<img src="' + dataURL + '">';
}
} else {
var imageName = imageEditor.getImageName();
var dataURL = imageEditor.toDataURL();
var blob, type, w;
if (supportingFileAPI) {
blob = base64ToBlob(dataURL);
type = blob.type.split('/')[1];
if (imageName.split('.').pop() !== type) {
imageName += '.' + type;
}
// Library: FileSaver - saveAs
saveAs(blob, imageName); // eslint-disable-line
} else {
alert('This browser needs a file-server');
w = window.open();
w.document.body.innerHTML = '<img src="' + dataURL + '">';
}
}
});
// 沿X轴翻转
$btnFlipX.on('click', function () {
console.log(111);
if (self.type == 'source') {
self.isX = true
self.isY = false
self.isReset = false
imageEditor.flipX().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
} else {
self.isX = true
self.isY = false
self.isReset = false
imageEditor2.flipX().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
}
});
// 沿Y轴翻转
$btnFlipY.on('click', function () {
if (self.type == 'source') {
self.isX = false
self.isY = true
self.isReset = false
imageEditor.flipY().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
} else {
self.isX = false
self.isY = true
self.isReset = false
imageEditor2.flipY().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
}
});
// 重置
$btnResetFlip.on('click', function () {
if (self.type == 'source') {
self.isX = false
self.isY = false
self.isReset = true
imageEditor.resetFlip().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
} else {
self.isX = false
self.isY = false
self.isReset = true
imageEditor2.resetFlip().then(function (status) {
console.log('flipX: ', status.flipX);
console.log('flipY: ', status.flipY);
console.log('angle: ', status.angle);
});
}
});
// 向左旋转30°
$btnRotateClockwise.on('click', function () {
if (self.type == 'source') {
self.isLeftRotate = true
self.isRightRotate = false
imageEditor.rotate(30);
} else {
self.isLeftRotate = true
self.isRightRotate = false
imageEditor2.rotate(30);
}
});
// 向右旋转30°
$btnRotateCounterClockWise.on('click', function () {
if (self.type == 'source') {
self.isLeftRotate = false
self.isRightRotate = true
imageEditor.rotate(-30);
} else {
self.isLeftRotate = false
self.isRightRotate = true
imageEditor2.rotate(-30);
}
});
// 滑动旋转事件
$inputRotationRange.on('mousedown', function () {
var changeAngle = function () {
if (self.type == 'source') {
self.inputRotationRange = parseInt($inputRotationRange.val(), 10)
imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
} else {
self.inputRotationRange2 = parseInt($inputRotationRange.val(), 10)
imageEditor2.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
}
};
$(document).on('mousemove', changeAngle);
$(document).on('mouseup', function stopChangingAngle () {
$(document).off('mousemove', changeAngle);
$(document).off('mouseup', stopChangingAngle);
});
});
// 滑动旋转事件
$inputRotationRange.on('change', function () {
if (self.type == 'source') {
self.inputRotationRange = parseInt($inputRotationRange.val(), 10)
imageEditor.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
} else {
self.inputRotationRange2 = parseInt($inputRotationRange.val(), 10)
imageEditor2.setAngle(parseInt($inputRotationRange.val(), 10))['catch'](function () { });
}
});
// 划线事件
$btnDrawLine.on('click', function () {
if (self.type == 'source') {
imageEditor.stopDrawingMode();
} else {
imageEditor2.stopDrawingMode();
}
$selectLine.eq(0).change();
});
// 线条模式
$selectLine.on('click', function () {
var mode = $(this)[0].dataset.val;
var settings = getBrushSettings();
if (self.type == 'source') {
imageEditor.stopDrawingMode();
if (mode === 'freeDrawing') {
imageEditor.startDrawingMode('FREE_DRAWING', settings);
} else {
imageEditor.startDrawingMode('LINE_DRAWING', settings);
}
} else {
imageEditor2.stopDrawingMode();
if (mode === 'freeDrawing') {
imageEditor2.startDrawingMode('FREE_DRAWING', settings);
} else {
imageEditor2.startDrawingMode('LINE_DRAWING', settings);
}
}
});
// 线条模式
$selectLine.on('change', function () {
var mode = $(this)[0].dataset.val;
var settings = getBrushSettings();
if (self.type == 'source') {
imageEditor.stopDrawingMode();
if (mode === 'freeDrawing') {
imageEditor.startDrawingMode('FREE_DRAWING', settings);
} else {
imageEditor.startDrawingMode('LINE_DRAWING', settings);
}
if (!self.isLineOptions) {
imageEditor.stopDrawingMode();
}
} else {
imageEditor2.stopDrawingMode();
if (mode === 'freeDrawing') {
imageEditor2.startDrawingMode('FREE_DRAWING', settings);
} else {
imageEditor2.startDrawingMode('LINE_DRAWING', settings);
}
if (!self.isLineOptions) {
imageEditor2.stopDrawingMode();
}
}
});
// 改变颜色
brushColorpicker.on('selectColor', function (event) {
if (self.type == 'source') {
imageEditor.setBrush({
color: hexToRGBa(event.color, 0.5),
});
$('.line_center_right_icon').css('background', hexToRGBa(event.color))
} else {
imageEditor2.setBrush({
color: hexToRGBa(event.color, 0.5),
});
$('.line_center_right_icon').css('background', hexToRGBa(event.color))
}
});
// 滑动条去除白色
$inputRangeRemoveWhiteDistance.on('change', function () {
if (self.type == 'source') {
self.inputRemoveWhiteRange = this.value
applyOrRemoveFilter(true, 'removeColor', {
distance: parseInt(this.value, 10) / 255,
});
} else {
self.inputRemoveWhiteRange2 = this.value
applyOrRemoveFilter2(true, 'removeColor', {
distance: parseInt(this.value, 10) / 255,
});
}
});
// 滑动条滤色
$inputRangeColorFilterValue.on('change', function () {
if (type == 'source') {
self.inputColorFilterRange = this.value
applyOrRemoveFilter(true, 'removeColor', {
distance: this.value / 255,
});
} else {
self.inputColorFilterRange2 = this.value
applyOrRemoveFilter2(true, 'removeColor', {
distance: this.value / 255,
});
}
});
// 正片叠底
multiplyColorpicker.on('selectColor', function (e) {
applyOrRemoveFilter(true, 'blendColor', {
color: e.color,
});
});
$inputCheckBlend.on('change', function () {
applyOrRemoveFilter(this.checked, 'blendColor', {
mode: $selectBlendType.val(),
color: blendColorpicker.getColor(),
});
});
// 差异化
blendColorpicker.on('selectColor', function (e) {
applyOrRemoveFilter(true, 'blendColor', {
color: e.color,
});
});
// 亮度
$inputRangeBrightnessValue.on('change', function () {
if (self.type == 'source') {
self.inputBrightnessRange = this.value
applyOrRemoveFilter(true, 'brightness', {
brightness: parseInt(this.value, 10) / 255,
});
} else {
self.inputBrightnessRange = this.value
applyOrRemoveFilter2(true, 'brightness', {
brightness: parseInt(this.value, 10) / 255,
});
}
});
// Etc..
// Load sample image
// imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
// imageEditor.clearUndoStack();
// });
// IE9 Unselectable
$('.menu').on('selectstart', function () {
return false;
});
/***换图片 */
/*
$('#huantu').on('click', function() {
imageEditor2.loadImageFromURL('img/xz.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor2.clearUndoStack();
});
})
*/
this.$bus.on('changImageEdit', (sourceImage) => {
imageEditor.loadImageFromURL('data:image/jpeg;base64,' + sourceImage, 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
imageEditor.clearUndoStack();
});
})
this.$bus.on('changImageEditTarget', (targetImage) => {
imageEditor2.loadImageFromURL('data:image/jpeg;base64,' + targetImage, 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
imageEditor2.clearUndoStack();
});
})
},
methods: {
/**
* @description: 历史记录
* @param {*}
* @return {*}
*/
historyChange () {
this.imageEditor._initHistory()
console.log(this.imageEditor);
console.log(this.historys);
this.imageEditor.undo(this.historys.length)
},
/**
* @description: 亮度
* @param {*}
* @return {*}
*/
changeBrightness () {
let self = this
this.isBrightnessActive = !this.isBrightnessActive
if (this.isBrightnessActive) {
this.optionsBrightness = true
if (self.type == 'source') {
this.imageEditor.applyFilter('brightness', {
brightness: parseInt(self.inputBrightnessRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('brightness', {
brightness: parseInt(self.inputBrightnessRange2, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsBrightness = false
if (self.type == 'source') {
this.imageEditor.removeFilter('brightness');
} else {
this.imageEditor2.removeFilter('brightness');
}
}
},
/**
* @description: 差异化
* @param {*}
* @return {*}
*/
changeBlend () {
let self = this
this.isBlendActive = !this.isBlendActive
if (this.isBlendActive) {
this.optionsBlend = true
if (self.type == 'source') {
this.imageEditor.applyFilter('blendColor', {
mode: 'diff',
color: self.blendColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('blendColor', {
mode: 'diff',
color: self.blendColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsBlend = false
if (self.type == 'source') {
this.imageEditor.removeFilter('blendColor');
} else {
this.imageEditor2.removeFilter('blendColor');
}
}
},
/**
* @description: 正片叠底
* @param {*}
* @return {*}
*/
changeMultiply () {
let self = this
this.isMultiplyActive = !this.isMultiplyActive
if (this.isMultiplyActive) {
this.optionsMultiply = true
if (self.type == 'source') {
this.imageEditor.applyFilter('blendColor', {
color: self.multiplyColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('blendColor', {
color: self.multiplyColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsMultiply = false
if (self.type == 'source') {
this.imageEditor.removeFilter('blendColor');
} else {
this.imageEditor2.removeFilter('blendColor');
}
}
},
/**
* @description: 滤色器
* @param {*}
* @return {*}
*/
changeColorFilter () {
let self = this
this.isColorFilterActive = !this.isColorFilterActive
if (this.isColorFilterActive) {
this.optionsColorFilter = true
if (self.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
distance: self.inputColorFilterRange / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
color: '#FFFFFF',
distance: self.inputColorFilterRange2 / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsColorFilter = false
if (self.type == 'source') {
this.imageEditor.removeFilter('removeColor');
} else {
this.imageEditor2.removeFilter('removeColor');
}
}
},
/**
* @description: 去除白色
* @param {*}
* @return {*}
*/
changeRemoveWhite () {
let self = this
this.isRemoveWhiteActive = !this.isRemoveWhiteActive
if (this.isRemoveWhiteActive) {
this.optionsRemoveWhite = true
if (self.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
color: '#FFFFFF',
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange2, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsRemoveWhite = false
if (self.type == 'source') {
this.imageEditor.removeFilter('removeColor');
} else {
this.imageEditor2.removeFilter('removeColor');
}
}
},
/**
* @description: 反向
* @param {*}
* @return {*}
*/
changeInvert () {
this.isInvertActive = !this.isInvertActive
if (this.isInvertActive) {
if (this.type == 'source') {
this.imageEditor.applyFilter('Invert', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Invert', null).then(function (result) {
console.log(result);
});
}
} else {
if (this.type == 'source') {
this.imageEditor.removeFilter('Invert');
} else {
this.imageEditor2.removeFilter('Invert');
}
}
},
/**
* @description: 浮雕
* @param {*}
* @return {*}
*/
changeEmboss () {
this.isEmbossActive = !this.isEmbossActive
if (this.isEmbossActive) {
if (this.type == 'source') {
this.imageEditor.applyFilter('Emboss', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Emboss', null).then(function (result) {
console.log(result);
});
}
} else {
if (this.type == 'source') {
this.imageEditor.removeFilter('Emboss');
} else {
this.imageEditor2.removeFilter('Emboss');
}
}
},
/**
* @description: 锐化
* @param {*}
* @return {*}
*/
changeSharpen () {
this.isSharpenActive = !this.isSharpenActive
if (this.isSharpenActive) {
if (this.type == 'source') {
this.imageEditor.applyFilter('Sharpen', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Sharpen', null).then(function (result) {
console.log(result);
});
}
} else {
if (this.type == 'source') {
this.imageEditor.removeFilter('Sharpen');
} else {
this.imageEditor2.removeFilter('Sharpen');
}
}
},
/**
* @description: 均衡化
* @param {*}
* @return {*}
*/
changeEqualization () {
this.isEqualizationActive = !this.isEqualizationActive
},
/**
* @description: 马蹄镜
* @param {*}
* @return {*}
*/
changeHorseshoeMirror () {
this.isHorseshoeMirrorActive = !this.isHorseshoeMirrorActive
// if (this.isHorseshoeMirrorActive) {
// this.imageEditor.applyFilter('vintage', null).then(function (result) {
// console.log(result);
// });
// } else {
// this.imageEditor.removeFilter('vintage');
// }
},
/**
* @description: 棕褐色
* @param {*}
* @return {*}
*/
changeVintage () {
let self = this
this.isVintageActive = !this.isVintageActive
if (this.isVintageActive) {
if (self.type == 'source') {
this.imageEditor.applyFilter('vintage', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('vintage', null).then(function (result) {
console.log(result);
});
}
} else {
if (self.type == 'source') {
this.imageEditor.removeFilter('vintage');
} else {
this.imageEditor2.removeFilter('vintage');
}
}
},
/**
* @description: 灰度
* @param {*}
* @return {*}
*/
changeGray () {
let self = this
this.isGrayActive = !this.isGrayActive
if (this.isGrayActive) {
if (self.type == 'source') {
this.imageEditor.applyFilter('Grayscale', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Grayscale', null).then(function (result) {
console.log(result);
});
}
} else {
if (self.type == 'source') {
this.imageEditor.removeFilter('Grayscale');
} else {
this.imageEditor2.removeFilter('Grayscale');
}
}
},
/**
* @description: 取消删除按钮
* @param {*}
* @return {*}
*/
cancelPic () {
this.isActive_clear = false
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
},
/**
* @description: 确认删除按钮
* @param {*}
* @return {*}
*/
delPic () {
this.isActive_clear = false
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
if (this.type == 'source') {
this.imageEditor.clearObjects();
} else {
this.imageEditor2.clearObjects();
}
this.$message.success('删除成功！')
},
/**
* @description: 清空
* @param {*}
* @return {*}
*/
clearChange () {
this.isActive_clear = !this.isActive_clear
if (this.isActive_clear) {
$('.clear').css('background', '#055FE7')
this.isShowClearDialog = true
} else {
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
}
},
/**
* @description: 设置为大
* @param {*}
* @return {*}
*/
changSizeBig () {
this.isMrSizeActive = false
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = true
},
/**
* @description: 设置为中
* @param {*}
* @return {*}
*/
changSizeMedium () {
this.isMrSizeActive = false
this.isSmallSizeActive = false
this.isMediumSizeActive = true
this.isBigSizeActive = false
},
/**
* @description: 设置为小
* @param {*}
* @return {*}
*/
changSizeSmall () {
this.isMrSizeActive = false
this.isSmallSizeActive = true
this.isMediumSizeActive = false
this.isBigSizeActive = false
},
/**
* @description: 设置为默认大小
* @param {*}
* @return {*}
*/
changSizeMr () {
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
},
/**
* @description: 是否展示标记下拉框
* @param {*}
* @return {*}
*/
circleChange () {
this.isMrSizeActive = true
this.isSmallSizeActive = false
this.isMediumSizeActive = false
this.isBigSizeActive = false
this.isActive_circle = !this.isActive_circle
this.isCircleOptions = !this.isCircleOptions
if (this.isActive_circle) {
$('.icon_circle').css('background', '#055FE7')
} else {
$('.icon_circle').css('background', 'rgba(5, 95, 231, 0.05)')
}
},
/**
* @description: 重置线条---方法不管用
* @param {*}
* @return {*}
*/
resetLines () {
let self = this
self.lines.forEach(element => {
self.imageEditor.removeObject(element)
});
console.log(self.lines);
},
/**
* @description: 切换为曲线
* @param {*}
* @return {*}
*/
changeCurveLine () {
$('.straight_line_icon').css('background-color', '#999')
$('.straight_line_name').css('color', '#999')
$('.curve_icon').css('background-color', '#333')
$('.curve_name').css('color', '#333')
},
/**
* @description: 切换为直线
* @param {*}
* @return {*}
*/
changeStraightLine () {
$('.straight_line_icon').css('background-color', '#333')
$('.straight_line_name').css('color', '#333')
$('.curve_icon').css('background-color', '#999')
$('.curve_name').css('color', '#999')
},
/**
* @description: 改变为粗线条粗细
* @param {*}
* @return {*}
*/
changeLineBold () {
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(8, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(8, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = true
this.isBoldActiveName = true
},
/**
* @description: 改变为中等线条粗细
* @param {*}
* @return {*}
*/
changeLineMedium () {
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(6, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(6, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = true
this.isMediumActiveName = true
this.isBoldActiveIcon = false
this.isBoldActiveName = false
},
/**
* @description: 改变为细线条粗细
* @param {*}
* @return {*}
*/
changeLineThin () {
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(4, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(4, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = true
this.isThinActiveName = true
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
},
/**
* @description: 改变为正常线条粗细
* @param {*}
* @return {*}
*/
changeLineNormal () {
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(2, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(2, 10) });
}
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
this.isThinActiveName = false
this.isMediumActiveIcon = false
this.isMediumActiveName = false
this.isBoldActiveIcon = false
this.isBoldActiveName = false
},
/**
* @description: 启动划线
* @param {*}
* @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 {*}
* @return {*}
*/
screenshot () {
html2canvas(
document.querySelector('.lt'),
{
backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
useCORS: true,//支持图片跨域
scale: 1,//设置放大的倍数
}
).then(canvas => {
// 截图用img元素承装，显示在页面的上
let img = new Image();
img.src = canvas.toDataURL('image/jpeg');// toDataURL :图片格式转成 base64
// document.getElementById('test').appendChild(img);
// 使用a标签进行下载
let a = document.createElement('a');
a.href = canvas.toDataURL('image/jpeg');
a.download = 'screenshot';
a.click();
})
},
/**
* @description: 打开旋转操作
* @param {*}
* @return {*}
*/
rotateChange () {
// 是否是X轴翻转
this.isX = false
// 是否是Y轴翻转
this.isY = false
// 是否是重置
this.isReset = false
// 是否是左旋转
this.isLeftRotate = false
// 是否是右旋转
this.isRightRotate = false
this.isActive_rotate = !this.isActive_rotate
this.isRotateOptions = !this.isRotateOptions
if (this.isActive_rotate) {
$('.icon_rotate').css('background', '#055FE7')
} else {
$('.icon_rotate').css('background', 'rgba(5, 95, 231, 0.05)')
}
},
/**
* @description: 打开同步操作/原尺寸显示
* @param {*}
* @return {*}
*/
sizeChange () {
this.isOptions = !this.isOptions
this.isActive = !this.isActive
if (this.isActive) {
$('.icon_size').css('background', '#055FE7')
} else {
$('.icon_size').css('background', 'rgba(5, 95, 231, 0.05)')
}
},
/**
* @description: 设置同步操作/原始尺寸显示
* @param {*} opt
* @return {*}
*/
setOptions (opt) {
if (this.type == 'source') {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
} else {
$('.tong').addClass('active')
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge = false
$('.drag').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)')
}
}
} else {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
} else {
$('.tong').addClass('active')
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
} else {
$('.yuan').addClass('active')
this.imageEditor2.resetZoom()
this.imageEditor2.changeCursor('auto');
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
}
}
}
},
/**
* @description: 鼠标变小手
* @param {*}
* @return {*}
*/
hand () {
console.log(this.imageEditor);
console.log(this.imageEditor.ui);
console.log(555);
this.imageEditor.stopDrawingMode();
this.imageEditor2.stopDrawingMode();
this.isHand = !this.isHand
if (this.isHand) {
$('.drag').css('background', '#055FE7')
this.imageEditor.changeCursor('grab');
this.imageEditor2.changeCursor('grab');
} else {
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor.changeCursor('auto');
this.imageEditor2.changeCursor('auto');
}
},
/**
* @description: 放大
* @param {*}
* @return {*}
*/
enlarge () {
console.log('放大');
if (this.type == 'source') {
this.isEnlarge = !this.isEnlarge
if (this.isEnlarge) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor.changeCursor('zoom-in');
} else {
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor.changeCursor('auto');
}
} else {
this.isEnlarge2 = !this.isEnlarge2
if (this.isEnlarge2) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor2.changeCursor('zoom-in');
} else {
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor2.changeCursor('auto');
}
}
},
/**
* @description: 切换源
* @param {*}
* @return {*}
*/
sourceEdit () {
this.type = 'source'
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#055FE7');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#D1D1D1');
},
/**
* @description: 切换目标
* @param {*}
* @return {*}
*/
targetEdit () {
this.type = 'target'
document.getElementsByTagName('body')[0].style.setProperty('--sourceB', '#D1D1D1');
document.getElementsByTagName('body')[0].style.setProperty('--targetB', '#055FE7');
},
},
watch: {
inputRotationRange (newValue, oldValue) {
this.imageEditor.setAngle(newValue)['catch'](function () { });
},
inputRotationRange2 (newValue, oldValue) {
this.imageEditor2.setAngle(newValue)['catch'](function () { });
},
inputRemoveWhiteRange (newValue, oldValue) {
if (this.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
},
inputColorFilterRange (newValue, oldValue) {
if (this.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
},
inputBrightnessRange (newValue, oldValue) {
if (this.type == 'source') {
this.imageEditor.applyFilter('brightness', {
brightness: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('brightness', {
brightness: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
},
},
};
</script>
<style scoped lang="scss">
@import "./ImageEd.scss";
</style>
src/main.js
/*
* @Author: your name
* @Date: 2021-09-07 14:39:52
* @LastEditTime: 2021-09-22 15:58:14
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\main.js
*/
import Vue from "vue";
import "./plugins/axios";
import App from "./App.vue";
......@@ -12,6 +20,7 @@ import "driver.js/dist/driver.min.css";
import "./assets/css/global.css";
import "./assets/css/el-table-style.css";
import VueClipboard from "vue-clipboard2";
import VueBus from 'vue-bus';
Vue.prototype.$driver = new Driver({
className: "scoped-class", // className to wrap driver.js popover
......@@ -35,6 +44,7 @@ Vue.prototype.$util = Util;
window.util = Util;
Vue.use(VueWechatTitle);
Vue.use(VueClipboard);
Vue.use(VueBus);
Vue.directive("nsLoading", {
bind(el, binding) {
......
src/views/cxyrd/LT.vue
......@@ -12,9 +12,10 @@
<l-t-src :src-data="srcDataList"></l-t-src>
</div>
<div class="lt_main_middle">
<div class="lt_main_header">顶部工具</div>
<!-- <div class="lt_main_header">顶部工具</div>
<div class="lt_middle_main">中部指纹编辑</div>
<div class="lt_main_footer">底部工具</div>
<div class="lt_main_footer">底部工具</div> -->
<ImageEd></ImageEd>
</div>
<div class="lt_main_right">
<l-t-candidate></l-t-candidate>
......@@ -26,26 +27,29 @@
<script>
import LTSrc from "./modules/LTSrc.vue";
import LTCandidate from "./modules/LTCandidate.vue";
import ImageEd from "../../components/ImageEd.vue"
export default {
// 正查 倒查 查重
name: "LT",
components: {
LTSrc,
LTCandidate
LTCandidate,
ImageEd
},
data() {
data () {
return {
srcDataList: null
};
},
created() {
created () {
this.srcDataList = this.$route.query.rowData;
console.info("源数据src====>", this.srcDataList);
console.log("源数据src====>", this.srcDataList);
console.log(this.srcDataList.barcode);
}
};
</script>
<style scoped>
<style scoped lang="scss">
div {
margin: 0;
padding: 0;
......@@ -85,12 +89,13 @@ div {
.lt_main_left {
width: 352px;
border: none;
margin-right: 16px;
/* margin-right: 16px; */
}
.lt_main_middle {
width: 1120px;
display: flex;
flex-direction: column;
margin-top: -59px;
}
.lt_main_middle .lt_main_header {
height: 70px;
......@@ -113,4 +118,10 @@ div {
.lt_main_footer {
border: 1px saddlebrown solid;
}
/deep/ .current-row {
td {
background: #F5F5F7 !important;
}
}
</style>
src/views/cxyrd/LTz.scss
......@@ -246,7 +246,7 @@ div {
.line_center_right_icon {
width: 20px;
height: 20px;
background: #ffaa00;
background: #000;
border-radius: 50%;
}
.line_center_right_name {
......@@ -316,6 +316,40 @@ div {
}
}
}
.history_mix {
margin-right: 8px;
position: relative;
.icon_history {
width: 64px;
height: 32px;
background: rgba(5, 95, 231, 0.05);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
img {
width: 20px;
height: 20px;
object-fit: contain;
margin-right: 0;
}
}
.historyOptions {
padding: 14px 24px;
z-index: 1;
position: absolute;
top: 35px;
left: 0;
width: 120px;
height: 160px;
overflow: auto;
background: #ffffff;
box-shadow: 0px 6px 10px 2px rgba(0, 21, 51, 0.06);
border-radius: 4px;
border: 1px solid #e6e6e8;
}
}
.clearConfirm {
z-index: 10;
position: absolute;
......@@ -883,7 +917,11 @@ div {
-4px -4px 4px 0px #ffffff;
color: #ffffff;
}
.remove-white, .color-filter, .multiply, .blend, .brightness {
.remove-white,
.color-filter,
.multiply,
.blend,
.brightness {
box-sizing: border-box;
position: absolute;
top: -84px;
......
src/views/cxyrd/LTz.vue
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-09-17 09:24:00
* @LastEditTime: 2021-09-22 09:44:27
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
......@@ -226,11 +226,20 @@
</div>
</div>
</div>
<el-tooltip class="item" effect="dark" content="历史记录">
<div class="icon history">
<img src="../../assets/img/zcedit/history.png" alt="">
<div class="history_mix" @click="historyChange">
<div class="icon_history">
<img class="history" v-if="!isActive_history" src="../../assets/img/zcedit/history.png" alt="">
<img class="history" v-else src="../../assets/img/zcedit/history_a.png" alt="">
</div>
</el-tooltip>
<div class="historyOptions" v-show="isHistoryOptions">
<div class="history_item" v-for="(item, index) in historys" :key="index">
<div class="item_left">
<div class="look">√</div>
</div>
<div class="item_right">{{item}}</div>
</div>
</div>
</div>
<el-tooltip class="item" effect="dark" content="橡皮擦">
<div class="icon rubber">
<img src="../../assets/img/zcedit/rubber.png" alt="">
......@@ -285,7 +294,7 @@
<div class="tui-image-editor"></div>
</div>
</div>
<div class="edit" id="sourceEdit">编辑</div>
<div class="edit" id="sourceEdit" @click="sourceEdit">编辑</div>
</div>
<div class="target">
<div class="title">目标数据</div>
......@@ -294,7 +303,7 @@
<div class="tui-image-editor2"></div>
</div>
</div>
<div class="edit" id="targetEdit">编辑</div>
<div class="edit" id="targetEdit" @click="targetEdit">编辑</div>
</div>
</div>
<div class="lt_main_footer">
......@@ -481,7 +490,12 @@ export default {
optionsBrightness: false,
// 源数据/目标数据切换
type: 'source',
imgFile: require('../../assets/img/img.png')
imgFile: require('../../assets/img/img.png'),
historys: [],
// 是否展示历史下拉框
isHistoryOptions: true,
// 是否点击了历史
isActive_history: false
};
},
components: {
......@@ -493,6 +507,7 @@ export default {
let self = this
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var activeObjectId;
// Buttons
var $btns = $('.menu-item');
......@@ -708,6 +723,8 @@ export default {
if (objectProps.type == 'line') {
self.lines.push(objectProps.id)
}
self.historys.push(objectProps.type)
console.log(111);
},
undoStackChanged: function (length) {
if (length) {
......@@ -1178,7 +1195,7 @@ export default {
// 亮度
$inputRangeBrightnessValue.on('change', function () {
if(type == 'source') {
if (type == 'source') {
self.inputBrightnessRange = this.value
} else {
self.inputBrightnessRange2 = this.value
......@@ -1192,10 +1209,10 @@ export default {
// Etc..
// Load sample image
imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
});
// imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
// imageEditor.clearUndoStack();
// });
// IE9 Unselectable
$('.menu').on('selectstart', function () {
......@@ -1215,6 +1232,17 @@ export default {
},
methods: {
/**
* @description: 历史记录
* @param {*}
* @return {*}
*/
historyChange () {
this.imageEditor._initHistory()
console.log(this.imageEditor);
console.log(this.historys);
this.imageEditor.undo(this.historys.length)
},
/**
* @description: 亮度
* @param {*}
* @return {*}
......@@ -1224,14 +1252,26 @@ export default {
this.isBrightnessActive = !this.isBrightnessActive
if (this.isBrightnessActive) {
this.optionsBrightness = true
this.imageEditor.applyFilter('brightness', {
brightness: parseInt(self.inputBrightnessRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('brightness', {
brightness: parseInt(self.inputBrightnessRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('brightness', {
brightness: parseInt(self.inputBrightnessRange2, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsBrightness = false
this.imageEditor.removeFilter('brightness');
if (self.type == 'source') {
this.imageEditor.removeFilter('brightness');
} else {
this.imageEditor2.removeFilter('brightness');
}
}
},
/**
......@@ -1244,15 +1284,28 @@ export default {
this.isBlendActive = !this.isBlendActive
if (this.isBlendActive) {
this.optionsBlend = true
this.imageEditor.applyFilter('blendColor', {
mode: 'diff',
color: self.blendColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('blendColor', {
mode: 'diff',
color: self.blendColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('blendColor', {
mode: 'diff',
color: self.blendColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsBlend = false
this.imageEditor.removeFilter('blendColor');
if (self.type == 'source') {
this.imageEditor.removeFilter('blendColor');
} else {
this.imageEditor2.removeFilter('blendColor');
}
}
},
/**
......@@ -1265,14 +1318,26 @@ export default {
this.isMultiplyActive = !this.isMultiplyActive
if (this.isMultiplyActive) {
this.optionsMultiply = true
this.imageEditor.applyFilter('blendColor', {
color: self.multiplyColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('blendColor', {
color: self.multiplyColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('blendColor', {
color: self.multiplyColorpicker.getColor(),
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsMultiply = false
this.imageEditor.removeFilter('blendColor');
if (self.type == 'source') {
this.imageEditor.removeFilter('blendColor');
} else {
this.imageEditor2.removeFilter('blendColor');
}
}
},
/**
......@@ -1281,18 +1346,32 @@ export default {
* @return {*}
*/
changeColorFilter () {
let self = this
this.isColorFilterActive = !this.isColorFilterActive
if (this.isColorFilterActive) {
this.optionsColorFilter = true
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
distance: self.inputColorFilterRange / 255,
}).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
distance: self.inputColorFilterRange / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
color: '#FFFFFF',
distance: self.inputColorFilterRange2 / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsColorFilter = false
this.imageEditor.removeFilter('removeColor');
if (self.type == 'source') {
this.imageEditor.removeFilter('removeColor');
} else {
this.imageEditor2.removeFilter('removeColor');
}
}
},
/**
......@@ -1301,19 +1380,34 @@ export default {
* @return {*}
*/
changeRemoveWhite () {
let self = this
this.isRemoveWhiteActive = !this.isRemoveWhiteActive
if (this.isRemoveWhiteActive) {
this.optionsRemoveWhite = true
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('removeColor', {
color: '#FFFFFF',
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange, 10) / 255,
}).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('removeColor', {
color: '#FFFFFF',
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange2, 10) / 255,
}).then(function (result) {
console.log(result);
});
}
} else {
this.optionsRemoveWhite = false
this.imageEditor.removeFilter('removeColor');
if (self.type == 'source') {
this.imageEditor.removeFilter('removeColor');
} else {
this.imageEditor2.removeFilter('removeColor');
}
}
},
/**
......@@ -1324,11 +1418,22 @@ export default {
changeInvert () {
this.isInvertActive = !this.isInvertActive
if (this.isInvertActive) {
this.imageEditor.applyFilter('Invert', null).then(function (result) {
console.log(result);
});
if (this.type == 'source') {
this.imageEditor.applyFilter('Invert', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Invert', null).then(function (result) {
console.log(result);
});
}
} else {
this.imageEditor.removeFilter('Invert');
if (this.type == 'source') {
this.imageEditor.removeFilter('Invert');
} else {
this.imageEditor2.removeFilter('Invert');
}
}
},
/**
......@@ -1339,11 +1444,21 @@ export default {
changeEmboss () {
this.isEmbossActive = !this.isEmbossActive
if (this.isEmbossActive) {
this.imageEditor.applyFilter('Emboss', null).then(function (result) {
console.log(result);
});
if (this.type == 'source') {
this.imageEditor.applyFilter('Emboss', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Emboss', null).then(function (result) {
console.log(result);
});
}
} else {
this.imageEditor.removeFilter('Emboss');
if (this.type == 'source') {
this.imageEditor.removeFilter('Emboss');
} else {
this.imageEditor2.removeFilter('Emboss');
}
}
},
/**
......@@ -1354,11 +1469,21 @@ export default {
changeSharpen () {
this.isSharpenActive = !this.isSharpenActive
if (this.isSharpenActive) {
this.imageEditor.applyFilter('Sharpen', null).then(function (result) {
console.log(result);
});
if (this.type == 'source') {
this.imageEditor.applyFilter('Sharpen', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Sharpen', null).then(function (result) {
console.log(result);
});
}
} else {
this.imageEditor.removeFilter('Sharpen');
if (this.type == 'source') {
this.imageEditor.removeFilter('Sharpen');
} else {
this.imageEditor2.removeFilter('Sharpen');
}
}
},
/**
......@@ -1390,13 +1515,24 @@ export default {
* @return {*}
*/
changeVintage () {
let self = this
this.isVintageActive = !this.isVintageActive
if (this.isVintageActive) {
this.imageEditor.applyFilter('vintage', null).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('vintage', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('vintage', null).then(function (result) {
console.log(result);
});
}
} else {
this.imageEditor.removeFilter('vintage');
if (self.type == 'source') {
this.imageEditor.removeFilter('vintage');
} else {
this.imageEditor2.removeFilter('vintage');
}
}
},
/**
......@@ -1405,13 +1541,24 @@ export default {
* @return {*}
*/
changeGray () {
let self = this
this.isGrayActive = !this.isGrayActive
if (this.isGrayActive) {
this.imageEditor.applyFilter('Grayscale', null).then(function (result) {
console.log(result);
});
if (self.type == 'source') {
this.imageEditor.applyFilter('Grayscale', null).then(function (result) {
console.log(result);
});
} else {
this.imageEditor2.applyFilter('Grayscale', null).then(function (result) {
console.log(result);
});
}
} else {
this.imageEditor.removeFilter('Grayscale');
if (self.type == 'source') {
this.imageEditor.removeFilter('Grayscale');
} else {
this.imageEditor2.removeFilter('Grayscale');
}
}
},
/**
......@@ -1433,6 +1580,11 @@ export default {
this.isActive_clear = false
$('.clear').css('background', 'rgba(5, 95, 231, 0.05)')
this.isShowClearDialog = false
if (this.type == 'source') {
this.imageEditor.clearObjects();
} else {
this.imageEditor2.clearObjects();
}
this.$message.success('删除成功！')
},
/**
......@@ -1552,7 +1704,11 @@ export default {
* @return {*}
*/
changeLineBold () {
this.imageEditor.setBrush({ width: parseInt(8, 10) });
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(8, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(8, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = false
......@@ -1568,7 +1724,11 @@ export default {
* @return {*}
*/
changeLineMedium () {
this.imageEditor.setBrush({ width: parseInt(6, 10) });
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(6, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(6, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = false
......@@ -1584,7 +1744,11 @@ export default {
* @return {*}
*/
changeLineThin () {
this.imageEditor.setBrush({ width: parseInt(4, 10) });
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(4, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(4, 10) });
}
this.isNormalActiveIcon = false
this.isNormalActiveName = false
this.isThinActiveIcon = true
......@@ -1600,7 +1764,11 @@ export default {
* @return {*}
*/
changeLineNormal () {
this.imageEditor.setBrush({ width: parseInt(2, 10) });
if (this.type == 'source') {
this.imageEditor.setBrush({ width: parseInt(2, 10) });
} else {
this.imageEditor2.setBrush({ width: parseInt(2, 10) });
}
this.isNormalActiveIcon = true
this.isNormalActiveName = true
this.isThinActiveIcon = false
......@@ -1629,6 +1797,7 @@ export default {
if (!this.isLineOptions) {
this.isShowLineColor = false
this.imageEditor.stopDrawingMode();
this.imageEditor2.stopDrawingMode();
console.log(777);
} else {
// $selectLine.click()
......@@ -1716,23 +1885,45 @@ export default {
* @return {*}
*/
setOptions (opt) {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
} else {
$('.tong').addClass('active')
if (this.type == 'source') {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
} else {
$('.tong').addClass('active')
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge = false
$('.drag').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)')
}
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge = false
$('.drag').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)')
} else {
if (opt == 'tong') {
if ($('.tong').hasClass('active')) {
$('.tong').removeClass('active')
} else {
$('.tong').addClass('active')
}
} else if (opt == 'yuan') {
if ($('.yuan').hasClass('active')) {
$('.yuan').removeClass('active')
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
} else {
$('.yuan').addClass('active')
this.imageEditor2.resetZoom()
this.imageEditor2.changeCursor('auto');
this.isEnlarge2 = false
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
}
}
}
},
......@@ -1746,13 +1937,16 @@ export default {
console.log(this.imageEditor.ui);
console.log(555);
this.imageEditor.stopDrawingMode();
this.imageEditor2.stopDrawingMode();
this.isHand = !this.isHand
if (this.isHand) {
$('.drag').css('background', '#055FE7')
this.imageEditor.changeCursor('grab');
this.imageEditor2.changeCursor('grab');
} else {
$('.drag').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor.changeCursor('auto');
this.imageEditor2.changeCursor('auto');
}
},
/**
......@@ -1762,13 +1956,24 @@ export default {
*/
enlarge () {
console.log('放大');
this.isEnlarge = !this.isEnlarge
if (this.isEnlarge) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor.changeCursor('zoom-in');
if (this.type == 'source') {
this.isEnlarge = !this.isEnlarge
if (this.isEnlarge) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor.changeCursor('zoom-in');
} else {
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor.changeCursor('auto');
}
} else {
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor.changeCursor('auto');
this.isEnlarge2 = !this.isEnlarge2
if (this.isEnlarge2) {
$('.enlarge').css('background', '#055FE7')
this.imageEditor2.changeCursor('zoom-in');
} else {
$('.enlarge').css('background', 'rgba(5, 95, 231, 0.05)')
this.imageEditor2.changeCursor('auto');
}
}
},
/**
......@@ -1796,6 +2001,9 @@ export default {
inputRotationRange (newValue, oldValue) {
this.imageEditor.setAngle(newValue)['catch'](function () { });
},
inputRotationRange2 (newValue, oldValue) {
this.imageEditor2.setAngle(newValue)['catch'](function () { });
},
inputRemoveWhiteRange (newValue, oldValue) {
this.imageEditor.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
......@@ -1803,6 +2011,13 @@ export default {
console.log(result);
});
},
inputRemoveWhiteRange2 (newValue, oldValue) {
this.imageEditor2.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
},
inputColorFilterRange (newValue, oldValue) {
this.imageEditor.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
......@@ -1810,6 +2025,13 @@ export default {
console.log(result);
});
},
inputColorFilterRange2 (newValue, oldValue) {
this.imageEditor2.applyFilter('removeColor', {
distance: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
},
inputBrightnessRange (newValue, oldValue) {
this.imageEditor.applyFilter('brightness', {
brightness: parseInt(newValue, 10) / 255,
......@@ -1817,6 +2039,13 @@ export default {
console.log(result);
});
},
inputBrightnessRange2 (newValue, oldValue) {
this.imageEditor2.applyFilter('brightness', {
brightness: parseInt(newValue, 10) / 255,
}).then(function (result) {
console.log(result);
});
},
},
};
</script>
......
src/views/cxyrd/QueryConfirm.vue
......@@ -8,63 +8,33 @@
<div class="width100 margin_top24_bottom24">
<div class="display_style">
<span>条码号：</span>
<el-input
class="el_input"
v-model="reqParam.contrastCustomSearchReq.barcode"
placeholder="请输入条码号"
></el-input>
<el-input class="el_input" v-model="reqParam.contrastCustomSearchReq.barcode" placeholder="请输入条码号"></el-input>
</div>
<div class="display_style">
<span>用户ID：</span>
<el-select
class="el_select"
v-model="reqParam.contrastCustomSearchReq.userid"
@change="selectUserInfo"
>
<el-option
v-for="item in userOption"
:key="item.userid"
:label="item.userdesc"
:value="item.userid"
>
<el-select class="el_select" v-model="reqParam.contrastCustomSearchReq.userid" @change="selectUserInfo">
<el-option v-for="item in userOption" :key="item.userid" :label="item.userdesc" :value="item.userid">
</el-option>
</el-select>
</div>
<div class="display_style">
<span>查询ID：</span>
<el-input
class="el_input"
placeholder="请输入查询ID"
v-model="reqParam.contrastCustomSearchReq.qid"
></el-input>
<el-input class="el_input" placeholder="请输入查询ID" v-model="reqParam.contrastCustomSearchReq.qid"></el-input>
</div>
<div class="display_style">
<span>任务号：</span>
<el-input
class="el_input"
placeholder="请输入任务号"
v-model="reqParam.contrastCustomSearchReq.qqid"
></el-input>
<el-input class="el_input" placeholder="请输入任务号" v-model="reqParam.contrastCustomSearchReq.qqid"></el-input>
</div>
<div class="display_style">
<span>发送时间：</span>
<el-date-picker
v-model="startEndDate"
class="el_data_picker"
type="daterange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
>
<el-date-picker v-model="startEndDate" class="el_data_picker" type="daterange" range-separator="-" start-placeholder="开始时间" end-placeholder="结束时间">
</el-date-picker>
</div>
<div class="display_style">
<el-dropdown trigger="click">
<span class="el-dropdown-link">
更多<i
class="el-icon-arrow-down
el-icon--right"
></i>
更多<i class="el-icon-arrow-down
el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>更多1</el-dropdown-item>
......@@ -99,9 +69,7 @@
<el-button type="text" @click="getRemoteFlag()">国家库</el-button>
</div>
<div class="display_style">
<el-checkbox
><span>显示"{{ account }}"发查询用户查询</span></el-checkbox
>
<el-checkbox><span>显示"{{ account }}"发查询用户查询</span></el-checkbox>
</div>
</div>
<div class="width100 margin_top24_bottom24 display_style">
......@@ -129,60 +97,24 @@
<div class="display_style">
<el-breadcrumb separator-class="el-icon-arrow-right">
<el-breadcrumb-item>全部数据</el-breadcrumb-item>
<el-breadcrumb-item
>共找到{{ reqParam.page.total }}条</el-breadcrumb-item
>
<el-breadcrumb-item>共找到{{ reqParam.page.total }}条</el-breadcrumb-item>
</el-breadcrumb>
</div>
<div class="display_style confirm_main_button">
<el-button>自定义列</el-button>
<el-button
v-clipboard:copy="barcode"
@click="getBarcode"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
>复制条码</el-button
>
<el-button v-clipboard:copy="barcode" @click="getBarcode" v-clipboard:success="onCopy" v-clipboard:error="onError">复制条码</el-button>
<el-button @click="delMore">删除</el-button>
<!-- <el-button>发查询</el-button>-->
</div>
</div>
<div class="confirm_main_table">
<el-table
class="mineral-table"
border
@selection-change="handleSelectionChange"
height="490"
ref="confirmTable"
tooltip-effect="dark"
:data="list"
>
<el-table class="mineral-table" border @selection-change="handleSelectionChange" height="490" ref="confirmTable" tooltip-effect="dark" :data="list">
<el-table-column type="selection" height width="60"></el-table-column>
<el-table-column
prop="qid"
label="任务号"
width="70"
></el-table-column>
<el-table-column
prop="qqid"
label="查询号"
width="70"
></el-table-column>
<el-table-column
prop="barcode"
label="源号码号"
width="235"
></el-table-column>
<el-table-column
prop="maxcandidatecnt"
label="候选个数"
width="90"
></el-table-column>
<el-table-column
prop="queryStateName"
label="状态"
width="100"
></el-table-column>
<el-table-column prop="qid" label="任务号" width="70"></el-table-column>
<el-table-column prop="qqid" label="查询号" width="70"></el-table-column>
<el-table-column prop="barcode" label="源号码号" width="235"></el-table-column>
<el-table-column prop="maxcandidatecnt" label="候选个数" width="90"></el-table-column>
<el-table-column prop="queryStateName" label="状态" width="100"></el-table-column>
<el-table-column prop="querytype" label="查询类型" width="100">
<template scope="scope">
<div v-if="scope.row.querytype == '3'" style="color: #DD9D02">
......@@ -199,68 +131,24 @@
</div>
</template>
</el-table-column>
<el-table-column
prop="hitpossibility"
label="查重概率"
width="100"
></el-table-column>
<el-table-column
prop="queryclass"
label="优先级"
sortable
width="100"
:formatter="queryClassFormat"
></el-table-column>
<el-table-column
:formatter="dateTimeFormat"
prop="affirmtime"
label="认定时间"
sortable
width="200"
></el-table-column>
<el-table-column
:formatter="dateTimeFormat"
prop="requestdatetime"
label="发送时间"
sortable
width="200"
></el-table-column>
<el-table-column
prop="userdesc"
label="用户ID"
width="100"
></el-table-column>
<el-table-column prop="hitpossibility" label="查重概率" width="100"></el-table-column>
<el-table-column prop="queryclass" label="优先级" sortable width="100" :formatter="queryClassFormat"></el-table-column>
<el-table-column :formatter="dateTimeFormat" prop="affirmtime" label="认定时间" sortable width="200"></el-table-column>
<el-table-column :formatter="dateTimeFormat" prop="requestdatetime" label="发送时间" sortable width="200"></el-table-column>
<el-table-column prop="userdesc" label="用户ID" width="100"></el-table-column>
<el-table-column width="140" label="操作">
<template slot-scope="scope">
<el-button
@click="edit(scope.row)"
type="text"
style="font-size:24px"
><i>
<img style="width:16px;height:16px" :src="editUrl" alt /> </i
></el-button>
<el-button
@click="delOne(scope.row.qqid)"
type="text"
style="font-size:24px"
><i>
<img style="width:16px;height:16px" :src="delUrl" alt /> </i
></el-button>
<el-button @click="edit(scope.row)" type="text" style="font-size:24px"><i>
<img style="width:16px;height:16px" :src="editUrl" alt /> </i></el-button>
<el-button @click="delOne(scope.row.qqid)" type="text" style="font-size:24px"><i>
<img style="width:16px;height:16px" :src="delUrl" alt /> </i></el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
<div class="confirm_footer_page">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrPageChange"
:current-page="reqParam.page.currPage"
:page-sizes="[10, 20, 50, 100, 500]"
:page-size="reqParam.page.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="reqParam.page.total"
>
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrPageChange" :current-page="reqParam.page.currPage" :page-sizes="[10, 20, 50, 100, 500]" :page-size="reqParam.page.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="reqParam.page.total">
</el-pagination>
</div>
</div>
......@@ -271,7 +159,7 @@ import moment from "moment";
export default {
name: "QueryConfirm",
data() {
data () {
return {
reqParam: {
page: {
......@@ -309,7 +197,7 @@ export default {
},
methods: {
// 获取认定列表
search() {
search () {
this.getParam();
console.info("请求===>", this.reqParam);
this.$axios
......@@ -327,7 +215,7 @@ export default {
});
},
// 格式化参数
getParam() {
getParam () {
if (this.startEndDate !== null) {
this.reqParam.contrastCustomSearchReq.sendTimeStart = moment(
this.startEndDate[0]
......@@ -338,11 +226,11 @@ export default {
}
},
// 选择用户下拉框变化时 当前页为1
selectUserInfo() {
selectUserInfo () {
this.reqParam.page.currPage = 1;
},
// 获取用户信息
getUserInfo(val) {
getUserInfo (val) {
var userInfo = [];
val.forEach((item, index) => {
var user = {};
......@@ -354,7 +242,7 @@ export default {
console.info("用户信息==>", this.userOption);
},
// 用户信息去重
unique(arr) {
unique (arr) {
// 需要唯一标识来对数组进行过滤
// 定义常量res，值为一个map对象实例
const res = new Map();
......@@ -365,32 +253,32 @@ export default {
);
},
// 多条件查询 获取查询类型
getQueryType(val) {
getQueryType (val) {
this.reqParam.contrastCustomSearchReq.querytype = val;
this.search();
},
// 多条件查询 获取优先级
getQueryClass(val) {
getQueryClass (val) {
this.reqParam.contrastCustomSearchReq.queryclass = val;
this.search();
},
// 多条件查询 获取是否远程
getRemoteFlag(val) {
getRemoteFlag (val) {
this.reqParam.contrastCustomSearchReq.remoteflag = val;
this.search();
},
// 多条件查询 获取查询状态
getQueryState(val) {
getQueryState (val) {
this.reqParam.contrastCustomSearchReq.querystate = val;
this.search();
},
// 时间格式化
dateTimeFormat(row, colnum) {
dateTimeFormat (row, colnum) {
let prop = colnum.property;
return row[prop] ? moment(row[prop]).format("YYYY-MM-DD HH:mm:ss") : "";
},
// 优先级格式化
queryClassFormat(row, colnum) {
queryClassFormat (row, colnum) {
let prop = colnum.property;
let showProp = null;
for (let i = 0; i < this.queryClassList.length; i++) {
......@@ -400,7 +288,7 @@ export default {
return showProp;
},
// 多选删除
delMore() {
delMore () {
// 检查table选择的数据 如果没有选择则不可以删除
if (this.selectionData.length === 0) {
this.$message.error("请选择需要删除的数据！");
......@@ -414,7 +302,7 @@ export default {
this.doDelete(qqid);
},
// 单选删除
delOne(val) {
delOne (val) {
// 将传入的qqid转为数组
let qqid = [];
qqid.push(val);
......@@ -422,7 +310,7 @@ export default {
this.doDelete(qqid);
},
// 请求删除接口
doDelete(qqid) {
doDelete (qqid) {
// 删除确认提示
this.$confirm("是否确定删除已选择的数据?", "提示", {
confirmButtonText: "确定",
......@@ -449,7 +337,7 @@ export default {
});
},
// 认定
edit(row) {
edit (row) {
console.info(row);
// tt 查重 0
if (row.querytype === "0") {
......@@ -457,15 +345,21 @@ export default {
}
// ll 串查 3 lt 正查 2 tl 倒查 1
else {
this.$router.push({ path: "/confirm/LT", query: { rowData: row } });
// this.$router.push({ path: "/confirm/LT", query: { rowData: row } });
// 打开新页面
let routeUrl = this.$router.resolve({
path: "/confirm/LT",
query: { rowData: row }
});
window.open(routeUrl.href, '_blank');
}
},
// table表格选中获取数据
handleSelectionChange(val) {
handleSelectionChange (val) {
this.selectionData = val;
},
// 复制条码号 获取选中条码值
getBarcode() {
getBarcode () {
this.barcode = null;
if (this.selectionData.length === 0) {
this.$message.error("请选择需要复制条码号的数据！");
......@@ -476,28 +370,28 @@ export default {
}
},
// 复制成功时的回调函数
onCopy(e) {
onCopy (e) {
this.$message({
type: "success",
message: "复制条码号:" + this.barcode + "成功！"
});
},
// 复制失败时的回调函数
onError(e) {
onError (e) {
this.$message.error("抱歉，复制条码号失败！");
},
// 当期页发生变化
handleCurrPageChange: function(val) {
handleCurrPageChange: function (val) {
this.reqParam.page.currPage = val;
this.search();
},
// 每页展示数量发生变化
handleSizeChange: function(val) {
handleSizeChange: function (val) {
this.reqParam.page.pageSize = val;
this.search();
},
// 清空筛选条件
clearParams() {
clearParams () {
// this.remoteFlag = null;
this.startEndDate = null;
this.reqParam.page.currPage = 1;
......@@ -516,7 +410,7 @@ export default {
this.search();
}
},
mounted() {
mounted () {
this.search();
}
};
......
src/views/cxyrd/modules/LTCandidate.vue
......@@ -17,7 +17,7 @@
<el-checkbox v-model="checked">显示已比中候选</el-checkbox>
</div>
<div class="lt_candidate_number">
<el-table class="lt_candidate_table" height="800" :data="tableData">
<el-table highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" height="800" :data="tableData">
<el-table-column label="排名" type="index" width="50">
</el-table-column>
<!-- <el-table-column label="排名" width="50"></el-table-column>-->
......@@ -28,13 +28,13 @@
width="50"
></el-table-column>
<el-table-column
prop="barcode"
prop="destbarcode"
label="源条码号"
width="200"
></el-table-column>
</el-table>
<div class="lt_candidate_bottom">
<span>共计<b>3条</b>数据</span>
<span>共计<b>{{total}}条</b>数据</span>
</div>
</div>
</div>
......@@ -46,15 +46,40 @@ export default {
data() {
return {
checked: true,
tableData: candidates,
tableData: null,
input: "",
select: 1,
input3: ""
input3: "",
total: 0
};
},
created () {
let self = this
self.$bus.on('initCandidate', (tableData) => {
self.tableData = tableData
self.total = self.tableData.length
// console.log(tableData);
});
},
methods: {
search() {
console.info(this.select);
},
/**
* @description: 选中切换方法
* @param {*} val
* @param {*} old
* @return {*}
*/
handleCurrentChange (val, old) {
let self = this
console.log(val);
this.$axios.get(`/api/api/org/plainByBarcode/R1100002487002018050034/1/`)
// this.$axios.get(`/api/api/org/plainByBarcode/${val.R1100002487002018050034}/${}/`)
.then(response => {
console.log(response);
self.$bus.emit('changImageEditTarget', response.data.ret.image)
})
}
}
};
......
src/views/cxyrd/modules/LTSrc.vue
......@@ -7,59 +7,31 @@
<div class="lt_middle">
<!-- 源数据区 -->
<div class="lt_middle_src_data">
<el-table
class="lt_candidate_table border_radius"
height="368"
@row-click="getFirgerPrintDetail"
>
<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="enumerate"
label="枚数"
width="80"
></el-table-column>
<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-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>
</el-table>
<div class="lt_middle_bottom">
<span>该任务共计<b>321</b>条查询</span>
<el-button type="text" @click="changeTableHeight">展开</el-button>
<span>该任务共计<b>{{total}}</b>条查询</span>
<el-button type="text" @click="changeTableHeight">{{options}}</el-button>
</div>
</div>
<!-- 源指纹区 -->
<div class="lt_middle_finger_print">
<div class="lt_middle_finger_print" v-show="isShowPrint">
<!--指纹图-->
<div class="lt_middle_finger_prints">
<div
class="finger_print"
:class="{ finger_print_active: index === isActive }"
v-for="(item, index) of enumerate"
@click="changeStyle(index)"
:key="index"
>
<div
class="finger_print_number"
:class="{ finger_print_number_active: index === isActive }"
>
{{ item }}
<div class="finger_print" :class="{ finger_print_active: index === isActive }" v-for="(item, index) in enumerate" @click="changeStyle(index, item)" :key="index">
<div class="finger_print_number" :class="{ finger_print_number_active: index === isActive }">
{{ Number(index+1) < 9 ? ('0'+Number(index+1)) : Number(index+1) }}
</div>
<br />
<img
:src="fingerSrc"
style="width: 66px;height: 20px;margin: 0;border: 1px solid saddlebrown"
/>
<img :src="'data:image/jpeg;base64,'+item.image" style="width: 106px;height: 106px;" />
</div>
</div>
<!--指纹个数提示-->
<div class="lt_middle_bottom">
<span>该查询ID共计<b>321</b>枚指纹</span>
<span>该查询ID共计<b>{{fingerTotal}}</b>枚指纹</span>
</div>
</div>
</div>
......@@ -73,38 +45,120 @@ export default {
watch: {
srcData: {
immediate: true,
handler(val) {
handler (val) {
console.info("源数据传入组件的值为===>", val);
this.tableData = val;
}
}
},
data() {
data () {
return {
checked: true,
enumerate: 8,
enumerate: null,
tableData: null,
isActive: "",
fingerSrc: require("../../../assets/img/img.png")
fingerSrc: require("../../../assets/img/img.png"),
isShowPrint: true,
tableHeight: 368,
dataList: [],
total: 0,
fingerTotal: 0,
currentRow: null,
options: '展开',
qqid: null
};
},
methods: {
/**
* @description: 选择切换
* @param {*} val
* @param {*} old
* @return {*}
*/
handleCurrentChange (val, old) {
this.currentRow = val;
console.log(val);
let self = this
self.qqid = val.qqid
let barcode = val.barcode
console.log(barcode);
this.$axios
.get(`/api/api/png/caseBybarcode/${barcode}`)
.then(response => {
console.log(response);
self.enumerate = response.data.ret
self.fingerTotal = response.data.ret.length
// 默认选中第一个指纹预览图片
self.changeStyle(0, self.enumerate[0])
})
this.isActive = "";
},
/**
* @description: 获取列表数据
* @param {*}
* @return {*}
*/
getDetailData () {
let self = this
this.$axios
.post("/api/api/queryque/standardAll", {})
.then(response => {
console.log(response);
self.dataList = response.data.ret
self.total = response.data.ret.length
console.log(self.dataList);
// 默认选中第一行
self.$refs.singleTable.setCurrentRow(self.dataList[0]);
});
},
// 获取选择的任务详情
getFirgerPrintDetail(row) {
this.enumerate = row.enumerate;
getFirgerPrintDetail (row) {
// this.enumerate = row.enumerate;
// 选择新的指纹数据时 清空前一个指纹样式
this.isActive = "";
// let self = this
// let barcode = row.barcode
// console.log(barcode);
// this.$axios
// .get(`/api/api/png/caseBybarcode/${barcode}`)
// .then(response => {
// console.log(response);
// self.enumerate = response.data.ret
// self.fingerTotal = response.data.ret.length
// })
// this.isActive = "";
},
// 指纹部分 增加边框
changeStyle(index) {
changeStyle (index, imageInfo) {
let self = this
this.isActive = index;
console.log(this.isActive);
this.$bus.emit('changImageEdit', imageInfo.image)
this.$axios.post(`/api/api/query/matchcand/dest/${self.qqid}/${imageInfo.seq}`, {})
.then(response => {
// console.log(response);
self.$bus.emit('initCandidate', response.data.ret)
})
},
changeTableHeight() {}
/**
* @description: 展开收缩切换
* @param {*}
* @return {*}
*/
changeTableHeight () {
this.isShowPrint = !this.isShowPrint
if (!this.isShowPrint) {
this.tableHeight = 810
this.options = '收缩'
} else {
this.tableHeight = 368
this.options = '展开'
}
}
},
mounted() {
mounted () {
// 初始状态下 展示当前任务的第一条指纹信息（指纹个数）
// this.enumerate = datas[0].enumerate;
this.getDetailData()
}
};
// 某任务下查询的所有信息
......@@ -130,7 +184,7 @@ const datas = [
];
</script>
<style scoped>
<style scoped lang="scss">
div {
display: inline-block;
}
......@@ -193,29 +247,50 @@ label {
}
/* 单个指纹*/
.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_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;
......
vue.config.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-09-22 10:08:37
* @LastEditors: your name
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\vue.config.js
*/
const path = require("path");
// const CompressionPlugin = require('compression-webpack-plugin');
// const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
......@@ -50,17 +58,18 @@ module.exports = {
},
proxy: {
"/api": {
target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
// target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
target: "http://172.18.108.213:8099/", // 张 认定
ws: true,
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
},
},
css: {
sourceMap: process.env.NODE_ENV === "development" ?true:false // 在开发环境下开启 CSS sourcemaps
sourceMap: process.env.NODE_ENV === "development" ? true : false // 在开发环境下开启 CSS sourcemaps
}
};
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