Skip to content

F
founder_vue
Commit 958e0d4a by 张超军
Options

空格拖动图片+表格动态计算

parent 987eb654
Showing with 468 additions and 239 deletions
public/image-edit/css/service-basic.css
.border{border:1px solid black;}.body-container{width:520px;height:520px;}.tui-image-editor-controls{min-height:250px;}.menu{padding:0;margin-bottom:5px;text-align:center;color:#544b61;font-weight:400;list-style-type:none;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;}.logo{margin:0 auto;width:300px;vertical-align:middle;}.header .name{padding:10px;line-height:50px;font-size:30px;font-weight:100;vertical-align:middle;}.header .menu{display:inline-block;}.menu-item{padding:10px;display:inline-block;cursor:pointer;vertical-align:middle;}.menu-item a{text-decoration:none;}.menu-item.no-pointer{cursor:default;}.menu-item.active,.menu-item:hover{background-color:#f3f3f3;}.menu-item.disabled{cursor:default;color:#bfbebe;}.align-left-top{text-align:left;vertical-align:top;}.range-narrow{width:80px;}.sub-menu-container{font-size:14px;margin-bottom:1em;display:none;}.tui-image-editor{height:100%;width:auto;}.tui-image-editor-canvas-container{top:0;height:520px;width:520px;max-height:520px !important;overflow:hidden;}.tui-colorpicker-container{margin:5px auto 0;}.tui-colorpicker-palette-toggle-slider{display:none;}.input-wrapper{position:relative;}.input-wrapper input{cursor:pointer;position:absolute;font-size:999px;left:0;top:0;opacity:0;width:100%;height:100%;overflow:hidden;}.btn-text-style{padding:5px;margin:3px 1px;border:1px dashed #bfbebe;outline:0;background-color:#eee;cursor:pointer;}.icon-text{font-size:20px;}.select-line-type{outline:0;vertical-align:middle;}#tui-color-picker{display:inline-block;vertical-align:middle;}#tui-text-palette{display:none;position:absolute;padding:10px;border:1px solid #bfbebe;background-color:#fff;z-index:9999;}
.border{border:1px solid black;}.body-container{width:520px;height:520px;}.tui-image-editor-controls{min-height:250px;}.menu{padding:0;margin-bottom:5px;text-align:center;color:#544b61;font-weight:400;list-style-type:none;user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-user-select:none;}.logo{margin:0 auto;width:300px;vertical-align:middle;}.header .name{padding:10px;line-height:50px;font-size:30px;font-weight:100;vertical-align:middle;}.header .menu{display:inline-block;}.menu-item{padding:10px;display:inline-block;cursor:pointer;vertical-align:middle;}.menu-item a{text-decoration:none;}.menu-item.no-pointer{cursor:default;}.menu-item.active,.menu-item:hover{background-color:#f3f3f3;}.menu-item.disabled{cursor:default;color:#bfbebe;}.align-left-top{text-align:left;vertical-align:top;}.range-narrow{width:80px;}.sub-menu-container{font-size:14px;margin-bottom:1em;display:none;}.tui-image-editor{height: 520px;;width: 520px;}.tui-image-editor-canvas-container{top:0;height:520px;width:520px;max-height:520px !important;overflow:hidden;}.tui-colorpicker-container{margin:5px auto 0;}.tui-colorpicker-palette-toggle-slider{display:none;}.input-wrapper{position:relative;}.input-wrapper input{cursor:pointer;position:absolute;font-size:999px;left:0;top:0;opacity:0;width:100%;height:100%;overflow:hidden;}.btn-text-style{padding:5px;margin:3px 1px;border:1px dashed #bfbebe;outline:0;background-color:#eee;cursor:pointer;}.icon-text{font-size:20px;}.select-line-type{outline:0;vertical-align:middle;}#tui-color-picker{display:inline-block;vertical-align:middle;}#tui-text-palette{display:none;position:absolute;padding:10px;border:1px solid #bfbebe;background-color:#fff;z-index:9999;}
public/image-edit/js/fabric-v4.2.0.js
......@@ -8744,6 +8744,7 @@ fabric.ElementsParser = function(elements, callback, options, reviver, parsingOp
*/
_createLowerCanvas: function (canvasEl) {
// canvasEl === 'HTMLCanvasElement' does not work on jsdom/node
canvasEl.style.width = '200px'
if (canvasEl && canvasEl.getContext) {
this.lowerCanvasEl = canvasEl;
}
......
public/index.html
<!--
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-10-02 16:20:15
* @LastEditTime: 2021-11-01 10:00:09
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\public\index.html
......@@ -15,7 +15,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/tui-color-picker.css">
<!-- <link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/service-basic.css">-->
<!-- <link rel="stylesheet" href="<%= BASE_URL %>image-edit/css/service-basic.css"> -->
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
......
src/App.vue
<!--
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-10-28 21:01:50
* @LastEditTime: 2021-11-01 15:54:45
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\App.vue
......@@ -15,9 +15,11 @@
<script>
import zoom from './utils/autosize'
export default {
mounted () {
created () {
console.log(window.innerHeight);
console.log(window.innerWidth);
},
mounted () {
console.log(this.$route);
// zoom('app')
// window.addEventListener('resize', function () {
......
src/router/modules/index.js
/*
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-10-28 16:05:12
* @LastEditTime: 2021-11-01 17:32:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
......@@ -109,7 +109,7 @@ export default [
component: () => import("@/views/Editor/Index.vue"),
children: [
{
path: "/zwbj/ryzwbj/:pid",
path: "/zwbj/ryzwbj/:id",
name: "ryzwbj",
hidden: true,
meta: {
......@@ -119,11 +119,11 @@ export default [
component: () => import("@/views/Editor/ryzwbj.vue")
},
{
path: "ajzwbj",
path: "/zwbj/ajzwbj/:id",
name: "ajzwbj",
hidden: true,
meta: {
title: "案件指纹编辑",
title: "案件指纹导入及编辑",
auth: "5"
},
component: () => import("@/views/Editor/ajzwbj.vue")
......
src/views/Editor/modules/ajzwbjLeft.scss
.ryzwbjLeft {
width: 448px;
width: 340px;
height: 100%;
padding: 24px;
box-sizing: border-box;
padding: 11px 24px;
box-sizing: border-box;
.title {
font-size: 16px;
font-family: Microsoft YaHei-Bold, Microsoft YaHei;
font-weight: bold;
color: #333333;
}
.asjbh {
font-size: 14px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #282f3c;
display: flex;
align-items: center;
span {
margin-right: 10px;
}
img {
width: 16px;
height: 16px;
margin-right: 5px;
}
.desc {
color: #055fe7;
}
}
.ryzwbj-content {
margin-top: 20px;
margin-top: 10px;
height: 100%;
/deep/ .el-tabs__item.is-left.is-active,
.el-tabs__item.is-top.is-active {
......@@ -29,7 +48,6 @@
}
.zzw {
width: 258px;
margin-left: 20px;
.zzw-select {
width: 100%;
display: flex;
......@@ -61,26 +79,40 @@
}
.left-right-hand {
margin-top: 5px;
/deep/ .el-tabs__item.is-top {
width: 129px;
padding: 0;
text-align: center;
}
/deep/ .el-tabs__nav-wrap.is-scrollable {
padding: 0;
}
/deep/ .el-tabs__item.is-top.is-active {
color: #055fe7;
}
.left-hand {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.lr-hand {
width: 100%;
height: 600px;
overflow: auto;
:nth-child(even) {
margin-left: 8px;
}
// display: flex;
// flex-wrap: wrap;
// justify-content: space-between;
/* 设置滚动条的样式 */
&::-webkit-scrollbar {
width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
/* 滚动槽 */
&::-webkit-scrollbar-track {
height: 65px;
-webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.3);
border-radius: 10px;
}
/* 滚动条滑块 */
&::-webkit-scrollbar-thumb {
border-radius: 10px;
height: 65px;
background: #dadde0;
}
// align-items: flex-start;
.fingerDom {
display: flex;
align-items: center;
flex-direction: column;
margin-bottom: 16px;
margin-bottom: 8px;
float: left;
.fingerPic {
position: relative;
width: 122px;
......@@ -114,8 +146,14 @@
text-align: center;
}
.finger-pic {
width: auto;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
img {
object-fit: contain;
}
margin-left: 0;
}
.finger-desc {
position: absolute;
......@@ -139,6 +177,39 @@
color: #666666;
}
}
.defaultfingerPic {
position: relative;
width: 122px;
height: 122px;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
.fingerPic {
width: 122px;
height: 122px;
background: #faf9f9;
border: 0;
border-radius: 2px;
}
}
}
.finger-total {
display: flex;
align-items: center;
justify-content: center;
width: 260px;
height: 40px;
background: #f6f8fa;
box-shadow: 0px -4px 6px 0px rgba(0, 0, 0, 0.06);
font-size: 12px;
font-family: MicrosoftYaHei;
color: #999999;
span {
color: #666666;
padding: 0 4px;
}
}
}
}
......
src/views/Editor/modules/ajzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-10-23 11:44:05
* @LastEditTime: 2021-11-01 20:35:57
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
-->
<template>
<div class="ryzwbjLeft">
<div class="title">案件指纹编辑</div>
<div class="title">案事件编号：</div>
<div class="asjbh">
<span>{{barcode}}</span>
<img src="@/assets/img/message.png" alt="">
<div class="desc">档案信息</div>
</div>
<div class="ryzwbj-content">
<el-tabs tab-position="left" style="height: 100%;">
<el-tab-pane label="指掌纹">
<div class="zzw">
<div class="zzw-select" @click="zzwChange($event)">
<div class="select-item" :class="{active: zwSelect==='指纹'}">指纹</div>
<div class="select-line"></div>
<div class="select-item" :class="{active: zwSelect==='掌纹'}">掌纹</div>
<div class="zzw">
<div class="zzw-select" @click="zzwChange($event)">
<div class="select-item" :class="{active: zwSelect==='指纹'}">指纹</div>
<div class="select-line"></div>
<div class="select-item" :class="{active: zwSelect==='掌纹'}">掌纹</div>
</div>
<div class="left-right-hand" v-if="zwSelect==='指纹'">
<div class="lr-hand" v-if="fingers.length>0">
<div class="fingerDom" v-for="(item,index) in fingers" :key="index" @click="FingersChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeFinger===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<div class="finger-pic">
<img src="../../../assets/img/finger.png" />
</div>
</div>
</div>
<div class="left-right-hand" v-if="zwSelect==='指纹'">
<el-tabs v-model="activeRollHand" @tab-click="handleRollClick">
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item,index) in fingersLeft" :key="index" @click="LeftFingersChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeLeftFinger===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<img class="finger-pic" src="../../../assets/img/img.png" />
</div>
</div>
</el-tab-pane>
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item,index) in fingersRight" :key="index" @click="RightFingersChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeRightFinger===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<img class="finger-pic" src="../../../assets/img/img.png" />
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="lr-hand" v-else>
<div class="fingerDom defaultfingerPic" v-for="(item,index) in 10" :key="index">
<div class="fingerPic">
</div>
</div>
<div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
<el-tabs v-model="activePainHand" @tab-click="handlePainClick">
<el-tab-pane label="左手" name="left" class="left-hand">
<div class="fingerDom" v-for="(item,index) in handsLeft" :key="index" @click="HandLeftChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeLeftHand===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<img class="finger-pic" src="../../../assets/img/zhangwen.png" />
</div>
</div>
</el-tab-pane>
<el-tab-pane label="右手" name="right" class="left-hand">
<div class="fingerDom" v-for="(item,index) in handsRight" :key="index" @click="HandRightChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeRightHand===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<img class="finger-pic" src="../../../assets/img/zhangwen.png" />
</div>
</div>
</el-tab-pane>
</el-tabs>
</div>
<div class="finger-total">
共计<span>4枚</span>指纹
</div>
</div>
<div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
<div class="lr-hand" v-if="hands.length>0">
<div class="fingerDom" v-for="(item,index) in hands" :key="index" @click="HandChange(index)">
<div class="fingerPic" :class="{fingerPicActive: activeHand===index}">
<div class="finger-number">{{(index+1) &lt; 10 ? ('0'+(index+1)) : (index+1)}}</div>
<div class="finger-pic">
<img src="../../../assets/img/zhangwen.png" />
</div>
</div>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="文档信息">文档信息</el-tab-pane>
<el-tab-pane label="重卡">重卡</el-tab-pane>
<el-tab-pane label="关联现场指纹">关联现场指纹</el-tab-pane>
<el-tab-pane label="操作记录">操作记录</el-tab-pane>
</el-tabs>
<div class="lr-hand" v-else>
<div class="fingerDom" v-for="(item,index) in 10" :key="index">
<div class="fingerPic">
</div>
</div>
</div>
<div class="finger-total">
共计<span>4枚</span>掌纹
</div>
</div>
</div>
</div>
</div>
</template>
......@@ -73,14 +72,15 @@
export default {
data () {
return {
// 案事件编号
barcode: '',
id: '',
zwSelect: '指纹',
activeRollHand: 'left',
activePainHand: 'left',
activeLeftFinger: '01',
activeRightFinger: '',
activeLeftHand: '01',
activeRightHand: '',
fingersLeft: [
activeFinger: '01',
activeHand: '01',
fingers: [
{
code: '06',
name: '拇',
......@@ -91,25 +91,18 @@ export default {
name: '食',
image: null
},
],
fingersRight: [
{
code: '01',
code: '06',
name: '拇',
image: null
},
{
code: '02',
code: '07',
name: '食',
image: null
},
{
code: '03',
name: '中',
image: null
},
],
handsLeft: [
hands: [
{
code: '16',
name: '拇',
......@@ -136,69 +129,30 @@ export default {
image: null
}
],
handsRight: [
{
code: '11',
name: '拇',
image: null
},
{
code: '12',
name: '食',
image: null
},
{
code: '13',
name: '中',
image: null
},
{
code: '14',
name: '环',
image: null
},
{
code: '15',
name: '小',
image: null
}
]
}
},
mounted () {
console.log(this.$route);
this.barcode = this.$route.query.barcode
this.id = this.$route.params.id
},
methods: {
/**
* @description: 切换右手掌纹
* @param {*} handIndex
* @return {*}
*/
HandRightChange (handIndex) {
this.activeRightHand = handIndex
},
/**
* @description: 切换左手掌纹
* @description: 切换掌纹
* @param {*} handIndex
* @return {*}
*/
HandLeftChange (handIndex) {
this.activeLeftHand = handIndex
FingersChange (handIndex) {
this.activeHand = handIndex
},
/**
* @description: 切换左手指纹
* @description: 切换指纹
* @param {*} finger
* @return {*}
*/
LeftFingersChange (fingerIndex) {
FingersChange (fingerIndex) {
console.log(fingerIndex);
this.activeLeftFinger = fingerIndex
},
/**
* @description: 切换右手指纹
* @param {*} finger
* @return {*}
*/
RightFingersChange (fingerIndex) {
console.log(fingerIndex);
this.activeRightFinger = fingerIndex
this.activeFinger = fingerIndex
},
/**
* @description: 滚动指纹-平面指纹-掌纹切换
......@@ -208,18 +162,6 @@ export default {
zzwChange (event) {
this.zwSelect = event.target.innerText
},
/**
* @description: 左右手切换
* @param {*} tab
* @param {*} event
* @return {*}
*/
handlePainClick (tab, event) {
console.log(tab, event);
},
handleRollClick (tab, event) {
console.log(tab, event);
},
},
}
</script>
......
src/views/Editor/modules/imageEd.scss
......@@ -923,16 +923,24 @@ $transOrigin: var(--transOrigin, 0px, 0px);
justify-content: center;
align-items: center;
.tui-image-editor {
width: 520px !important;
height: 520px !important;
width: 640px !important;
height: 640px !important;
}
/deep/.tui-image-editor-canvas-container,.lower-canvas,.upper-canvas {
max-height: 640px !important;
max-width: 640px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
}
.tzdDrawing {
width: 520px;
height: 520px;
width: 640px;
height: 640px;
position: absolute;
background: transparent;
overflow: hidden;
transform-origin: 320px 320px;
// transform-origin: $transOrigin;
// background-color: #999;
}
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-10-29 15:47:32
* @LastEditTime: 2021-11-01 17:13:58
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -501,7 +501,9 @@ export default {
originleft: null,
origintop: null,
// 角度
angle: 0
angle: 0,
// 是否按下了空格
isHandSpace: false
};
},
mounted () {
......@@ -545,8 +547,8 @@ export default {
var imageEditor = null
imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: 730,
cssMaxHeight: 644,
cssMaxWidth: 640,
cssMaxHeight: 640,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
......@@ -554,7 +556,7 @@ export default {
});
this.imageEditor = imageEditor
imageEditor.loadImageFromURL('img/dogsleep.jpg', 'SampleImage').then(function (sizeValue) {
imageEditor.loadImageFromURL('img/finger.bmp', 'SampleImage').then(function (sizeValue) {
console.log(sizeValue);
imageEditor.clearUndoStack();
});
......@@ -1124,6 +1126,17 @@ export default {
})
$(document).keydown(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = true
}
});
$(document).keyup(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = false
}
});
var ins = null
var originPointer = {}
console.log(document.querySelector(".tzdDrawing"));
......@@ -1135,7 +1148,7 @@ export default {
y: e.clientY,
}
// 开启拖拽
if (self.isHand) {
if (self.isHand || self.isHandSpace) {
// 放大后开启拖拽
self.startHand = true
if (self.zoomLevel > 1) {
......@@ -1249,7 +1262,10 @@ export default {
// $('.tzdDrawing').css('left', `${originleft + (x2 - x1)}px`)
// $('.tzdDrawing').css('top', `${origintop + (y2 - y1)}px`)
// $('.tzdDrawing').css('transform', `translate(${x2 - x1}px,${y2 - y1}px)`)
$('.tzdDrawing').css('transform', `translate(${originleft + (x2 - x1)}px,${origintop + (y2 - y1)}px) scale(${self.zoomLevel})`)
// $('.tzdDrawing').css('transform', `translate(${(originleft + (x2 - x1))/16}rem,${(origintop + (y2 - y1))/16}rem) scale(${self.zoomLevel})`)
}
// console.log(self.mouseEnlarge);
if (self.mouseEnlarge) {
......@@ -1266,7 +1282,7 @@ export default {
})
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$('.tzdDrawing').css('transform', `scale(${self.zoomLevel})`)
document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// console.log(`${originPointer.y}px,${originPointer.x}px`);
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.y}px ${originPointer.x}px`;
$('.tzdDom').css('z-index', `99999`)
......@@ -1285,7 +1301,7 @@ export default {
// $('.tzdDrawing').css('transform-origin', `${originPointer.y}px,${originPointer.x}px`)
// document.querySelector('.tzdDrawing').style.transformOrigin = `${originPointer.x}px ${originPointer.y}px`;
$('.tzdDrawing').css('transform', `scale(${self.zoomLevel})`)
document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// document.querySelector('.tzdDrawing').style.transformOrigin = "260px 260px";
// $('.tzdDrawing').css('z-index', `99`)
......@@ -1352,11 +1368,12 @@ export default {
});
// 角度
self.preangle = 0
var angle = 0
var direction_flag = false
var origin_direction_x = 0
var origin_direction_y = 0
document.querySelector('.greendirection').addEventListener('mousedown', function (e) {
document.body.addEventListener('mousedown', function (e) {
if (self.isdirection) {
direction_flag = true
origin_direction_x = e.clientX - 1135
......@@ -1365,7 +1382,7 @@ export default {
console.log(origin_direction_y);
}
})
document.querySelector('.greendirection').addEventListener('mousemove', function (e) {
document.body.addEventListener('mousemove', function (e) {
if (self.isdirection) {
if (direction_flag) {
let direction_x = e.clientX - 1135
......@@ -1380,6 +1397,7 @@ export default {
if (direction_x < origin_direction_x) {
angle = -angle
}
angle = self.preangle + angle
if (angle >= 90) {
angle = 90
}
......@@ -1391,9 +1409,10 @@ export default {
}
}
})
document.querySelector('.greendirection').addEventListener('mouseup', function (e) {
document.body.addEventListener('mouseup', function (e) {
if (self.isdirection) {
self.angle = angle
self.preangle = angle
direction_flag = false
}
})
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -10,7 +10,6 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
.imageBox {
display: flex;
.imageEd {
width: 766px;
display: flex;
flex-direction: column;
.imageEd_header {
......@@ -866,9 +865,53 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
}
.imageEd_main {
position: relative;
.small-drawing {
position: absolute;
width: 180px;
height: 180px;
background: #ffffff;
border-radius: 5px 0px 0px 0px;
border: 1px solid #d1d1d1;
left: 2px;
top: 2px;
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
img {
width: 160px;
height: 160px;
}
.blc {
position: absolute;
top: 0;
left: 0;
width: 128px;
height: 128px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
.blc_outter {
width: 100%;
height: 100%;
border: 1px solid #055fe7;
border-top: 1px solid red;
position: absolute;
top: 0;
left: 0;
}
.blc_inner {
width: 100%;
height: 100%;
border: 1px solid #ffffff;
border-top: 1px solid red;
position: absolute;
top: 0;
left: 0;
}
}
}
.drawing {
width: 766px;
height: 728px;
width: 880px;
height: 686px;
background: #ffffff;
border-radius: 8px;
border: 2px solid #d1d1d1;
......@@ -885,18 +928,72 @@ $BJDcolor: var(--BJDcolor, #e60012); // #e60012
top: 2px;
}
.body-container {
width: 730px;
height: 644px;
width: 640px;
height: 640px;
background: #ffffff;
display: flex;
justify-content: center;
align-items: center;
.tui-image-editor {
width: 640px !important;
height: 640px !important;
}
/deep/.tui-image-editor-canvas-container,
.lower-canvas,
.upper-canvas {
max-height: 640px !important;
max-width: 640px !important;
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
.blc {
position: absolute;
top: 0;
left: 0;
width: 512px;
height: 512px;
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.5);
z-index: 999;
.blc_outter {
width: 100%;
height: 100%;
border: 1px solid #055fe7;
border-top: 1px solid red;
position: absolute;
top: 0;
left: 0;
}
.blc_inner {
width: 100%;
height: 100%;
border: 1px solid #ffffff;
border-top: 1px solid red;
position: absolute;
top: 0;
left: 0;
}
}
}
}
.zzwswitch {
position: absolute;
right: 8px;
top: 16px;
width: 162px;
height: 118px;
background: #ffffff;
border-radius: 4px;
border: 1px solid #e6e6e8;
.zzwswitem-radio {
width: 159px;
height: 32px;
background: #f6f8fa;
border-radius: 3px 3px 0px 0px;
display: flex;
justify-content: center;
align-items: center;
}
.positions {
position: absolute;
right: 0;
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-10-23 15:32:59
* @LastEditTime: 2021-11-01 21:09:17
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -71,18 +71,32 @@
<div class="preview-source" v-show="isShowSourcePrivew">
<img :src="previewSource" alt="">
</div>
<!-- 小操作区域 -->
<div class="small-drawing">
<img src="@/assets/img/finger.png" alt="">
<div class="blc">
<div class="blc_inner"></div>
<div class="blc_outter"></div>
</div>
</div>
<!-- 主要操作区 -->
<div class="drawing">
<div class="title">{{fingerTitle}}</div>
<div class="body-container">
<div class="blc">
<div class="blc_inner"></div>
<div class="blc_outter"></div>
</div>
<div class="tui-image-editor"></div>
<img id="sourceImage" style="display:none" :src="'data:image/jpeg;base64,'+sourceImage" alt="">
</div>
</div>
<!-- 指纹-掌纹切换 -->
<div class="zzwswitch">
<el-radio v-model="zzwSwitch" label="1">指纹</el-radio>
<el-radio class="secondRadio" v-model="zzwSwitch" label="2">掌纹</el-radio>
<div class="zzwswitem-radio">
<el-radio v-model="zzwSwitch" label="1">指纹</el-radio>
<el-radio class="secondRadio" v-model="zzwSwitch" label="2">掌纹</el-radio>
</div>
<div class="positions">
<div class="head">
<div class="head-item">左</div>
......@@ -489,8 +503,8 @@ export default {
var imageEditor = null
imageEditor = new tui.ImageEditor('.tui-image-editor', {
cssMaxWidth: 730,
cssMaxHeight: 644,
cssMaxWidth: 640,
cssMaxHeight: 640,
selectionStyle: {
cornerSize: 20,
rotatingPointOffset: 70,
......
src/views/Editor/modules/ryzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-10-28 19:50:42
* @LastEditTime: 2021-11-01 17:32:47
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
......@@ -102,7 +102,7 @@ export default {
// 找到第一个有图片的指纹
finger: null,
// 人员编号
pid: '',
id: '',
zwSelect: '滚动指纹',
activeRollHand: 'left',
activePainHand: 'left',
......@@ -220,7 +220,7 @@ export default {
async mounted () {
let self = this
// console.log(this.$route);
this.pid = this.$route.params.pid
this.id = this.$route.params.id
await this.getPainFingers()
await this.getRollFingers()
......@@ -246,11 +246,11 @@ export default {
* @return {*}
*/
getRollFingerOrigin (seq) {
// ip:port/api/org/roll/{pid}/{seq}
// ip:port/api/org/roll/{id}/{seq}
let self = this
this.$axios({
method: 'get',
// url: `/api/org/roll/${self.pid}/${seq}?mnt=1`
// url: `/api/org/roll/${self.id}/${seq}?mnt=1`
url: `/api/org/roll/${1}/${seq}?mnt=1`
}).then(res => {
// console.log(res);
......@@ -272,11 +272,11 @@ export default {
* @return {*}
*/
getPainFingerOrigin (seq) {
// ip:port/api/org/plain/{pid}/{seq}
// ip:port/api/org/plain/{id}/{seq}
let self = this
this.$axios({
method: 'get',
// url: `/api/org/plain/${self.pid}/${seq}?mnt=1`
// url: `/api/org/plain/${self.id}/${seq}?mnt=1`
url: `/api/org/plain/${1}/${seq}?mnt=1`
}).then(res => {
// console.log(res);
......@@ -308,7 +308,7 @@ export default {
})
let res = await this.$axios({
method: 'get',
// url: '/api/png/roll/'+self.pid+'?mnt=1'
// url: '/api/png/roll/'+self.id+'?mnt=1'
url: '/api/png/roll/1?mnt=1'
})
// console.log(res);
......@@ -349,7 +349,7 @@ export default {
})
let res = await this.$axios({
method: 'get',
// url: '/api/png/plain/'+self.pid+'?mnt=1'
// url: '/api/png/plain/'+self.id+'?mnt=1'
url: '/api/png/plain/1?mnt=1'
})
// console.log(res);
......
src/views/SystemManage/UserManage.vue
......@@ -112,7 +112,8 @@
</el-tag>
<div class="table-data">
<el-table
height="580"
:height="height"
style="width: 100%;"
highlight-current-row
ref="multipleTable"
:data="tableData"
......@@ -121,29 +122,29 @@
>
<el-table-column type="selection" height width="auto" v-if="isSelected">
</el-table-column>
<el-table-column prop="username" label="用户名" width="150">
<el-table-column prop="username" label="用户名" :width="width1">
</el-table-column>
<el-table-column prop="truename" label="姓名" width="150">
<el-table-column prop="truename" label="姓名" :width="width1">
</el-table-column>
<el-table-column prop="policemanid" label="警号" width="150">
<el-table-column prop="policemanid" label="警号" :width="width2">
</el-table-column
><el-table-column prop="group" label="用户组" width="300">
><el-table-column prop="group" label="用户组" :width="width3">
</el-table-column>
<el-table-column prop="unitname" label="所属单位" width="210">
<el-table-column prop="unitname" label="所属单位" :width="width2">
</el-table-column>
<el-table-column prop="roleName" label="角色">
<el-table-column prop="roleName" label="角色" :width="width4">
<template slot-scope="scope">
<div class="tags" v-for="item in scope.row.roleName">
{{ item }}
</div>
</template>
</el-table-column>
<el-table-column prop="groupid_list" label="权限">
<el-table-column prop="groupid_list" label="权限" :width='width5'>
<template slot-scope="scope">
<div v-for="item in scope.row.roleName">{{ item }}/</div>
</template>
</el-table-column>
<el-table-column prop="status" label="启用状态" width="200">
<el-table-column prop="status" label="启用状态" :width="width1">
<template slot-scope="scope">
<div v-if="scope.row.status === 0" class="circle-red"></div>
<div v-if="scope.row.status === 1" class="circle-blue"></div>
......@@ -328,8 +329,25 @@
import "@/icons/ic_add.svg";
export default {
name: "UserManage",
created () {
let w1 = 1920
let w2 = window.innerWidth
this.height = this.height * w2 / w1
this.width1 = this.width1 * w2 / w1
this.width2 = this.width2 * w2 / w1
this.width3 = this.width3 * w2 / w1
this.width4 = this.width4 * w2 / w1
this.width5 = this.width5 * w2 / w1
},
data() {
return {
width5: 180,
width4: 350,
width3: 200,
width2: 150,
width1: 100,
height: 580,
user: {
userId: "", // 主见
username: "", //用户名
......
src/views/cxyrd/QueryConfirm.vue
......@@ -151,9 +151,9 @@
<el-link type="primary" :underline="false" style="margin-left:1.25rem;" @click="toggleSelection()">清除</el-link>
</el-tag>
<div class="confirm_main_table">
<el-table style="width: 100%" height="500" class="mineral-table" border @selection-change="handleSelectionChange" ref="confirmTable" tooltip-effect="dark" :data="list" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="queryId" @row-click="confirm" @expand-change="hadnlExpandChange">
<el-table style="width: 100%; max-height: 31.25rem" :height="height" class="mineral-table" border @selection-change="handleSelectionChange" ref="confirmTable" tooltip-effect="dark" :data="list" :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" row-key="queryId" @row-click="confirm" @expand-change="hadnlExpandChange">
<el-table-column type="selection" height width="auto" v-if="isSelected"></el-table-column>
<el-table-column prop="" label="任务号/查询号" width="225">
<el-table-column prop="" label="任务号/查询号" :width="cxyrdWidth1">
<template slot-scope="scope">
<svg-icon style="width: .875rem;height: .6875rem;margin-bottom: .125rem ;margin-left: .3125rem ;" v-if="scope.row.children || scope.row.children === null" icon-class="tree_f">
</svg-icon>
......@@ -355,9 +355,27 @@ export default {
{ value: "-2", name: "同步特征", type: "querystates" }
],
expanded: false, // 展开标志
historyDialogVisible: false
historyDialogVisible: false,
cxyrdWidth1: 200,
height: 450,
// cxyrdWidth1: sessionStorage.getItem('cxyrdWidth1'),
// height: sessionStorage.getItem('tableHeight')
};
},
created () {
let self = this
let w1 = 1920
let h1 = 450
let w2 = window.innerWidth
this.height = h1 * w2 / w1
this.cxyrdWidth1 = this.cxyrdWidth1 * w2 / w1
content.forEach((item) => {
// console.log(item);
self.$set(item, 'width', item.width * w2 / w1)
})
console.log(content);
},
watch: {
// 批量处理
checkedProps (val) {
......@@ -805,11 +823,17 @@ export default {
}
},
mounted () {
console.log(this.height);
// console.log(window.innerHeight);
// console.log(window.innerWidth);
// console.log(document.querySelector('.footer').offsetTop);
// console.log(document.querySelector('.confirm_main').offsetTop);
// let h1 = window.innerHeight
// let h2 = document.querySelector('.footer').offsetTop
// let h3 = document.querySelector('.confirm_main').offsetTop
// this.height = h1 -h2 -h3
// console.log(this.height);
this.search();
// zoom('confirm_base')
// window.addEventListener('resize', function () {
// zoom('homepage_hero_module')
// })
}
};
// 用户ID 下拉的数据
......
src/views/cxyrd/modules/LTCandidate.vue
<template>
<div class="lt_candidate">
<div class="lt_cnadidate_search">
<!-- <el-dropdown trigger="click" @command="choose">-->
<!-- <span class="el-dropdown-link">-->
<!-- 指纹-->
<!-- <i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item command="1">指纹</el-dropdown-item>-->
<!-- <el-dropdown-item command="2">掌纹</el-dropdown-item>-->
<!-- &lt;!&ndash; <div class="label" @click="choose(1)">指纹</div>-->
<!-- <div class="label" @click="choose(2)">掌纹</div> &ndash;&gt;-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- 指纹下拉框-->
<!-- <el-dropdown trigger="click" @command="choose">-->
<!-- <span class="el-dropdown-link">-->
<!-- 指纹-->
<!-- <i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>-->
<!-- </span>-->
<!-- <el-dropdown-menu slot="dropdown">-->
<!-- <el-dropdown-item command="1">指纹</el-dropdown-item>-->
<!-- <el-dropdown-item command="2">掌纹</el-dropdown-item>-->
<!-- &lt;!&ndash; <div class="label" @click="choose(1)">指纹</div>-->
<!-- <div class="label" @click="choose(2)">掌纹</div> &ndash;&gt;-->
<!-- </el-dropdown-menu>-->
<!-- </el-dropdown>-->
<!-- 指纹下拉框-->
<div class="finger-dropdown">
<div @click="fingerDropdownChange">
<span>指纹</span><i style=" width: 1rem; height: 1rem" class="el-icon-caret-bottom"></i>
......@@ -50,11 +50,11 @@
</div>
<div class="lt_candidate_number">
<el-table highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" :data="tableData" ref="singleTable" :row-class-name="tableRowClassName">
<el-table-column label="排名" type="index" width="60">
<el-table-column label="排名" type="index" :width="width1">
</el-table-column>
<!-- <el-table-column label="排名" width="50"></el-table-column>-->
<el-table-column prop="score" label="得分" width="70"></el-table-column>
<el-table-column prop="destseqno" label="指位" width="90" :render-header="icons">
<el-table-column prop="score" label="得分" :width="width2"></el-table-column>
<el-table-column prop="destseqno" label="指位" :width="width3" :render-header="icons">
<template slot-scope="scope">
{{
scope.row.destseqno == "1"
......@@ -203,6 +203,9 @@ export default {
name: "LTCandidate",
data () {
return {
width3: 90,
width2: 70,
width1: 60,
checked: true,
tableData: null,
// 不做处理的数据
......@@ -248,6 +251,13 @@ export default {
},
created () {
let self = this;
let w1 = 1920
let w2 = window.innerWidth
this.width1 = this.width1 * w2 / w1
this.width2 = this.width2 * w2 / w1
this.width3 = this.width3 * w2 / w1
self.$bus.on("initCandidate", tableData => {
console.log(tableData);
self.tableData = tableData;
......@@ -267,14 +277,14 @@ export default {
* 选择指纹类型
* @param e
*/
changefingershowType(e) {
changefingershowType (e) {
this.fingershowType = e.target.innerHTML
this.isFingerDropdown = false
},
/**
* 指纹下拉框
*/
fingerDropdownChange() {
fingerDropdownChange () {
this.isFingerDropdown = !this.isFingerDropdown
},
/**
......
src/views/cxyrd/modules/LTSrc.vue
......@@ -9,9 +9,9 @@
<!-- 源数据区 -->
<div class="lt_middle_src_data">
<el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius tableHeight" @row-click="getFirgerPrintDetail" :row-class-name="tableRowClassName">
<el-table-column prop="qqid" label="查询ID" width="90"></el-table-column>
<el-table-column prop="qqid" label="查询ID" :width="width1"></el-table-column>
<el-table-column prop="barcode" label="源条码号" width="auto"></el-table-column>
<el-table-column prop="fingerCount" label="枚数" width="70"></el-table-column>
<el-table-column prop="fingerCount" label="枚数" :width="width2"></el-table-column>
</el-table>
<div class="lt_middle_bottom">
<span>该任务共计<b>{{total}}</b>条查询</span>
......@@ -84,8 +84,17 @@ export default {
// }
// }
// },
created () {
let w1 = 1920
let w2 = window.innerWidth
this.width1 = this.width1 * w2 / w1
this.width2 = this.width2 * w2 / w1
},
data () {
return {
width2: 70,
width1: 90,
rwh: null,
checked: true,
enumerate: null,
......
src/views/cxyrd/modules/TLCandidate.vue
......@@ -10,9 +10,9 @@
</div>
</div>
<el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" class="lt_candidate_table" :data="tableData" :row-class-name="tableRowClassName">
<el-table-column label="排名" type="index" width="50"> </el-table-column>
<el-table-column prop="score" label="得分" width="50"></el-table-column>
<el-table-column label="序号" prop="destseqno" width="50"></el-table-column>
<el-table-column label="排名" type="index" :width="width1"> </el-table-column>
<el-table-column prop="score" label="得分" :width="width1"></el-table-column>
<el-table-column label="序号" prop="destseqno" :width="width1"></el-table-column>
<el-table-column prop="destbarcode" label="目标条码号" width="auto"></el-table-column>
</el-table>
</div>
......@@ -23,6 +23,7 @@ export default {
name: "TLCandidate",
data () {
return {
width1: 50,
input3: "",
tableData: [],
sourceTableData: [],
......@@ -30,6 +31,12 @@ export default {
total: 0
};
},
created () {
let w1 = 1920
let w2 = window.innerWidth
this.width1 = this.width1 * w2 / w1
},
mounted () {
let self = this
this.$bus.on('initTLCandidate', tableData => {
......
src/views/cxyrd/modules/TLSrc.vue
......@@ -8,9 +8,9 @@
<!-- 数据 -->
<div class="data">
<el-table ref="singleTable" highlight-current-row @current-change="handleCurrentChange" :data="dataList" class="lt_candidate_table border_radius tableHeight" :row-class-name="tableRowClassName">
<el-table-column prop="qqid" label="查询ID" width="80"></el-table-column>
<el-table-column prop="qqid" label="查询ID" :width="width1"></el-table-column>
<el-table-column prop="barcode" label="源条码号" width="auto"></el-table-column>
<el-table-column prop="fingerCount" label="枚数" width="80"></el-table-column>
<el-table-column prop="fingerCount" label="枚数" :width="width1"></el-table-column>
</el-table>
<div class="bottom">
<span>该任务共计<b>{{ total }}</b>条查询</span>
......@@ -269,8 +269,15 @@ export default {
}
}
},
created () {
let w1 = 1920
let w2 = window.innerWidth
this.width1 = this.width1 * w2 / w1
},
data () {
return {
width1: 80,
rwh: 21,
checked: true,
tableData: null,
......
vue.config.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-10-30 10:21:18
* @LastEditTime: 2021-11-01 17:18:18
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\vue.config.js
......@@ -91,8 +91,8 @@ module.exports = {
"/api": {
// target: "http://192.168.0.137:8080/", //统一的请求头部每次修改都要重启才会生效 http://39.99.224.27:8006/
// target: "http://172.18.108.2:8099/", // 张 认定
target: "http://192.168.128.112:8099", // 湖南-张
// target: "http://192.168.128.113:8099", // 湖南-马
// target: "http://192.168.128.112:8099", // 湖南-张
target: "http://192.168.128.113:8099", // 湖南-马
// 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",
......
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