Skip to content

F
founder_vue
Commit 70409290 by 李萌萌
Options

角度较小则不存储

parents 5e950d5d 63ffc94b
Showing with 332 additions and 608 deletions
src/components/InputSearch.vue
<!--
* @Author: your name
* @Date: 2021-12-06 19:34:14
* @LastEditTime: 2021-12-07 20:04:36
* @LastEditTime: 2021-12-14 10:36:21
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \指纹系统\founder_vue\src\components\InputSearch.vue
-->
<template>
<div class="InputSearch">
<el-autocomplete class="inline-input" v-model="newForm[id]" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
<el-autocomplete class="inline-input" v-model.trim="newForm[id]" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>
</div>
</template>
......
src/views/Editor/modules/imageEd.scss
......@@ -11,6 +11,9 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
$directionRotate: var(--directionRotate, 0deg);
$transOrigin: var(--transOrigin, 0px, 0px);
// canvas的宽度
$canvasHeight: var(--canvasHeight, 670px);
$canvasWidth: var(--canvasWidth, 670px);
.imageBox {
display: flex;
......@@ -986,10 +989,10 @@ $transOrigin: var(--transOrigin, 0px, 0px);
margin: auto;
max-height: 670px !important;
max-width: 670px !important;
height: 670px !important;
width: 670px !important;
// height: auto !important;
// width: auto !important;
height: $canvasHeight !important;
width: $canvasWidth !important;
// height: 670px !important;
// width: 670px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
......@@ -1053,7 +1056,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
position: absolute;
background: transparent;
overflow: hidden;
transform-origin: 335px 335px;
// transform-origin: 335px 335px;
z-index: 9999;
// transform-origin: $transOrigin;
// background-color: #999;
......@@ -1063,7 +1066,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
height: 670px;
position: absolute;
background: transparent;
transform-origin: 335px 335px;
// transform-origin: 335px 335px;
}
}
.preview-source {
......@@ -1077,7 +1080,14 @@ $transOrigin: var(--transOrigin, 0px, 0px);
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
overflow: hidden;
img {
object-fit: contain;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
width: $canvasWidth;
height: $canvasHeight;
}
.block_small {
width: 100%;
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-12-14 00:41:47
* @LastEditTime: 2021-12-14 14:34:13
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -11,186 +11,62 @@
<div class="imageEd">
<div class="imageEd_header">
<div class="center">
<el-tooltip
class="item"
effect="dark"
content="撤销"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="撤销" :open-delay="500">
<dir v-if="isFace" class="disabled back">
<img
class="disabled-img"
src="@/assets/img/zcedit/back_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/back_disabled.png" alt="" />
</dir>
<div
v-else
class="icon back disabled disabled2"
id="btn-undo"
@mousedown="mouseDownBack"
@mouseup="mouseUpBack"
>
<img
src="@/assets/img/zcedit/back.png"
alt=""
v-show="!back_active"
/>
<img
src="@/assets/img/zcedit/back_a.png"
alt=""
v-show="back_active"
/>
<div v-else class="icon back disabled disabled2" id="btn-undo" @mousedown="mouseDownBack" @mouseup="mouseUpBack">
<img src="@/assets/img/zcedit/back.png" alt="" v-show="!back_active" />
<img src="@/assets/img/zcedit/back_a.png" alt="" v-show="back_active" />
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="恢复"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="恢复" :open-delay="500">
<dir v-if="isFace" class="disabled go">
<img
class="disabled-img"
src="@/assets/img/zcedit/go_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/go_disabled.png" alt="" />
</dir>
<div
v-else
class="icon go disabled disabled2"
id="btn-redo"
@mousedown="mouseDownGo"
@mouseup="mouseUpGo"
>
<img
src="@/assets/img/zcedit/go.png"
alt=""
v-show="!go_active"
/>
<img
src="@/assets/img/zcedit/go_a.png"
alt=""
v-show="go_active"
/>
<div v-else class="icon go disabled disabled2" id="btn-redo" @mousedown="mouseDownGo" @mouseup="mouseUpGo">
<img src="@/assets/img/zcedit/go.png" alt="" v-show="!go_active" />
<img src="@/assets/img/zcedit/go_a.png" alt="" v-show="go_active" />
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="移动"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="移动" :open-delay="500">
<dir v-if="isFace" class="disabled drag">
<img
class="disabled-img"
src="@/assets/img/zcedit/drag_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/drag_disabled.png" alt="" />
</dir>
<div v-else 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="放大"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="放大" :open-delay="500">
<dir v-if="isFace" class="disabled enlarge">
<img
class="disabled-img"
src="@/assets/img/zcedit/enlarge_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/enlarge_disabled.png" alt="" />
</dir>
<div v-else class="icon enlarge" @click="enlarge">
<img
v-if="!isEnlarge"
src="@/assets/img/zcedit/enlarge.png"
alt=""
/>
<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>
<el-tooltip
class="item"
effect="dark"
content="原尺寸显示"
:open-delay="500"
placement="top"
>
<el-tooltip class="item" effect="dark" content="原尺寸显示" :open-delay="500" placement="top">
<dir v-if="isFace" class="disabled size">
<img
class="disabled-img"
src="@/assets/img/zcedit/size_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/size_disabled.png" alt="" />
</dir>
<div v-else class="size_mix">
<div class="icon_size" @click.stop="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-show="!isActive"
src="@/assets/img/zcedit/arrow.png"
alt=""
/>
<img
class="arrow"
v-show="isActive"
src="@/assets/img/zcedit/arrow_a.png"
alt=""
/>
<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-show="!isActive" src="@/assets/img/zcedit/arrow.png" alt="" />
<img class="arrow" v-show="isActive" src="@/assets/img/zcedit/arrow_a.png" alt="" />
</div>
</div>
</el-tooltip>
<div class="rotate_mix" v-if="!isFace">
<el-tooltip
class="item"
effect="dark"
content="旋转"
:open-delay="500"
placement="top"
>
<el-tooltip class="item" effect="dark" content="旋转" :open-delay="500" placement="top">
<div class="icon_rotate" @click.stop="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=""
/>
<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>
</el-tooltip>
<div class="rotateOptions" v-show="isRotateOptions" @click.stop>
......@@ -204,41 +80,19 @@
<div class="rotate_content">
<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=""
/>
<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 }"
>
<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=""
/>
<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 }"
>
<div class="num" :class="{ rightRotateActive: isRightRotate }">
-30
</div>
</div>
......@@ -246,31 +100,15 @@
<div class="flap_content">
<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=""
/>
<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=""
/>
<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>
......@@ -279,22 +117,11 @@
<div class="rotate_bottom">
<div class="progress">
<!-- <input id="input-rotation-range" type="range" min="-360" :value="inputRotationRange" max="360" /> -->
<el-slider
@click.stop
id="input-rotation-range"
:min="-360"
:max="360"
v-model.number="inputRotationRange"
></el-slider>
<el-slider @click.stop id="input-rotation-range" :min="-360" :max="360" v-model.number="inputRotationRange"></el-slider>
</div>
<div class="desc">
<div class="qj">区间</div>
<input
class="qj_v"
type="text"
@click.stop
v-model.number="inputRotationRange"
/>
<input class="qj_v" type="text" @click.stop v-model.number="inputRotationRange" />
</div>
</div>
</div>
......@@ -314,88 +141,42 @@
<div class="item-name">适中</div>
</div>
</div>
<el-tooltip
class="item"
effect="dark"
content="下载"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="下载" :open-delay="500">
<dir v-if="isFace" class="disabled download">
<img
class="disabled-img"
src="@/assets/img/zcedit/download_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/download_disabled.png" alt="" />
</dir>
<div v-else class="icon download" id="btn-download">
<img src="@/assets/img/zcedit/download.png" alt="" />
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="缩略图"
:open-delay="500"
>
<div
class="icon bzd"
@click="onchangePreview"
v-if="zwType == '掌纹'"
>
<el-tooltip class="item" effect="dark" content="缩略图" :open-delay="500">
<div class="icon bzd" @click="onchangePreview" v-if="zwType == '掌纹'">
<img src="@/assets/img/zcedit/bzd.png" alt="" />
</div>
<div class="disabled" v-else>
<img
class="disabled-img"
src="@/assets/img/zcedit/slt_disabled.png"
alt=""
/>
<img class="disabled-img" src="@/assets/img/zcedit/slt_disabled.png" alt="" />
</div>
</el-tooltip>
</div>
</div>
<div class="imageEd_main">
<div v-if="!isFace" class="preview-source" v-show="isShowSourcePrivew">
<img
id="preview-source-img"
:src="'data:image/jpeg;base64,' + sourceImage"
alt=""
/>
<img id="preview-source-img" :src="'data:image/jpeg;base64,' + sourceImage" alt="" />
<div id="block_small" class="block_small" v-show="true"></div>
</div>
<div class="drawing">
<div v-if="!isFace" class="title">{{ fingerTitle }}</div>
<div class="body-container">
<div v-show="!isFace" class="tui-image-editor"></div>
<img
id="sourceImage"
style="display:none"
:src="'data:image/jpeg;base64,' + sourceImage"
alt=""
/>
<img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,' + sourceImage" alt="" />
<div v-if="isFace" class="face-content">
<div class="face-item" v-for="(item, i) in rxInfo" :key="i">
<div class="face-image">
<!-- 有图像 -->
<img
@dblclick="faceDoubleChange(item)"
v-if="item.image && item.code == 14"
class="face-pic idCard"
:src="'data:image/jpeg;base64,' + item.image"
/>
<img
@dblclick="faceDoubleChange(item)"
v-else-if="item.image && item.code != 14"
class="face-pic"
:src="'data:image/jpeg;base64,' + item.image"
/>
<img @dblclick="faceDoubleChange(item)" v-if="item.image && item.code == 14" class="face-pic idCard" :src="'data:image/jpeg;base64,' + item.image" />
<img @dblclick="faceDoubleChange(item)" v-else-if="item.image && item.code != 14" class="face-pic" :src="'data:image/jpeg;base64,' + item.image" />
<!-- 缺图像 -->
<img
v-else
class="face-absence"
src="@/assets/img/TT/zwtp.png"
alt=""
/>
<img v-else class="face-absence" src="@/assets/img/TT/zwtp.png" alt="" />
<span class="zwtx" v-show="item.image == null">暂无图像</span>
</div>
<div class="face-name">{{ item.name }}</div>
......@@ -438,57 +219,24 @@
</div>
<div class="options-line"></div>
<div class="options-btns">
<el-tooltip
class="item"
effect="dark"
content="特征点"
:open-delay="500"
>
<div
class="tzd"
:class="{ featuresActive: isHandTZD }"
@click="tzdChange"
>
<el-tooltip class="item" effect="dark" content="特征点" :open-delay="500">
<div class="tzd" :class="{ featuresActive: isHandTZD }" @click="tzdChange">
<img src="@/assets/img/zcedit/features1.svg" alt="" />
<div class="number">{{ tzdnumber }}</div>
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="方向"
:open-delay="500"
style="display: none;"
>
<div
class="bzd"
:class="{ featuresActive: isdirection }"
@click="directionChange"
>
<el-tooltip class="item" effect="dark" content="方向" :open-delay="500" style="display: none;">
<div class="bzd" :class="{ featuresActive: isdirection }" @click="directionChange">
<img src="@/assets/img/rybj/bzd.svg" alt="" />
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="自动提取特征"
:open-delay="500"
>
<el-tooltip class="item" effect="dark" content="自动提取特征" :open-delay="500">
<div class="dp" v-show="isAutoTzd" @mouseup="isAutoTzd = false">
<img src="@/assets/img/rybj/dp.svg" alt="" />
</div>
</el-tooltip>
<el-tooltip
class="item"
effect="dark"
content="自动提取特征"
:open-delay="500"
>
<div
class="dp-d"
@mousedown="getAutoTzd(true)"
v-show="!isAutoTzd"
>
<el-tooltip class="item" effect="dark" content="自动提取特征" :open-delay="500">
<div class="dp-d" @mousedown="getAutoTzd(true)" v-show="!isAutoTzd">
<img src="@/assets/img/rybj/dp.svg" alt="" />
</div>
</el-tooltip>
......@@ -498,33 +246,13 @@
</div>
<div class="save">
<div class="save-types">选择保存类型：</div>
<div
class="dqzwtz"
:class="{ active: saveType === '当前指位特征' }"
@click.stop="changeSaveType('当前指位特征')"
>
<el-tooltip
class="item"
effect="dark"
content="保存当前指位特征"
placement="top"
:open-delay="500"
>
<div class="dqzwtz" :class="{ active: saveType === '当前指位特征' }" @click.stop="changeSaveType('当前指位特征')">
<el-tooltip class="item" effect="dark" content="保存当前指位特征" placement="top" :open-delay="500">
<img src="@/assets/img/rybj/dqzw.png" alt="" />
</el-tooltip>
</div>
<div
class="qbzwtz"
:class="{ active: saveType === '全部指位特征' }"
@click.stop="changeSaveType('全部指位特征')"
>
<el-tooltip
class="item"
effect="dark"
content="保存全部指位特征"
placement="top"
:open-delay="500"
>
<div class="qbzwtz" :class="{ active: saveType === '全部指位特征' }" @click.stop="changeSaveType('全部指位特征')">
<el-tooltip class="item" effect="dark" content="保存全部指位特征" placement="top" :open-delay="500">
<img src="@/assets/img/rybj/qbzw.png" alt="" />
</el-tooltip>
</div>
......@@ -537,58 +265,28 @@
<div class="options-bottom-title">图像调整</div>
<div class="options-bottom-btns">
<!-- <div class="btn" :class="{grayActive: isGrayActive}" @click="changeGray">灰度</div> -->
<div
class="btn"
:class="{ vintageActive: isVintageActive }"
@click="changeVintage"
>
<div class="btn" :class="{ vintageActive: isVintageActive }" @click="changeVintage">
棕褐色
</div>
<div
class="disabled"
:class="{ horseshoeMirrorActive: isHorseshoeMirrorActive }"
>
<div class="disabled" :class="{ horseshoeMirrorActive: isHorseshoeMirrorActive }">
马蹄镜
</div>
<div
class="disabled"
:class="{ equalizationActive: isEqualizationActive }"
>
<div class="disabled" :class="{ equalizationActive: isEqualizationActive }">
均衡化
</div>
<div
class="btn"
:class="{ sharpenActive: isSharpenActive }"
@click="changeSharpen"
>
<div class="btn" :class="{ sharpenActive: isSharpenActive }" @click="changeSharpen">
锐化
</div>
<div
class="btn"
:class="{ embossActive: isEmbossActive }"
@click="changeEmboss"
>
<div class="btn" :class="{ embossActive: isEmbossActive }" @click="changeEmboss">
浮雕
</div>
<div
class="btn"
:class="{ invertActive: isInvertActive }"
@click="changeInvert"
>
<div class="btn" :class="{ invertActive: isInvertActive }" @click="changeInvert">
反相
</div>
<div
class="btn"
:class="{ blendActive: isBlendActive }"
@click="changeBlend"
>
<div class="btn" :class="{ blendActive: isBlendActive }" @click="changeBlend">
差异化
</div>
<div
class="btn"
:class="{ multiplyActive: isMultiplyActive }"
@click="changeMultiply"
>
<div class="btn" :class="{ multiplyActive: isMultiplyActive }" @click="changeMultiply">
正片叠底
</div>
<!-- 去白弹框 -->
......@@ -596,18 +294,8 @@
<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" /> -->
<el-slider
class="range-narrow"
id="input-range-remove-white-distance"
v-model="inputRemoveWhiteRange"
:min="0"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model="inputRemoveWhiteRange"
/>
<el-slider class="range-narrow" id="input-range-remove-white-distance" v-model="inputRemoveWhiteRange" :min="0" :max="255"></el-slider>
<input class="qb_v" type="text" v-model="inputRemoveWhiteRange" />
</div>
</div>
<!-- 正片叠底弹框 -->
......@@ -628,74 +316,32 @@
<div class="color-filter">
<div class="title">滤色器</div>
<div class="content">
<el-slider
class="range-narrow"
id="input-range-color-filter-value"
v-model.number="inputColorFilterRange"
:min="0"
:max="255"
></el-slider>
<input
min="0"
max="255"
class="qb_v"
type="text"
v-model.number="inputColorFilterRange"
/>
<el-slider class="range-narrow" id="input-range-color-filter-value" v-model.number="inputColorFilterRange" :min="0" :max="255"></el-slider>
<input min="0" max="255" class="qb_v" type="text" v-model.number="inputColorFilterRange" />
</div>
</div>
<!-- 亮度 -->
<div class="brightness">
<div class="title">亮度</div>
<div class="content">
<el-slider
class="range-narrow"
id="input-range-brightness-value"
v-model.number="inputBrightnessRange"
:min="-255"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputBrightnessRange"
/>
<el-slider class="range-narrow" id="input-range-brightness-value" v-model.number="inputBrightnessRange" :min="-255" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputBrightnessRange" />
</div>
</div>
<!-- 对比度 -->
<div class="contrast-ratio">
<div class="title">对比度</div>
<div class="content">
<el-slider
class="range-narrow"
id="input-range-contrast-value"
v-model.number="inputContrastRange"
:min="-255"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputContrastRange"
/>
<el-slider class="range-narrow" id="input-range-contrast-value" v-model.number="inputContrastRange" :min="-255" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputContrastRange" />
</div>
</div>
<!-- 去白 -->
<div class="brightness">
<div class="title">去白</div>
<div class="content">
<el-slider
class="range-narrow"
id="input-range-remove-white-distance"
v-model.number="inputRemoveWhiteRange"
:min="0"
:max="255"
></el-slider>
<input
class="qb_v"
type="text"
v-model.number="inputRemoveWhiteRange"
/>
<el-slider class="range-narrow" id="input-range-remove-white-distance" v-model.number="inputRemoveWhiteRange" :min="0" :max="255"></el-slider>
<input class="qb_v" type="text" v-model.number="inputRemoveWhiteRange" />
</div>
</div>
<div class="mask" v-if="isFace"></div>
......@@ -711,7 +357,7 @@ import MouseGesture from "./tzd_rotate.js";
import "@/icons/direction.svg";
// import RangeSlider from './RangeSlider';
export default {
data() {
data () {
return {
// 人像信息
rxInfo: [],
......@@ -973,7 +619,13 @@ export default {
handDataX: 0,
handDataY: 0,
// 掌纹缩略图蓝色框，鼠标抬起时设Null，停止平移
dragableDiv: null
dragableDiv: null,
// canvas画布盒子的页面展示宽高
canvasBox_width: 670,
canvasBox_height: 670,
// canvas盒子和bmp图片的宽高比例
width_ratio: 1,
height_ratio: 1,
};
},
computed: {
......@@ -984,7 +636,7 @@ export default {
isFace: (state) => state.ryzwbj.isFace,
}),
},
created() {
created () {
let w1 = 1920;
let w2 = window.innerWidth;
this.canvasWidth = (this.canvasWidth * w2) / w1;
......@@ -993,7 +645,7 @@ export default {
// 获取barcode，seq
this.barcode = this.$route.params.barcode;
},
mounted() {
mounted () {
//console.log(this.$route.name);
let self = this;
var supportingFileAPI = !!(
......@@ -1047,7 +699,7 @@ export default {
// imageEditor.loadImageFromURL("img/xxx.jpg", "SampleImage").then(function (sizeValue) {
imageEditor
.loadImageFromURL("img/xxx.jpg", "SampleImage")
.then(function(sizeValue) {
.then(function (sizeValue) {
//console.log(sizeValue);
imageEditor.clearUndoStack();
});
......@@ -1088,7 +740,7 @@ export default {
});
this.blendColorpicker = blendColorpicker;
function resizeEditor() {
function resizeEditor () {
var $editor = $(".tui-image-editor");
var $container = $(".tui-image-editor-canvas-container");
var height = parseFloat($container.css("max-height"));
......@@ -1096,7 +748,7 @@ export default {
$editor.height(height);
}
function getBrushSettings() {
function getBrushSettings () {
var brushWidth = parseInt($("#normal")[0].dataset.width, 10);
var brushColor = brushColorpicker.getColor();
......@@ -1107,7 +759,7 @@ export default {
}
// HEX to RGBA
function hexToRGBa(hex, alpha) {
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);
......@@ -1116,11 +768,11 @@ export default {
return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
function base64ToBlob(data) {
function base64ToBlob (data) {
var mimeString = "";
var raw, uInt8Array, i, rawLength;
raw = data.replace(rImageType, function(header, imageType) {
raw = data.replace(rImageType, function (header, imageType) {
mimeString = imageType;
return "";
......@@ -1137,9 +789,9 @@ export default {
return new Blob([uInt8Array], { type: mimeString });
}
function applyOrRemoveFilter(applying, type, options) {
function applyOrRemoveFilter (applying, type, options) {
if (applying) {
imageEditor.applyFilter(type, options).then(function(result) {
imageEditor.applyFilter(type, options).then(function (result) {
// //console.log(result);
});
} else {
......@@ -1149,7 +801,7 @@ export default {
// Attach image editor custom events
imageEditor.on({
objectAdded: function(objectProps) {
objectAdded: function (objectProps) {
//console.info(objectProps);
if (objectProps.type == "line") {
self.lines.push(objectProps);
......@@ -1157,7 +809,7 @@ export default {
}
// self.historys.push(objectProps.type)
},
undoStackChanged: function(length) {
undoStackChanged: function (length) {
if (length) {
$btnUndo.removeClass("disabled");
} else {
......@@ -1165,7 +817,7 @@ export default {
}
resizeEditor();
},
redoStackChanged: function(length) {
redoStackChanged: function (length) {
if (length) {
$btnRedo.removeClass("disabled");
} else {
......@@ -1173,28 +825,28 @@ export default {
}
resizeEditor();
},
objectScaled: function(obj) {
objectScaled: function (obj) {
//console.log(obj);
if (obj.type === "text") {
$inputFontSizeRange.val(obj.fontSize);
}
},
addText: function(pos) {
addText: function (pos) {
imageEditor
.addText("Double Click", {
position: pos.originPosition,
})
.then(function(objectProps) {
.then(function (objectProps) {
//console.log(objectProps);
});
},
objectActivated: function(obj) {
objectActivated: function (obj) {
//console.log(obj);
// 选择特征点
if (obj.type == "line") {
$(document)
.unbind("keydown")
.keydown(function(event) {
.keydown(function (event) {
if (event.keyCode == 46) {
// 从数组中删除
let lineIndex = self.lines.findIndex((item) => {
......@@ -1215,7 +867,7 @@ export default {
self.curveArr.push(obj);
}
},
mousedown: function(event, originPointer) {
mousedown: function (event, originPointer) {
//console.log(event);
//console.log(originPointer);
if (
......@@ -1231,7 +883,7 @@ export default {
});
// 撤回
$btnUndo.on("click", function(e) {
$btnUndo.on("click", function (e) {
e.stopPropagation();
self.initStatus();
//console.log("撤销");
......@@ -1243,7 +895,7 @@ export default {
});
// 恢复
$btnRedo.on("click", function(e) {
$btnRedo.on("click", function (e) {
e.stopPropagation();
//console.log("恢复");
if (!$(this).hasClass("disabled")) {
......@@ -1254,12 +906,12 @@ export default {
});
// 标记
imageEditor.on("mousedown", function(e, originPointer) {
imageEditor.on("mousedown", function (e, originPointer) {
e.stopPropagation();
// 放大
if (self.isEnlarge) {
self.mouseEnlarge = true;
$(".tui-image-editor").mousemove(function(e) {
$(".tui-image-editor").mousemove(function (e) {
if (self.mouseEnlarge) {
// 放大
if (e.offsetY + 31 < originPointer.y) {
......@@ -1290,7 +942,7 @@ export default {
// });
// 下载
$btnDownload.on("click", function(e) {
$btnDownload.on("click", function (e) {
e.stopPropagation();
var imageName = "源数据指纹";
var dataURL = $("#sourceImage").attr("src");
......@@ -1313,30 +965,30 @@ export default {
}
});
// 沿X轴翻转
$btnFlipX.on("click", function(e) {
$btnFlipX.on("click", function (e) {
e.stopPropagation();
//console.log(111);
self.isX = true;
self.isY = false;
self.isReset = false;
imageEditor.flipX().then(function(status) {
imageEditor.flipX().then(function (status) {
self.changeTzdDrawing();
});
});
// 沿Y轴翻转
$btnFlipY.on("click", function(e) {
$btnFlipY.on("click", function (e) {
e.stopPropagation();
self.isX = false;
self.isY = true;
self.isReset = false;
imageEditor.flipY().then(function(status) {
imageEditor.flipY().then(function (status) {
self.changeTzdDrawing();
});
});
// 重置
$btnResetFlip.on("click", function(e) {
$btnResetFlip.on("click", function (e) {
e.stopPropagation();
self.isX = false;
self.isY = false;
......@@ -1354,7 +1006,7 @@ export default {
}, 200);
//重置位置变量
self.zoomLevel = 1;
imageEditor.resetFlip().then(function(status) {});
imageEditor.resetFlip().then(function (status) { });
// 移动图片
// imageEditor._graphics.setImageProperties({
......@@ -1366,7 +1018,7 @@ export default {
});
// 向左旋转30°
$btnRotateClockwise.on("click", function(e) {
$btnRotateClockwise.on("click", function (e) {
e.stopPropagation();
self.startPlace += 30;
self.isLeftRotate = true;
......@@ -1375,7 +1027,7 @@ export default {
self.historys.push("旋转");
});
// 向右旋转30°
$btnRotateCounterClockWise.on("click", function(e) {
$btnRotateCounterClockWise.on("click", function (e) {
e.stopPropagation();
self.startPlace -= 30;
self.isLeftRotate = false;
......@@ -1385,21 +1037,21 @@ export default {
self.rotateImage(-30, true);
});
// 滑动旋转事件
$inputRotationRange.on("mousedown", function(e) {
$inputRotationRange.on("mousedown", function (e) {
e.stopPropagation();
var changeAngle = function() {
var changeAngle = function () {
self.startPlace = self.inputRotationRange;
// 每次旋转时，位置都会改变，需要重新定位
self.rotateImage(self.inputRotationRange);
};
$(document).on("mousemove", changeAngle);
$(document).on("mouseup", function stopChangingAngle() {
$(document).on("mouseup", function stopChangingAngle () {
$(document).off("mousemove", changeAngle);
$(document).off("mouseup", stopChangingAngle);
});
});
// 滑动旋转事件
$inputRotationRange.on("change", function(e) {
$inputRotationRange.on("change", function (e) {
e.stopPropagation();
self.startPlace = self.inputRotationRange;
self.historys.push("旋转");
......@@ -1408,14 +1060,14 @@ export default {
});
// 划线事件
$btnDrawLine.on("click", function(e) {
$btnDrawLine.on("click", function (e) {
e.stopPropagation();
imageEditor.stopDrawingMode();
$selectLine.eq(0).change();
});
// 线条模式
$selectLine.on("click", function(e) {
$selectLine.on("click", function (e) {
e.stopPropagation();
var mode = $(this)[0].dataset.val;
self.mode = mode;
......@@ -1429,7 +1081,7 @@ export default {
}
});
// 线条模式
$selectLine.on("change", function(e) {
$selectLine.on("change", function (e) {
e.stopPropagation();
var mode = $(this)[0].dataset.val;
var settings = getBrushSettings();
......@@ -1447,7 +1099,7 @@ export default {
});
// 滑动条去除白色
$inputRangeRemoveWhiteDistance.on("change", function() {
$inputRangeRemoveWhiteDistance.on("change", function () {
self.inputRemoveWhiteRange = Number(this.value);
applyOrRemoveFilter(true, "removeColor", {
distance: parseInt(this.value, 10) / 255,
......@@ -1455,7 +1107,7 @@ export default {
});
// 滑动条滤色
$inputRangeColorFilterValue.on("change", function(value) {
$inputRangeColorFilterValue.on("change", function (value) {
//console.log(value);
self.inputColorFilterRange = Number(this.value);
applyOrRemoveFilter(true, "removeColor", {
......@@ -1464,13 +1116,13 @@ export default {
});
// 正片叠底
multiplyColorpicker.on("selectColor", function(e) {
multiplyColorpicker.on("selectColor", function (e) {
applyOrRemoveFilter(true, "blendColor", {
color: e.color,
});
});
$inputCheckBlend.on("change", function() {
$inputCheckBlend.on("change", function () {
applyOrRemoveFilter(this.checked, "blendColor", {
mode: $selectBlendType.val(),
color: blendColorpicker.getColor(),
......@@ -1478,14 +1130,14 @@ export default {
});
// 差异化
blendColorpicker.on("selectColor", function(e) {
blendColorpicker.on("selectColor", function (e) {
applyOrRemoveFilter(true, "blendColor", {
color: e.color,
});
});
// 亮度
$inputRangeBrightnessValue.on("change", function() {
$inputRangeBrightnessValue.on("change", function () {
self.inputBrightnessRange = this.value;
applyOrRemoveFilter(true, "brightness", {
brightness: parseInt(this.value, 10) / 255,
......@@ -1493,7 +1145,7 @@ export default {
});
// 对比度
$inputRangeContrastValue.on("change", function() {
$inputRangeContrastValue.on("change", function () {
self.inputContrastRange = this.value;
applyOrRemoveFilter(true, "contrast", {
contrast: this.value / 255,
......@@ -1501,7 +1153,7 @@ export default {
});
this.$bus.on("ryzwbjImage", (sourceImage) => {
console.log(sourceImage);
// console.log(sourceImage);
// 缩放为1
self.zoomLevel = 1;
imageEditor.resetZoom();
......@@ -1510,9 +1162,9 @@ export default {
imageEditor
.loadImageFromURL(
"data:image/jpeg;base64," + sourceImage,
"SampleImage"
"FingerImage"
)
.then(function(sizeValue) {
.then(function (sizeValue) {
// 更新工具栏的优先级
setTimeout(() => {
// TODO
......@@ -1523,6 +1175,35 @@ export default {
// 更新newHeight和newWidth
self.newHeight = sizeValue.newHeight;
self.newWidth = sizeValue.newWidth;
// 更改canvas图层的宽高样式适配
if (self.newHeight >= self.newWidth) {
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', 'auto');
} else {
document.getElementsByTagName('body')[0].style.setProperty('--canvasWidth', '100%');
document.getElementsByTagName('body')[0].style.setProperty('--canvasHeight', 'auto');
}
// 记录canvas的宽度和高度
self.canvasBox_width = $('.lower-canvas').width()
self.canvasBox_height = $('.lower-canvas').height()
console.log(self.canvasBox_width);
console.log(self.canvasBox_height);
// 设置特征点图层的宽度和高度
$('.tzdDrawing').css('width', self.canvasBox_width + 'px')
$('.tzdDrawing').css('height', self.canvasBox_height + 'px')
$('.tzdDrawing_2').css('width', self.canvasBox_width + 'px')
$('.tzdDrawing_2').css('height', self.canvasBox_height + 'px')
// 记录实际图片和canvas盒子展示的 宽高比
self.width_ratio = self.canvasBox_width / self.newWidth
self.height_ratio = self.canvasBox_height / self.newHeight
self.width_ratio_2 = self.newWidth / self.canvasBox_width
self.height_ratio_2 = self.newHeight / self.canvasBox_height
console.log(self.canvasBox_width);
console.log(self.newWidth);
console.log(self.width_ratio);
console.log(self.height_ratio);
// 切换指纹图片时，清空特征点数组
self.tzdnumber = 0;
self.tzdArr = [];
......@@ -1622,12 +1303,12 @@ export default {
self.clearALL()
});
$(document).keydown(function(event) {
$(document).keydown(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = true;
}
});
$(document).keyup(function(event) {
$(document).keyup(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = false;
}
......@@ -1637,7 +1318,7 @@ export default {
var originPointer = {};
document
.querySelector(".tzdDrawing")
.addEventListener("mousedown", function(e) {
.addEventListener("mousedown", function (e) {
// 特征点--开启
ins = new MouseGesture({ wise: true });
originPointer = {
......@@ -1831,13 +1512,13 @@ export default {
}
});
// 去掉鼠标默认事件
$(".tzdDrawing").bind("contextmenu", function(e) {
$(".tzdDrawing").bind("contextmenu", function (e) {
return false;
});
var obj = {};
document
.querySelector(".tzdDrawing")
.addEventListener("mousemove", function(e) {
.addEventListener("mousemove", function (e) {
// 开始拖拽
if (self.startHand) {
// 计算点的坐标
......@@ -1976,7 +1657,7 @@ export default {
});
document
.querySelector(".tzdDrawing")
.addEventListener("mouseup", function(e) {
.addEventListener("mouseup", function (e) {
let canvasImage = imageEditor._graphics.getCanvasImage();
self.tzdDrawingLeft = canvasImage.left;
......@@ -2045,7 +1726,7 @@ export default {
var direction_flag = false;
var origin_direction_x = 0;
var origin_direction_y = 0;
document.body.addEventListener("mousedown", function(e) {
document.body.addEventListener("mousedown", function (e) {
if (self.isdirection) {
// 动态计算坐标的原始位置
let o_x = 1135;
......@@ -2059,7 +1740,7 @@ export default {
origin_direction_y = e.clientY - o_y;
}
});
document.body.addEventListener("mousemove", function(e) {
document.body.addEventListener("mousemove", function (e) {
if (self.isdirection) {
if (direction_flag) {
// 动态计算坐标的原始位置
......@@ -2077,7 +1758,7 @@ export default {
origin_direction_y * direction_y) /
(Math.sqrt(
origin_direction_x * origin_direction_x +
origin_direction_y * origin_direction_y
origin_direction_y * origin_direction_y
) *
Math.sqrt(direction_x * direction_x + direction_y * direction_y));
let radina = Math.acos(cos);
......@@ -2099,7 +1780,7 @@ export default {
}
}
});
document.body.addEventListener("mouseup", function(e) {
document.body.addEventListener("mouseup", function (e) {
if (self.isdirection) {
self.angle = angle;
self.preangle = angle;
......@@ -2107,7 +1788,7 @@ export default {
}
// 去掉蓝框移动事件
if(self.dragableDiv != null) {
if (self.dragableDiv != null) {
self.dragableDiv['onmousemove'] = null
}
// 去掉拖拽事件
......@@ -2119,7 +1800,7 @@ export default {
/**
* 监听鼠标点击事件，去掉下拉框
*/
document.addEventListener("click", function(e) {
document.addEventListener("click", function (e) {
e.stopPropagation();
//console.log('documentElement');
// 原尺寸显示下拉框
......@@ -2154,7 +1835,7 @@ export default {
/**
* 清除所有
*/
clearALL() {
clearALL () {
let self = this;
self.tzdnumber = 0;
this.$store.commit("zwbj/setTzdall", null);
......@@ -2172,7 +1853,7 @@ export default {
/**
* 人像双击事件
*/
faceDoubleChange(face) {
faceDoubleChange (face) {
this.$bus.emit("isBlur", true);
this.enLargeFace = true;
this.$bus.emit("setRxInfoEnlarge", face);
......@@ -2181,28 +1862,28 @@ export default {
/**
* 恢复按钮按下事件
*/
mouseDownGo() {
mouseDownGo () {
this.go_active = true;
this.initStatus();
},
/**
* 恢复按钮抬起事件
*/
mouseUpGo() {
mouseUpGo () {
this.go_active = false;
this.initStatus();
},
/**
* 撤销按钮按下事件
*/
mouseDownBack() {
mouseDownBack () {
this.back_active = true;
this.initStatus();
},
/**
* 撤销按钮抬起事件
*/
mouseUpBack() {
mouseUpBack () {
this.back_active = false;
this.initStatus();
},
......@@ -2211,7 +1892,8 @@ export default {
* @param {*}
* @return {*}
*/
async getAutoTzd(flag) {
async getAutoTzd (flag) {
debugger
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -2224,6 +1906,7 @@ export default {
this.isAutoTzd = true;
this.clearALL();
if (self.seq <= 20) {
debugger
// 指纹特征点提取
let res = await this.$axios({
method: "get",
......@@ -2249,7 +1932,6 @@ export default {
$(".auto_tzdDom").css("display", "flex");
$(".auto_tzdDom").css("align-items", "center");
$(".auto_tzdDom").css("position", "absolute");
$(".auto_tzdDom").css("transform-origin", "4px center");
$(".auto_tzdDom .head").css("width", "8px");
$(".auto_tzdDom .head").css("height", "8px");
......@@ -2259,14 +1941,13 @@ export default {
$(".auto_tzdDom .direction").css("width", "20px");
$(".auto_tzdDom .direction").css("height", "2px");
$(".auto_tzdDom .direction").css("background-color", "#FFFD0F");
$(`#auto_tzdDom${self.tzdId}`).css(
"left",
((item.zwtzd_tzxzb - 4)/16) / self.zoomLevel + "rem"
(item.zwtzd_tzxzb * self.width_ratio - 4) / self.zoomLevel + "px"
);
$(`#auto_tzdDom${self.tzdId}`).css(
"top",
((item.zwtzd_tzyzb - 4)/16) / self.zoomLevel + "rem"
(item.zwtzd_tzyzb * self.height_ratio - 4) / self.zoomLevel + "px"
);
$(`#auto_tzdDom${self.tzdId}`).css("box-sizing", "border-box");
$("#auto_tzdDom" + self.tzdId).css(
......@@ -2276,6 +1957,8 @@ export default {
self.tzdId++;
// 特征点数量
self.tzdnumber++;
console.log(self.width_ratio);
console.log(self.height_ratio);
});
self.$store.commit("zwbj/setAutoTzdall", self.autoTzdArr);
// 将自动提取的特征点存入session中
......@@ -2337,11 +2020,11 @@ export default {
$(`#auto_tzdDom${self.tzdId}`).css(
"left",
(item.zwtzd_tzxzb - 4) / self.zoomLevel + "px"
(item.zwtzd_tzxzb * self.width_ratio - 4) / self.zoomLevel + "px"
);
$(`#auto_tzdDom${self.tzdId}`).css(
"top",
(item.zwtzd_tzyzb - 4) / self.zoomLevel + "px"
(item.zwtzd_tzyzb * self.height_ratio - 4) / self.zoomLevel + "px"
);
$(`#auto_tzdDom${self.tzdId}`).css("box-sizing", "border-box");
$("#auto_tzdDom" + self.tzdId).css(
......@@ -2397,11 +2080,11 @@ export default {
$(`#auto_tzdDom${self.tzdId}`).css(
"left",
((item.zwtzd_tzxzb - 4)/16) / self.zoomLevel + "rem"
((item.zwtzd_tzxzb - 4) / 16) / self.zoomLevel + "rem"
);
$(`#auto_tzdDom${self.tzdId}`).css(
"top",
((item.zwtzd_tzyzb - 4)/16) / self.zoomLevel + "rem"
((item.zwtzd_tzyzb - 4) / 16) / self.zoomLevel + "rem"
);
$(`#auto_tzdDom${self.tzdId}`).css("box-sizing", "border-box");
$("#auto_tzdDom" + self.tzdId).css(
......@@ -2423,7 +2106,7 @@ export default {
}
},
getDistance(origin, target) {
getDistance (origin, target) {
let originX = origin.x;
let originY = origin.y;
let targetX = target.x;
......@@ -2437,7 +2120,7 @@ export default {
* @param {*}
* @return {*}
*/
rotateChange() {
rotateChange () {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -2600,7 +2283,7 @@ export default {
* @param {*}
* @return {*}
*/
async directionChange() {
async directionChange () {
this.isdirection = !this.isdirection;
},
/**
......@@ -2608,7 +2291,7 @@ export default {
* @param {*}
* @return {*}
*/
tzdChange() {
tzdChange () {
let self = this;
this.isHandTZD = !this.isHandTZD;
if (this.isHandTZD) {
......@@ -2634,14 +2317,14 @@ export default {
* @param {*}
* @return {*}
*/
ModerateChange(type) {
ModerateChange (type) {
this.isHandTZD = false;
this.isdirection = false;
this.issize = false;
this.ismoderate = true;
this.imageEditor.zoom({
x: this.imageEditor._graphics.getCanvasImage().width/2,
y: this.imageEditor._graphics.getCanvasImage().height/2,
x: this.imageEditor._graphics.getCanvasImage().width / 2,
y: this.imageEditor._graphics.getCanvasImage().height / 2,
zoomLevel: 1.2,
});
this.zoomLevel = 1.2;
......@@ -2668,7 +2351,7 @@ export default {
* @param {*}
* @return {*}
*/
OriginalChange(type) {
OriginalChange (type) {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -2689,7 +2372,7 @@ export default {
self.tzdDrawing_left = 0;
self.tzdDrawing_top = 0;
self.zoomLevel = 1;
self.imageEditor.resetFlip().then(function(status) {
self.imageEditor.resetFlip().then(function (status) {
//console.log("flipX: ", status.flipX);
//console.log("flipY: ", status.flipY);
//console.log("angle: ", status.angle);
......@@ -2728,7 +2411,7 @@ export default {
* @param {*}
* @return {*}
*/
cancelPic() {
cancelPic () {
this.isActive_clear = false;
this.isShowClearDialog = false;
},
......@@ -2737,7 +2420,7 @@ export default {
* @param {*}
* @return {*}
*/
delPic() {
delPic () {
let self = this;
this.isHandTZD = false;
this.isdirection = false;
......@@ -2768,7 +2451,7 @@ export default {
* @param {*}
* @return {*}
*/
clearChange() {
clearChange () {
this.isActive_clear = !this.isActive_clear;
if (this.isActive_clear) {
this.isShowClearDialog = true;
......@@ -2781,7 +2464,7 @@ export default {
* @param {*}
* @return {*}
*/
changeMultiply() {
changeMultiply () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2818,7 +2501,7 @@ export default {
.applyFilter("blendColor", {
color: self.multiplyColorpicker.getColor(),
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
self.historys.push("正片叠底");
......@@ -2834,7 +2517,7 @@ export default {
* @param {*}
* @return {*}
*/
changeRemoveWhite() {
changeRemoveWhite () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2873,7 +2556,7 @@ export default {
useAlpha: false,
distance: parseInt(self.inputRemoveWhiteRange, 10) / 255,
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
self.historys.push("去白");
......@@ -2889,7 +2572,7 @@ export default {
* @param {*}
* @return {*}
*/
changeBlend() {
changeBlend () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2927,7 +2610,7 @@ export default {
mode: "diff",
color: self.blendColorpicker.getColor(),
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
self.historys.push("差异化");
......@@ -2943,7 +2626,7 @@ export default {
* @param {*}
* @return {*}
*/
changeInvert() {
changeInvert () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -2975,7 +2658,7 @@ export default {
let self = this;
this.isInvertActive = !this.isInvertActive;
if (this.isInvertActive) {
this.imageEditor.applyFilter("Invert", null).then(function(result) {
this.imageEditor.applyFilter("Invert", null).then(function (result) {
// //console.log(result);
});
self.historys.push("反相");
......@@ -2990,7 +2673,7 @@ export default {
* @param {*}
* @return {*}
*/
changeEmboss() {
changeEmboss () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3022,7 +2705,7 @@ export default {
let self = this;
this.isEmbossActive = !this.isEmbossActive;
if (this.isEmbossActive) {
this.imageEditor.applyFilter("Emboss", null).then(function(result) {
this.imageEditor.applyFilter("Emboss", null).then(function (result) {
// //console.log(result);
});
self.historys.push("浮雕");
......@@ -3037,7 +2720,7 @@ export default {
* @param {*}
* @return {*}
*/
changeSharpen() {
changeSharpen () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3069,7 +2752,7 @@ export default {
let self = this;
this.isSharpenActive = !this.isSharpenActive;
if (this.isSharpenActive) {
this.imageEditor.applyFilter("Sharpen", null).then(function(result) {
this.imageEditor.applyFilter("Sharpen", null).then(function (result) {
// //console.log(result);
});
} else {
......@@ -3083,7 +2766,7 @@ export default {
* @param {*}
* @return {*}
*/
changeEqualization() {
changeEqualization () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3119,7 +2802,7 @@ export default {
* @param {*}
* @return {*}
*/
changeHorseshoeMirror() {
changeHorseshoeMirror () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3162,7 +2845,7 @@ export default {
* @param {*}
* @return {*}
*/
changeVintage() {
changeVintage () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3194,7 +2877,7 @@ export default {
let self = this;
this.isVintageActive = !this.isVintageActive;
if (this.isVintageActive) {
this.imageEditor.applyFilter("vintage", null).then(function(result) {
this.imageEditor.applyFilter("vintage", null).then(function (result) {
// //console.log(result);
});
self.historys.push("棕褐色");
......@@ -3209,7 +2892,7 @@ export default {
* @param {*}
* @return {*}
*/
changeGray() {
changeGray () {
this.isHandTZD = false;
this.isdirection = false;
// 是否展示旋转的下拉框
......@@ -3241,7 +2924,7 @@ export default {
let self = this;
this.isGrayActive = !this.isGrayActive;
if (this.isGrayActive) {
this.imageEditor.applyFilter("Grayscale", null).then(function(result) {
this.imageEditor.applyFilter("Grayscale", null).then(function (result) {
// //console.log(result);
});
self.historys.push("灰度");
......@@ -3256,7 +2939,7 @@ export default {
* @param {*}
* @return {*}
*/
goSave() {
goSave () {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -3268,8 +2951,8 @@ export default {
self.tzdArr.forEach((item) => {
self.tzdall.push({
zwtzd_tzfx: item.angle,
zwtzd_tzxzb: item.x,
zwtzd_tzyzb: item.y,
zwtzd_tzxzb: item.x * self.width_ratio_2,
zwtzd_tzyzb: item.y * self.height_ratio_2,
});
});
}
......@@ -3504,7 +3187,7 @@ export default {
* @param {*} saveType
* @return {*}
*/
changeSaveType(saveType) {
changeSaveType (saveType) {
this.isHandTZD = false;
this.isdirection = false;
this.saveType = saveType;
......@@ -3515,7 +3198,7 @@ export default {
* @param {*}
* @return {*}
*/
saveTypeOptionsChange() {
saveTypeOptionsChange () {
this.isHandTZD = false;
this.isdirection = false;
this.isShowSaveTypeOptions = !this.isShowSaveTypeOptions;
......@@ -3525,7 +3208,7 @@ export default {
* @param {*}
* @return {*}
*/
changeyxhz() {
changeyxhz () {
this.isHandTZD = false;
this.isdirection = false;
this.iszyhz = false;
......@@ -3536,7 +3219,7 @@ export default {
* @param {*}
* @return {*}
*/
changezyhz() {
changezyhz () {
this.isHandTZD = false;
this.isdirection = false;
this.iszyhz = true;
......@@ -3547,7 +3230,7 @@ export default {
* @param {*}
* @return {*}
*/
zyhzOptionsChange() {
zyhzOptionsChange () {
this.isHandTZD = false;
this.isdirection = false;
this.isShowzyhzOptions = !this.isShowzyhzOptions;
......@@ -3557,7 +3240,7 @@ export default {
* @param {*}
* @return {*}
*/
enlarge() {
enlarge () {
console.log(this.imageEditor._graphics.getCanvasImage());
this.isHandTZD = false;
this.isdirection = false;
......@@ -3719,7 +3402,7 @@ export default {
* @param {*}
* @return {*}
*/
sizeChange() {
sizeChange () {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -3900,7 +3583,7 @@ export default {
* @param {*}
* @return {*}
*/
onchangePreview() {
onchangePreview () {
let self = this;
this.isShowSourcePrivew = !this.isShowSourcePrivew;
if (this.isShowSourcePrivew) {
......@@ -3935,7 +3618,7 @@ export default {
self.changeTzdDrawing()
}, 200);
function dragable(id) {
function dragable (id) {
var d = document,
o = d.getElementById(id),
s = o.style,
......@@ -3949,7 +3632,7 @@ export default {
y = e.clientY - o.offsetTop;
self.x = x;
self.y = y;
o[p] = function(e) {
o[p] = function (e) {
e = e || event;
s.left = e.clientX - self.x + "px";
s.top = e.clientY - self.y + "px";
......@@ -3967,9 +3650,9 @@ export default {
// 获取小蓝框的中心点
const [xlCenterX, xlCenterY] = [
$("#block_small").width() / 2 +
$("#block_small").position().left,
$("#block_small").position().left,
$("#block_small").height() / 2 +
$("#block_small").position().top,
$("#block_small").position().top,
];
let canvasImage = self.imageEditor._graphics.getCanvasImage();
// 当前中心点偏移量
......@@ -3979,9 +3662,9 @@ export default {
];
const [canvasOffsetX, canvasOffsetY] = [
(smallOffsetX / $(".preview-source").width()) *
canvasImage.width,
canvasImage.width,
(smallOffsetY / $(".preview-source").height()) *
canvasImage.height,
canvasImage.height,
];
// 计算图片原来的偏移量得到不偏移情况的left top 值
const centerP = canvasImage.getCenterPoint();
......@@ -4006,7 +3689,7 @@ export default {
self.changeTzdDrawing(true, true);
// LMM↑↑↑↑↑↑↑↑↑↑↑↑
};
o.onmouseup = function(e) {
o.onmouseup = function (e) {
if (e.which === 1) {
o[p] = null;
}
......@@ -4021,7 +3704,7 @@ export default {
* @param {*}
* @return {*}
*/
hand() {
hand () {
this.isHandTZD = false;
this.isdirection = false;
let self = this;
......@@ -4178,7 +3861,7 @@ export default {
* @param {*}
* @return {*}
*/
initStatus() {
initStatus () {
this.isHandTZD = false;
this.isdirection = false;
$(".icon_line").css("background", "rgba(5, 95, 231, 0.05)");
......@@ -4330,7 +4013,7 @@ export default {
/**
* 判断是否可以跳转路由
*/
judgeJumpRoute() {
judgeJumpRoute () {
let isOptionsArr = [];
let sessionKeys = Object.keys(sessionStorage);
for (let index = 0; index < sessionKeys.length; index++) {
......@@ -4385,7 +4068,7 @@ export default {
return;
}
},
btnChange() {
btnChange () {
let isOptionsArr = [];
let sessionKeys = Object.keys(sessionStorage);
for (let index = 0; index < sessionKeys.length; index++) {
......@@ -4403,7 +4086,7 @@ export default {
/**
* 对特征点图层进行更新
*/
changeTzdDrawing(isPingyi, isNotRefreshSourcePrivew) {
changeTzdDrawing (isPingyi, isNotRefreshSourcePrivew) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
// 当前图像中心点
var centerP = canvasImage.getCenterPoint();
......@@ -4453,12 +4136,12 @@ export default {
const [xlTop, xlLeft] = [
// $(".preview-source").height() / 2 - xlHeight / 2 -
$(".preview-source").height() / 2 -
$(".block_small").height() / 2 -
(offsetY / canvasImage.height) * $(".preview-source").height(),
$(".block_small").height() / 2 -
(offsetY / canvasImage.height) * $(".preview-source").height(),
// $(".preview-source").width() / 2 - xlWidth / 2 -
$(".preview-source").width() / 2 -
$(".block_small").width() / 2 -
(offsetX / canvasImage.width) * $(".preview-source").width(),
$(".block_small").width() / 2 -
(offsetX / canvasImage.width) * $(".preview-source").width(),
];
$(".block_small").css("left", `${xlLeft}px`);
......@@ -4468,14 +4151,14 @@ export default {
/**
* 图形归正
*/
resetTzdDrawing() {
resetTzdDrawing () {
this.handDataX = 0;
this.handDataY = 0;
this.zoomLevel = 1;
this.changeTzdDrawing();
},
// 旋转图片
rotateImage(deg, isAdd) {
rotateImage (deg, isAdd) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
......@@ -4510,7 +4193,7 @@ export default {
);
},
// 缩放图片
zoomImage(zoom) {
zoomImage (zoom) {
let canvasImage = this.imageEditor._graphics.getCanvasImage();
let centerP = canvasImage.getCenterPoint();
// 判断是否移动过
......@@ -4555,7 +4238,7 @@ export default {
watch: {
// 监听特征点的数量
tzdnumber: {
handler: function(newValue, oldValue) {
handler: function (newValue, oldValue) {
if (this.zwType == "指纹") {
// 指纹
if (newValue >= 240) {
......@@ -4574,12 +4257,12 @@ export default {
},
immediate: true,
},
isActive(val) {
isActive (val) {
if (val == false) {
this.isShowsizeOptions = false;
}
},
inputRotationRange(newValue, oldValue) {
inputRotationRange (newValue, oldValue) {
let self = this;
let deg = newValue - this.startPlace;
if (!deg) deg = 0;
......@@ -4590,54 +4273,54 @@ export default {
self.rotateImage(newValue);
// self.changeTzdDrawing();
},
inputRemoveWhiteRange(newValue, oldValue) {
inputRemoveWhiteRange (newValue, oldValue) {
this.imageEditor
.applyFilter("removeColor", {
distance: parseInt(newValue, 10) / 255,
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
},
// 对比度
inputContrastRange(newValue, oldValue) {
inputContrastRange (newValue, oldValue) {
this.imageEditor
.applyFilter("Contrast", {
contrast: parseInt(newValue, 10) / 255,
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
},
inputColorFilterRange(newValue, oldValue) {
inputColorFilterRange (newValue, oldValue) {
//console.log(newValue);
this.imageEditor
.applyFilter("removeColor", {
distance: parseInt(newValue, 10) / 255,
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
},
inputBrightnessRange(newValue, oldValue) {
inputBrightnessRange (newValue, oldValue) {
this.imageEditor
.applyFilter("brightness", {
brightness: parseInt(newValue, 10) / 255,
})
.then(function(result) {
.then(function (result) {
// //console.log(result);
});
},
isEnlarge(newValue, oldValue) {
isEnlarge (newValue, oldValue) {
if (newValue) {
} else {
$(".tui-image-editor").unbind("mousemove", function(e) {
$(".tui-image-editor").unbind("mousemove", function (e) {
//console.log(111);
});
}
},
// 是否显示特征
isTZ(newValue, oldValue) {
isTZ (newValue, oldValue) {
let self = this;
if (!newValue) {
$(".tzdDom").css("display", "none");
......@@ -4645,7 +4328,7 @@ export default {
$(".tzdDom").css("display", "flex");
}
},
isHideMarkPoint(newValue, oldValue) {
isHideMarkPoint (newValue, oldValue) {
let self = this;
if (newValue) {
this.circleArr.forEach((item) => {
......@@ -4672,7 +4355,7 @@ export default {
}
},
},
beforeDestroy() {
beforeDestroy () {
// 组件销毁前需要解绑事件。否则会出现重复触发事件的问题
// this.$bus.off('ryzwbjImage');
this.$bus.off("ryzwbjType");
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -1061,7 +1061,7 @@ $canvasWidth: var(--canvasWidth, 670px);
position: absolute;
background: transparent;
overflow: hidden;
transform-origin: 335px 335px;
// transform-origin: 335px 335px;
z-index: 9999;
// transform-origin: $transOrigin;
// background-color: #999;
......@@ -1072,7 +1072,7 @@ $canvasWidth: var(--canvasWidth, 670px);
height: 670px;
position: absolute;
background: transparent;
transform-origin: 335px 335px;
// transform-origin: 335px 335px;
}
.irregular {
......@@ -1081,7 +1081,7 @@ $canvasWidth: var(--canvasWidth, 670px);
position: absolute;
background: transparent;
overflow: hidden;
transform-origin: 335px 335px;
transform-origin: 50% 50%;
}
.rule_line {
......
src/views/Editor/modules/imageEdAJ.vue
This source diff could not be displayed because it is too large. You can view the blob instead.
src/views/bzxxgl/bzxxfh.vue
<!--
* @Author: your name
* @Date: 2021-12-01 15:25:22
* @LastEditTime: 2021-12-13 16:50:22
* @LastEditTime: 2021-12-14 10:43:08
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \指纹系统\founder_vue\src\views\AllPersonnelBase\bzxxfh.vue
......@@ -20,10 +20,10 @@
</el-select>
</el-form-item>
<el-form-item label="源条码号：" prop="ytmh" class="ytmh">
<el-input placeholder="请输入源条码号" v-model="ruleForm.ytmh" maxlength="23" clearable></el-input>
<el-input placeholder="请输入源条码号" v-model.trim="ruleForm.ytmh" maxlength="23" clearable></el-input>
</el-form-item>
<el-form-item label="目标条码号：" prop="mbtmh" class="mbtmh">
<el-input placeholder="请输入目标条码号" v-model="ruleForm.mbtmh" maxlength="23" clearable></el-input>
<el-input placeholder="请输入目标条码号" v-model.trim="ruleForm.mbtmh" maxlength="23" clearable></el-input>
</el-form-item>
</div>
<div class="line1 line2">
......@@ -58,7 +58,7 @@
</el-select>
</el-form-item>
<el-form-item label="数据为最近：" prop="zjsj" class="sjzjw">
<el-radio-group v-model="ruleForm.zjsj">
<el-radio-group v-model="ruleForm.zjsj" @change="daysChange">
<el-radio label="1">1天</el-radio>
<el-radio label="3">3天</el-radio>
<el-radio label="5">5天</el-radio>
......@@ -246,6 +246,12 @@ export default {
},
methods: {
/**
* 天数改变--自动查询列表
*/
daysChange() {
this.getData()
},
/**
* 取消解除比中关系
*/
cancelJcbzgx () {
......@@ -426,6 +432,11 @@ export default {
*/
confirmCxfh () {
let self = this
// 撤销复核原因必填
if(this.textarea == '') {
this.$message.error('请输入原因！')
return;
}
this.$axios({
method: 'post',
url: '/api/hit/update',
......
src/views/bzxxgl/fhxxTL.vue
<!--
* @Author: your name
* @Date: 2021-12-03 15:35:26
* @LastEditTime: 2021-12-13 20:21:33
* @LastEditTime: 2021-12-14 10:30:57
* @LastEditors: Please set LastEditors
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: \指纹系统\founder_vue\src\views\bzxxgl\fhxxLT.vue
......@@ -189,6 +189,17 @@
</div>
</div>
</div>
<!-- 确认解除 -->
<div class="relieveDialog" v-show="isRelieveVisible">
<div class="close">
<i class="iconfont icon-danchuangguanbianniu" @click="isRelieveVisible=false"></i>
</div>
<div class="desc">是否确认解除比中关系？</div>
<div class="btns">
<div class="btn confirmBtn" @click="confirmRelieveChange">确认</div>
<div class="btn cancelBtn" @click="isRelieveVisible=false">取消</div>
</div>
</div>
<!-- 加载动画 -->
<div class="loading" v-show="loading_sd">
<div class="loading-finger">
......@@ -208,6 +219,8 @@ export default {
name: 'fhxxLT',
data () {
return {
// 確認解除彈窗
isRelieveVisible: false,
id: '',
fhyj: '',
allData: {
......@@ -260,9 +273,9 @@ export default {
},
methods: {
/**
* 解除比中关系
* 確認解除比中关系
*/
relieveChange () {
confirmRelieveChange() {
let self = this
this.$axios({
method: 'post',
......@@ -279,6 +292,13 @@ export default {
}).catch(err => {
console.log(err);
})
this.isRelieveVisible = false
},
/**
* 解除比中关系
*/
relieveChange () {
this.isRelieveVisible = true
},
/**
* 未通过
......
vue.config.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-12-13 22:07:23
* @LastEditTime: 2021-12-14 13:56:14
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\vue.config.js
......@@ -92,14 +92,14 @@ module.exports = {
// target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
// target: "http://192.168.128.166:8099/", // 张 认定
// target: "http://192.168.128.124:8099/", // 湖南-张
// target: "http://192.168.128.114:8099", // 湖南-马
target: "http://192.168.128.114:8099", // 湖南-马
// target: "http://192.168.128.116:8099", // 湖南-王
// target: "http://192.168.128.118:8764", // 湖南-张呈光
// target: "http://172.18.116.73:8099/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/ ma
// target: "http://127.0.0.1:8099",
// target: "http://47.92.225.109:5602",
// target: "http://www.meetfood.cn:2390", // 湖南-线上
target:"http://zwpt.xzclub.top:9333/",
// target:"http://zwpt.xzclub.top:9333/",
// target: "http://192.168.128.115:8099", // 江
ws: true,
changeOrigin: true,
......
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