Skip to content

F
founder_vue
Commit afbde7f9 by liyuhang19990520
Options

合并

parents a3af7d04 ed1b0050
Showing with 842 additions and 274 deletions
public/image-edit/js/fabric-v4.2.0.js
......@@ -14140,6 +14140,7 @@ fabric.util.object.extend(fabric.StaticCanvas.prototype, /** @lends fabric.Stati
* @type Boolean
* @default
*/
// 禁止拖动
selectable: false,
/**
......
src/components/ImageEd.scss
......@@ -1126,14 +1126,18 @@ div {
display: flex;
align-items: center;
padding: 0 24px;
color: #666666;
.btn {
cursor: pointer;
background: #f6f8fa;
box-shadow: 4px 4px 4px 0px rgba(193, 216, 251, 0.8),
-4px -4px 4px 0px #ffffff;
border-radius: 4px;
padding: 9px 12px;
// padding: 9px 12px;
width: 64px;
padding: 9px 0;
margin-right: 16px;
text-align: center;
&:last-child {
margin-right: 0;
}
......@@ -1144,6 +1148,10 @@ div {
color: #ffffff;
}
}
.light_dbd {
width: 128px;
height: 40px;
}
.line {
width: 1px;
height: 40px;
......
src/components/ImageEd.vue
<!--
* @Author: your name
* @Date: 2021-09-09 09:28:46
* @LastEditTime: 2021-11-08 20:01:12
* @LastEditTime: 2021-11-09 21:14:34
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\cxyrd\LTz.vue
......@@ -401,7 +401,7 @@
<div class="btn" :class="{blendActive: isBlendActive}" @click="changeBlend">差异化</div>
<div class="btn" :class="{multiplyActive: isMultiplyActive}" @click="changeMultiply">正片叠底</div>
<div class="btn" :class="{removeWhiteActive: isRemoveWhiteActive}" @click="changeRemoveWhite">去白</div>
<div class="btn" :class="{brightnessActive: isBrightnessActive}" @click="changeBrightness">亮度/对比度</div>
<div class="btn light_dbd" :class="{brightnessActive: isBrightnessActive}" @click="changeBrightness">亮度/对比度</div>
<!-- 去白弹框 -->
<div class="remove-white" v-show="optionsRemoveWhite">
<div class="title">去白</div>
......
src/router/index.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-11-11 16:53:53
* @LastEditTime: 2021-11-11 16:58:07
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\router\index.js
......@@ -66,7 +66,8 @@ const router = new VueRouter({
// });
router.beforeEach((to, from, next) => {
if (from.name === 'ryzwbj') {
console.log(from);
if(from.name === 'ryzwbj' || from.name === 'ajzwbj') {
// 清空session
sessionStorage.clear()
}
......
src/router/modules/index.js
/*
* @Author: your name
* @Date: 2021-09-07 09:58:13
* @LastEditTime: 2021-11-11 16:15:25
* @LastEditTime: 2021-11-11 16:58:44
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \founder_vue\src\router\modules\index.js
......
src/views/AllPersonnelBase/modules/fztm.vue
......@@ -19,12 +19,15 @@
<el-input
v-if="type== 'ry'"
v-model="rowData.ysxtAsjxgrybh"
:disabled="true"
></el-input>
<el-input
v-else
v-model="rowData.ysxtAsjbh"
:disabled="true"
></el-input>
</el-form-item>
<div style="height:16px"></div>
<el-form-item
label="新数据条码号："
prop='barcode'
......@@ -193,6 +196,7 @@ export default {
right: -4px;
}
.tip1 {
margin-top: 26px;
height: 22px;
line-height: 22px;
font-size: 14px;
......
src/views/AllPersonnelBase/modules/ggrytm.vue
......@@ -19,14 +19,21 @@
label="源条码号："
v-if="this.type == 'ry'"
>
<el-input v-model="rowData.ysxtAsjxgrybh"></el-input>
<el-input
v-model="rowData.ysxtAsjxgrybh"
:disabled="true"
></el-input>
</el-form-item>
<el-form-item
label="源条码号："
v-else
v-if="this.type == 'aj'"
>
<el-input v-model="rowData.ysxtAsjbh"></el-input>
<el-input
v-model="rowData.ysxtAsjbh"
:disabled="true"
></el-input>
</el-form-item>
<div style="height:16px"></div>
<el-form-item
label="修改条码号："
prop='barcode'
......@@ -190,6 +197,7 @@ export default {
padding: 0;
}
.tip1 {
margin-top: 26px;
height: 22px;
line-height: 22px;
font-size: 14px;
......
src/views/AllPersonnelBase/qbalk.vue
......@@ -734,12 +734,7 @@ export default {
*/
handleClick (row) {
console.log(row);
this.$router.push({
path: '/zwbj/ajzwbj/' + row.id,
query: {
barcode: row.barcode
}
})
this.$router.push('/zwbj/ajzwbj/' + row.id + '/' + row.ysxtAsjbh)
},
/**
* @description: 单选事件
......
src/views/Editor/modules/ajzwbjLeft.vue
<!--
* @Author: your name
* @Date: 2021-10-22 09:42:07
* @LastEditTime: 2021-11-01 20:35:57
* @LastEditTime: 2021-11-10 16:05:35
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\ryzwbjLeft.vue
......@@ -23,11 +23,12 @@
</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="fingerDom" v-for="(item,index) in fingers" :key="index" @click="FingersChange(index, item)">
<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" />
<!-- <img src="../../../assets/img/finger.png" /> -->
<img :src="'data:image/jpeg;base64,'+item.image" alt="">
</div>
</div>
</div>
......@@ -39,7 +40,7 @@
</div>
</div>
<div class="finger-total">
共计<span>4枚</span>指纹
共计<span>{{fingers.length}}枚</span>指纹
</div>
</div>
<div class="left-right-hand" v-else-if="zwSelect==='掌纹'">
......@@ -48,7 +49,8 @@
<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" />
<!-- <img src="../../../assets/img/zhangwen.png" /> -->
<img :src="'data:image/jpeg;base64,'+item.image" alt="">
</div>
</div>
</div>
......@@ -69,9 +71,12 @@
</template>
<script>
import { mapState } from 'vuex';
export default {
data () {
return {
// 上一次的指纹序号
preSeq: '',
// 案事件编号
barcode: '',
id: '',
......@@ -131,28 +136,116 @@ export default {
],
}
},
computed: {
...mapState({
seq: state => state.zwbj.seq,
preTzdArr: state => state.zwbj.pretzdall,
autopretzdall: state => state.zwbj.autopretzdall,
})
},
mounted () {
let self = this
console.log(this.$route);
this.barcode = this.$route.query.barcode
this.barcode = this.$route.params.barcode
this.id = this.$route.params.id
self.preSeq = this.activerollFinger
// 获取案件指纹
this.getCaseFinger()
},
methods: {
/**
* @description: 切换掌纹
* @param {*} handIndex
* @return {*}
* 获取案件指纹原图
*/
FingersChange (handIndex) {
this.activeHand = handIndex
getCaseOrigin (seq) {
this.$store.commit('zwbj/setSeq', seq)
let self = this
this.$axios({
method: 'get',
url: `/api/org/case/${self.id}/${seq}?mnt=1`,
loading: false
}).then(res => {
console.log(res);
if (res.data.code === 0) {
for (const key in res.data.ret) {
if (Object.hasOwnProperty.call(res.data.ret, key)) {
const element = res.data.ret[key];
// 指纹编辑区域发送指纹数据，替换指纹图片
self.$bus.emit('ajzwbjImage', element.image)
self.$bus.emit('ajzwbjTDZ')
}
}
}
})
},
/**
* 获取案件指纹
*/
getCaseFinger () {
let self = this
this.$axios({
method: 'get',
url: '/api/org/case/' + self.id + '?mnt=1'
}).then(res => {
// console.log(res);
if (res.data.code === 0) {
// self.fingers = res.data.ret
self.fingers = []
for (const key in res.data.ret) {
if (Object.hasOwnProperty.call(res.data.ret, key)) {
const element = res.data.ret[key];
self.fingers.push({
code: element.seq,
image: element.image
})
}
}
// console.log(self.fingers);
// 自动获取第一个
if (self.fingers.length > 0) {
this.activeFinger = 0
self.FingersChange(0, self.fingers[0])
}
} else {
self.$message.error(res.data.message)
}
}).catch(err => {
console.log(err);
})
},
// /**
// * @description: 切换掌纹
// * @param {*} handIndex
// * @return {*}
// */
// FingersChange (handIndex) {
// this.activeHand = handIndex
// },
/**
* @description: 切换指纹
* @param {*} finger
* @return {*}
*/
FingersChange (fingerIndex) {
FingersChange (fingerIndex, finger) {
console.log(fingerIndex);
this.activeFinger = fingerIndex
let self = this
if (this.preSeq) {
// 保存当前的指位特征点信息
// 直接覆盖之前的数据
console.log(self.preTzdArr);
if (self.preTzdArr && self.preTzdArr.length >= 0) {
sessionStorage.setItem(this.preSeq, JSON.stringify(self.preTzdArr))
sessionStorage.setItem(`auto_tzdDom${this.preSeq}`, JSON.stringify(self.autopretzdall))
}
self.$store.commit('zwbj/setTzdall', null)
self.$store.commit('zwbj/setAutoTzdall', null)
}
this.preSeq = finger.code
// 调取获取原图接口
this.getCaseOrigin(finger.code)
},
/**
* @description: 滚动指纹-平面指纹-掌纹切换
......
src/views/Editor/modules/imageEd.scss
......@@ -944,6 +944,7 @@ $transOrigin: var(--transOrigin, 0px, 0px);
background: transparent;
overflow: hidden;
transform-origin: 320px 320px;
z-index: 9999;
// transform-origin: $transOrigin;
// background-color: #999;
}
......
src/views/Editor/modules/imageEd.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-09 20:02:20
* @LastEditTime: 2021-11-10 18:20:00
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -619,7 +619,7 @@ export default {
// 笔刷颜色选择器
// var brushColorpicker = tui.colorPicker.create({
// container: $('#tui-brush-color-picker')[0],
// color: '#FFAA00',
// color: '#FFFD0F',
// preset: ['#FF4041', '#FF6619', '#FFBB3B', '#08BD9E', '#1AE8F2', '#00AAFF', '#9E5FFF', '#055FE7'],
// usageStatistics: false
// });
......@@ -826,7 +826,7 @@ export default {
// imageEditor.stopDrawingMode();
// imageEditor.startDrawingMode('LINE_DRAWING', {
// width: 4,
// color: '#FFAA00',
// color: '#FFFD0F',
// arrowType: {
// head: 'triangle' // triangle
// }
......@@ -834,7 +834,7 @@ export default {
// imageEditor
// .addShape('circle', {
// fill: '#FFAA00',
// fill: '#FFFD0F',
// stroke: 'blue',
// strokeWidth: 0,
// rx: 4,
......@@ -988,17 +988,17 @@ export default {
self.isReset = true
// 旋转角度同样恢复到0
self.inputRotationRange = 0
console.log(self.startPlace,222);
console.log(self.startPlace, 222);
// 事件不能连续重复执行，需要缓存时间
setTimeout(() => {
console.log(11111,-self.startPlace)
console.log(11111, -self.startPlace)
imageEditor.rotate(-parseInt(self.startPlace))
imageEditor.resetZoom();
self.startPlace = 0;
}, 200);
//重置位置变量
self.move_left = 0;
self.move_top = 0;
self.move_top = 0;
self.zoomLevel = 1;
imageEditor.resetFlip().then(function (status) {
console.log('flipX: ', status.flipX);
......@@ -1225,11 +1225,11 @@ export default {
$('.tzdDom .head').css('width', '8px')
$('.tzdDom .head').css('height', '8px')
$('.tzdDom .head').css('border-radius', '8px')
$('.tzdDom .head').css('background-color', '#ffaa00')
$('.tzdDom .head').css('background-color', '#FFFD0F')
$('.tzdDom .direction').css('width', '20px')
$('.tzdDom .direction').css('height', '2px')
$('.tzdDom .direction').css('background-color', '#ffaa00')
$('.tzdDom .direction').css('background-color', '#FFFD0F')
$(`#tzd${self.tzdId}`).css("left", (item.zwzxd_tzxzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.tzdId}`).css("top", (item.zwzxd_tzyzb - 4) / self.zoomLevel + "px");
......@@ -1320,11 +1320,11 @@ export default {
$('.tzdDom .head').css('width', '8px')
$('.tzdDom .head').css('height', '8px')
$('.tzdDom .head').css('border-radius', '8px')
$('.tzdDom .head').css('background-color', '#ffaa00')
$('.tzdDom .head').css('background-color', '#FFFD0F')
$('.tzdDom .direction').css('width', '20px')
$('.tzdDom .direction').css('height', '2px')
$('.tzdDom .direction').css('background-color', '#ffaa00')
$('.tzdDom .direction').css('background-color', '#FFFD0F')
// self.zoomLevel
// $(`#tzd${self.tzdId}`).css("left", e.pageX - $('.tzdDrawing').offset().left - 4 + "px");
......@@ -1337,7 +1337,7 @@ export default {
// 鼠标右击
if (e.which === 3) {
console.log(e);
if (e.target.className == "head" || e.target.className == "direction") {
if (e.target.className == "head" || e.target.className == "direction" || e.target.className == 'auto_tzdDom') {
// 删除该特征点
let tdzindex = self.tzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id.substring(3, e.target.parentNode.id.length);
......@@ -1353,21 +1353,48 @@ export default {
}
self.tzdnumber = self.tzdArr.length
// console.log(self.tzdArr);
// 全部数据保存
var tzdall_shou = []
self.tzdArr.forEach(item => {
tzdall_shou.push({
id: item.id,
zwtzd_tzfx: item.angle,
zwzxd_tzxzb: item.x,
zwzxd_tzyzb: item.y
})
})
self.$store.commit('zwbj/setTzdall', tzdall_shou)
// 删除自动提取的特征点
console.log(self.autoTzdArr);
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id;
})
console.log(auto_tzdindex);
if (auto_tzdindex != -1) {
self.autoTzdArr.splice(auto_tzdindex, 1)
$(e.target.parentNode).css('border', '2px solid red');
setTimeout(() => {
$(e.target.parentNode).remove();
}, 1000);
// 更新vuex数据
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
if (e.target.className == 'auto_tzdDom') {
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id;
})
console.log(auto_tzdindex);
if (auto_tzdindex != -1) {
self.autoTzdArr.splice(auto_tzdindex, 1)
$(e.target.parentNode).css('border', '2px solid red');
setTimeout(() => {
$(e.target.parentNode).remove();
}, 1000);
// 更新vuex数据
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
}
} else {
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id;
})
console.log(auto_tzdindex);
if (auto_tzdindex != -1) {
self.autoTzdArr.splice(auto_tzdindex, 1)
$(e.target.parentNode).css('border', '2px solid red');
setTimeout(() => {
$(e.target.parentNode).remove();
}, 1000);
// 更新vuex数据
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
}
}
// auto_tzdDom
}
......@@ -1508,6 +1535,8 @@ export default {
// self.$set(self.tzdArr[self.tzdId], 'angle', obj.deg)
self.tzdArr[objindex].angle = obj.deg
} else {
console.log(self.tzdArr);
console.log(self.tzdId);
let objindex = self.tzdArr.findIndex((item) => {
return item.id == self.tzdId
})
......@@ -1633,11 +1662,11 @@ export default {
$('.auto_tzdDom .head').css('width', '8px')
$('.auto_tzdDom .head').css('height', '8px')
$('.auto_tzdDom .head').css('border-radius', '8px')
$('.auto_tzdDom .head').css('background-color', '#ffaa00')
$('.auto_tzdDom .head').css('background-color', '#FFFD0F')
$('.auto_tzdDom .direction').css('width', '20px')
$('.auto_tzdDom .direction').css('height', '2px')
$('.auto_tzdDom .direction').css('background-color', '#ffaa00')
$('.auto_tzdDom .direction').css('background-color', '#FFFD0F')
$(`#tzd${self.tzdId}`).css("left", (item.zwzxd_tzxzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.tzdId}`).css("top", (item.zwzxd_tzyzb - 4) / self.zoomLevel + "px");
......@@ -1655,7 +1684,7 @@ export default {
self.autoTzdArr = JSON.parse(sessionStorage.getItem(`auto${this.seq}`))
self.autoTzdArr.forEach((item, index) => {
$(
`<div id="tzd${self.id}" class="auto_tzdDom"><div class="head"></div><div class="direction"></div></div>`
`<div id="${item.id}" class="auto_tzdDom"><div class="head"></div><div class="direction"></div></div>`
).appendTo(".tzdDrawing");
$('.auto_tzdDom').css('display', 'flex')
$('.auto_tzdDom').css('align-items', 'center')
......@@ -1665,16 +1694,16 @@ export default {
$('.auto_tzdDom .head').css('width', '8px')
$('.auto_tzdDom .head').css('height', '8px')
$('.auto_tzdDom .head').css('border-radius', '8px')
$('.auto_tzdDom .head').css('background-color', '#ffaa00')
$('.auto_tzdDom .head').css('background-color', '#FFFD0F')
$('.auto_tzdDom .direction').css('width', '20px')
$('.auto_tzdDom .direction').css('height', '2px')
$('.auto_tzdDom .direction').css('background-color', '#ffaa00')
$('.auto_tzdDom .direction').css('background-color', '#FFFD0F')
$(`#tzd${self.id}`).css("left", (item.zwzxd_tzxzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.id}`).css("top", (item.zwzxd_tzyzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.id}`).css("box-sizing", "border-box");
$("#tzd" + self.id).css("transform", `rotate(${item.zwtzd_tzfx}deg)`);
$(`#${item.id}`).css("left", (item.zwzxd_tzxzb - 4) / self.zoomLevel + "px");
$(`#${item.id}`).css("top", (item.zwzxd_tzyzb - 4) / self.zoomLevel + "px");
$(`#${item.id}`).css("box-sizing", "border-box");
$("#" + item.id).css("transform", `rotate(${item.zwtzd_tzfx}deg)`);
})
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
// 将自动提取的特征点存入session中
......@@ -1880,7 +1909,7 @@ export default {
// this.imageEditor.stopDrawingMode();
// this.imageEditor.startDrawingMode('LINE_DRAWING', {
// width: 4,
// color: '#FFAA00',
// color: '#FFFD0F',
// arrowType: {
// head: 'triangle' // triangle
// }
......@@ -1925,7 +1954,7 @@ export default {
}, 200);
//重置位置变量
self.move_left = 0;
self.move_top = 0;
self.move_top = 0;
self.zoomLevel = 1;
self.imageEditor.resetFlip().then(function (status) {
console.log('flipX: ', status.flipX);
......@@ -1940,7 +1969,7 @@ export default {
// self.zoomLevel = 1;
// this.imageEditor.rotate(-parseInt(-self.startPlace));
// self.startPlace = 0;
// // 特征点图层缩放设置为1
// $('.tzdDrawing').css('transform', 'scale(1)');
},
......
src/views/Editor/modules/imageEdAJ.scss
......@@ -844,6 +844,7 @@ $directionRotate: var(--directionRotate, 0deg);
background: transparent;
overflow: hidden;
transform-origin: 320px 320px;
z-index: 9999;
// transform-origin: $transOrigin;
// background-color: #999;
}
......@@ -1114,6 +1115,7 @@ $directionRotate: var(--directionRotate, 0deg);
display: flex;
align-items: center;
padding: 0 16px;
position: relative;
.blcbtn {
cursor: pointer;
width: 40px;
......@@ -1131,6 +1133,35 @@ $directionRotate: var(--directionRotate, 0deg);
height: 26px;
}
}
.blcbtn-options {
z-index: 100;
position: absolute;
top: 50px;
left: 16px;
width: 286px;
height: 285px;
background: #ffffff;
box-shadow: 0px 14px 30px 0px rgba(0, 21, 51, 0.25);
border-radius: 6px;
.blcbtn-head {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #e6e6e8;
height: 50px;
padding: 0 24px;
.head-title {
font-size: 16px;
font-family: MicrosoftYaHei;
color: #282f3c;
}
.head-close {
cursor: pointer;
color: #b1b6c2;
font-size: 20px;
}
}
}
.txblyz {
cursor: pointer;
margin-right: 28px;
......
src/views/Editor/modules/imageEdAJ.vue
<!--
* @Author: your name
* @Date: 2021-10-22 11:36:10
* @LastEditTime: 2021-11-09 16:19:34
* @LastEditTime: 2021-11-10 18:18:24
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\src\views\Editor\modules\imageEd.vue
......@@ -155,6 +155,18 @@
<div class="blcbtn" @click="addRule">
<img src="@/assets/img/rybj/rule.png" alt="">
</div>
<div class="blcbtn-options" v-show="rule">
<div class="blcbtn-head">
<div class="head-title">比例尺</div>
<div class="head-close" @click="rule = false">×</div>
</div>
<div class="blcbtn-content">
<!-- <el-select v-model="value" placeholder="请选择">
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select> -->
</div>
</div>
<div class="txblyz">
<div class="pic">
<img src="@/assets/img/rybj/img.png" alt="">
......@@ -236,7 +248,7 @@
<!-- <div class="bzd" @click="directionChange">-->
<!-- <img src="@/assets/img/rybj/bzd.png" alt="">-->
<!-- </div>-->
<div class="rule">
<div class="rule" @click="getAutoTzd(true)">
<img src="@/assets/img/rybj/dp.png" alt="">
</div>
<div class="rotate" @click="rotateChange">
......@@ -399,10 +411,13 @@
<script>
// import RangeSlider from './RangeSlider';
import { mapState } from 'vuex';
import MouseGesture from "./tzd_rotate.js";
export default {
data () {
return {
// 是否展示比例尺
rule: false,
// 是否裁剪过
isCrop: false,
// 裁切的位置
......@@ -659,6 +674,8 @@ export default {
tzdFlag: false,
// 特征点数组
tzdArr: [],
// 自动提取-特征点数据
autoTzdArr: [],
// 是否显示旋转绿线
isdirection: false,
newHeight: 640,
......@@ -666,16 +683,32 @@ export default {
// tzdDrawing 的移动距离
tzdDrawingLeft: 0,
tzdDrawingTop: 0,
//旋转之前的度数
// 旋转之前的度数
startPlace: 0,
// 是否可以打开缩略图
isSLT: false,
// 路由传参
barcode: '',
// 特征点全部数组
tzdall: [],
// 之前的手动特征点
pretzdall: []
};
},
computed: {
...mapState({
seq: state => state.zwbj.seq,
preTzdArr: state => state.zwbj.pretzdall,
autopretzdall: state => state.zwbj.autopretzdall,
})
},
created () {
let w1 = 1920
let w2 = window.innerWidth
this.canvasWidth = this.canvasWidth * w2 / w1
this.canvasHeight = this.canvasHeight * w2 / w1
// 获取barcode，seq
this.barcode = this.$route.params.barcode
},
mounted () {
// $('input').RangeSlider({ min: 0, max: 100, step: 0.1});
......@@ -683,11 +716,8 @@ export default {
let self = this
var supportingFileAPI = !!(window.File && window.FileList && window.FileReader);
var rImageType = /data:(image\/.+);base64,/;
var activeObjectId;
// Buttons
var $btns = $('.menu-item');
var $btnsActivatable = $btns.filter('.activatable');
var $inputImage = $('#input-image-file');
var $btnDownload = $('#btn-download');
......@@ -826,24 +856,6 @@ export default {
}
}
function activateShapeMode () {
if (imageEditor.getDrawingMode() !== 'SHAPE') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('SHAPE');
}
}
function activateIconMode () {
imageEditor.stopDrawingMode();
}
function activateTextMode () {
if (imageEditor.getDrawingMode() !== 'TEXT') {
imageEditor.stopDrawingMode();
imageEditor.startDrawingMode('TEXT');
}
}
// Attach image editor custom events
imageEditor.on({
objectAdded: function (objectProps) {
......@@ -996,7 +1008,7 @@ export default {
self.inputRotationRange = 0
// 事件不能连续重复执行，需要缓存时间
setTimeout(() => {
console.log(11111,-self.startPlace)
console.log(11111, -self.startPlace)
imageEditor.rotate(-parseInt(self.startPlace))
imageEditor.resetZoom();
self.startPlace = 0;
......@@ -1235,6 +1247,96 @@ export default {
});
})
this.$bus.on('ajzwbjImage', (sourceImage) => {
self.sourceImage = sourceImage
imageEditor.loadImageFromURL('data:image/jpeg;base64,' + sourceImage, 'SampleImage').then(function (sizeValue) {
// console.log(sizeValue);
// 切换指纹图片时，清空特征点数组
self.tzdnumber = 0
self.tzdArr = []
self.autoTzdArr = []
// 移除图片上的点
$('.tzdDom').remove()
$('.auto_tzdDom').remove()
imageEditor.clearUndoStack();
// 缩放为1
self.zoomLevel = 1
// 获取自动提取特征
self.getAutoTzd(false)
// 如果之前保留了特征点，则展示出来
if (sessionStorage.getItem(self.seq) != 'undefined' && sessionStorage.getItem(self.seq) != null) {
console.log(sessionStorage.getItem(self.seq));
let preTzd = JSON.parse(sessionStorage.getItem(self.seq))
if (preTzd && preTzd.length > 0) {
preTzd.forEach((item, index) => {
self.tzdArr.push({
id: self.tzdId,
x: item.xczw_zwtzd_tzxzb,
y: item.xczw_zwtzd_tzyzb,
angle: item.xczw_zwtzd_tzfx
})
$(
`<div id="tzd${self.tzdId}" class="tzdDom"><div class="head"></div><div class="direction"></div></div>`
).appendTo(".tzdDrawing");
$('.tzdDom').css('display', 'flex')
$('.tzdDom').css('align-items', 'center')
$('.tzdDom').css('position', 'absolute')
$('.tzdDom').css('transform-origin', 'left center')
$('.tzdDom .head').css('width', '8px')
$('.tzdDom .head').css('height', '8px')
$('.tzdDom .head').css('border-radius', '8px')
$('.tzdDom .head').css('background-color', '#FFFD0F')
$('.tzdDom .direction').css('width', '20px')
$('.tzdDom .direction').css('height', '2px')
$('.tzdDom .direction').css('background-color', '#FFFD0F')
$(`#tzd${self.tzdId}`).css("left", (item.xczw_zwtzd_tzxzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.tzdId}`).css("top", (item.xczw_zwtzd_tzyzb - 4) / self.zoomLevel + "px");
$(`#tzd${self.tzdId}`).css("box-sizing", "border-box");
$("#tzd" + self.tzdId).css("transform", `rotate(${item.xczw_zwtzd_tzfx}deg)`);
self.tzdId++
})
}
}
});
})
// 监听是否选择了掌纹===展示缩略图
this.$bus.on('ajzwbjType', (type) => {
if (type) {
self.isSLT = true
} else {
self.isSLT = false
}
})
// 清空特征点数量
this.$bus.on('ajzwbjTDZ', () => {
self.tzdArr = []
self.tzdnumber = 0
self.isHandTZD = false
$('.tzdDom').remove()
})
$(document).keydown(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = true
}
});
$(document).keyup(function (event) {
if (event.keyCode == 32) {
self.isHandSpace = false
}
});
// 图片导入
$inputImage.on('change', function (event) {
var file;
......@@ -1283,7 +1385,7 @@ export default {
var centerY = 0;
var radius = 0;
var circleId = 0;
var circleArr = [];
self.circleArr_hand = [];
// 是否正在画圆
var isDrawing = false;
// ******************************
......@@ -1336,11 +1438,11 @@ export default {
$('.tzdDom .head').css('width', '8px')
$('.tzdDom .head').css('height', '8px')
$('.tzdDom .head').css('border-radius', '8px')
$('.tzdDom .head').css('background-color', '#ffaa00')
$('.tzdDom .head').css('background-color', '#FFFD0F')
$('.tzdDom .direction').css('width', '20px')
$('.tzdDom .direction').css('height', '2px')
$('.tzdDom .direction').css('background-color', '#ffaa00')
$('.tzdDom .direction').css('background-color', '#FFFD0F')
// self.zoomLevel
// $(`#tzd${self.tzdId}`).css("left", e.pageX - $('.tzdDrawing').offset().left - 4 + "px");
......@@ -1352,8 +1454,8 @@ export default {
}
// 鼠标右击
if (e.which === 3) {
// console.log(e);
if (e.target.className == "head" || e.target.className == "direction") {
console.log(e);
if (e.target.className == "head" || e.target.className == "direction" || e.target.className == 'auto_tzdDom') {
// 删除该特征点
let tdzindex = self.tzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id.substring(3, e.target.parentNode.id.length);
......@@ -1366,30 +1468,98 @@ export default {
setTimeout(() => {
$(e.target.parentNode).remove();
}, 1000);
self.tzdnumber = self.tzdArr.length
// 全部数据保存
var tzdall_shou = []
self.tzdArr.forEach(item => {
tzdall_shou.push({
id: item.id,
xczw_zwtzd_tzxzb: item.x,
xczw_zwtzd_tzyzb: item.y,
xczw_zwtzd_tzfx: item.angle
})
})
self.$store.commit('zwbj/setTzdall', tzdall_shou)
}
self.tzdnumber = self.tzdArr.length
// console.log(self.tzdArr);
// 删除自动提取的特征点
console.log(self.autoTzdArr);
if (e.target.className == 'auto_tzdDom') {
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
return item.id == e.target.id;
})
console.log(auto_tzdindex);
if (auto_tzdindex != -1) {
self.autoTzdArr.splice(auto_tzdindex, 1)
$(e.target).css('border', '2px solid red');
setTimeout(() => {
$(e.target).remove();
}, 1000);
// 更新vuex数据
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
}
} else {
let auto_tzdindex = self.autoTzdArr.findIndex((item) => {
return item.id == e.target.parentNode.id;
})
console.log(auto_tzdindex);
if (auto_tzdindex != -1) {
self.autoTzdArr.splice(auto_tzdindex, 1)
$(e.target.parentNode).css('border', '2px solid red');
setTimeout(() => {
$(e.target.parentNode).remove();
}, 1000);
// 更新vuex数据
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
}
}
}
}
}
// 开启圆形绘制
if (self.isSelectedCirclePaint) {
if (e.target.className == "circle") {
return;
if (e.which === 1) {
if (self.isSelectedCirclePaint) {
if (e.target.className == "td_circle") {
return;
}
$circle = $(`<div id="circle${circleId}" class="td_circle"></div>`);
centerX = e.pageX - $drawing.offset().left;
centerY = e.pageY - $drawing.offset().top;
$('.tzdDrawing').append($circle);
$circle.css("border", "2px solid red");
$circle.css("position", "absolute");
self.circleArr_hand.push({
id: circleId,
centerX: centerX,
centerY: centerY,
radius: 0
});
isDrawing = true;
e.preventDefault();
}
$circle = $(`<div id="circle${circleId}" class="td_circle"></div>`);
centerX = e.pageX - $drawing.offset().left;
centerY = e.pageY - $drawing.offset().top;
$('.tzdDrawing').append($circle);
$circle.css("border", "2px solid red");
$circle.css("position", "absolute");
circleArr.push({
id: circleId,
centerX: centerX,
centerY: centerY,
}
// 删除圆
if (e.target.className == "td_circle") {
console.log(e);
$(".td_circle").unbind('click').click(function (event) {
console.log(event);
console.log(1111);
let circleid = event.target.id.substring(
6,
event.target.id.length
);
let circleIndex = self.circleArr_hand.findIndex((item) => {
return item.id == circleid;
});
console.log(circleIndex);
if (circleIndex != -1) self.circleArr_hand.splice(circleIndex, 1);
$(this).remove();
console.log(self.circleArr_hand);
event.stopPropagation(); // 阻止事件冒泡
});
isDrawing = true;
e.preventDefault();
}
});
// 去掉鼠标默认事件
......@@ -1583,6 +1753,8 @@ export default {
$circle.css("width", 2 * radius + "px");
$circle.css("height", 2 * radius + "px");
$circle.css("border-radius", "50%");
$circle.css("background", "rgba(0,0,0,0)");
}
}
});
......@@ -1610,6 +1782,8 @@ export default {
// self.$set(self.tzdArr[self.tzdId], 'angle', obj.deg)
self.tzdArr[objindex].angle = obj.deg
} else {
console.log(self.tzdArr);
console.log(self.tzdId);
let objindex = self.tzdArr.findIndex((item) => {
return item.id == self.tzdId
})
......@@ -1620,6 +1794,24 @@ export default {
self.tzdFlag = false;
self.tzdId++;
ins.setEnd();
// 为了数据回显（只保留手动的，自动的换图自动点击），每次追加一个特征点都保存到全局中去
if (self.tzdArr.length > 0) {
self.tzdArr.forEach(item => {
self.pretzdall.push({
xczw_zwtzd_tzfx: item.angle,
xczw_zwtzd_tzxzb: item.x,
xczw_zwtzd_tzyzb: item.y
})
})
}
console.log(self.pretzdall);
// 全部数据保存
self.$store.commit('zwbj/setTzdall', self.pretzdall)
console.log(self.preTzdArr);
self.pretzdall = []
}
}
if (e.which === 3) {
......@@ -1627,42 +1819,52 @@ export default {
ins.setEnd();
}
// 开启圆形绘制
if (self.isSelectedCirclePaint) {
let circleid = e.target.id.substring(6, e.target.id.length);
console.log(circleid);
for (let index = 0; index < circleArr.length; index++) {
const element = circleArr[index];
if (element.id == circleid) {
element.radius = radius;
}
}
console.log(circleArr);
circleId++;
isDrawing = false;
if (e.target.className == "td_circle") {
$(".td_circle").unbind('click').click(function (event) {
console.log(event);
console.log(1111);
let circleid = event.target.id.substring(
6,
event.target.id.length
);
let circleIndex = circleArr.findIndex((item) => {
return item.id == circleid;
});
console.log(circleIndex);
if (circleIndex != -1) circleArr.splice(circleIndex, 1);
$(this).remove();
console.log(circleArr);
event.stopPropagation(); // 阻止事件冒泡
});
if (e.which === 1) {
if (self.isSelectedCirclePaint) {
console.log(e);
let circleid = e.target.id.substring(6, e.target.id.length);
console.log(circleid);
if (self.circleArr_hand[circleId])
self.circleArr_hand[circleId].radius = radius
// for (let index = 0; index < self.circleArr_hand.length; index++) {
// const element = self.circleArr_hand[index];
// if (element.id == circleid) {
// console.log(element.id);
// console.log(radius);
// // element.radius = radius;
// self.$set(self.circleArr_hand[index], 'radius', radius)
// }
// }
console.log(self.circleArr_hand);
circleId++;
isDrawing = false;
// if (e.target.className == "td_circle") {
// $(".td_circle").unbind('click').click(function (event) {
// console.log(event);
// console.log(1111);
// let circleid = event.target.id.substring(
// 6,
// event.target.id.length
// );
// let circleIndex = self.circleArr_hand.findIndex((item) => {
// return item.id == circleid;
// });
// console.log(circleIndex);
// if (circleIndex != -1) self.circleArr_hand.splice(circleIndex, 1);
// $(this).remove();
// console.log(self.circleArr_hand);
// event.stopPropagation(); // 阻止事件冒泡
// });
// }
}
}
});
var Fcanvas = new fabric_irregular.Canvas("irregular");
// selectable
Fcanvas.selections = false//取消框选
var Fcanvasarr = [];
var Fcanvasline1 = [];
var findIndex = 0
......@@ -1693,6 +1895,8 @@ export default {
// 鼠标左击
if (e.which === 1) {
var object = Fcanvas.getActiveObject();
console.log(Fcanvas);
console.log(object);
if (object) {
for (let i = 0; i < Fcanvasarr.length; i++) {
if (JSON.stringify(Fcanvasarr[i]) === JSON.stringify(object.points)) {
......@@ -1724,10 +1928,14 @@ export default {
objectCaching: false,
transparentCorners: false,
cornerColor: "rgba(0,0,0,0)",
// 设置可选
selectable: true
});
// Fcanvas.viewportTransform = [0.7, 0, 0, 0.7, -50, 50];
Fcanvas.add(polygon);
Fcanvasarr.push(Fcanvasline1)
console.log(Fcanvasarr);
self.Fcanvasarr = Fcanvasarr
Fcanvasline1 = []
}
}
......@@ -1904,6 +2112,102 @@ export default {
})
},
methods: {
/**
* @description: 自动提取特征点
* @param {*}
* @return {*}
*/
async getAutoTzd (flag) {
let self = this
console.log(this.seq);
if (!sessionStorage.getItem(`auto_tzdDom${this.seq}`)) [
flag = true
]
// 从数据库中获取数据
if (flag) {
let res = await this.$axios({
method: 'get',
url: '/api/export/trait/xml/case/' + this.barcode + '/' + this.seq,
loading: false
})
console.log(res);
// 自动提取特征数组
if (res.data.code === 0) {
self.autoTzdArr = res.data.ret.fpt5LMinutiaList
self.autoTzdArr.forEach((item, index) => {
self.$set(self.autoTzdArr[index], 'id', 'auto_tzdDom' + self.tzdId)
$(
`<div id="auto_tzdDom${self.tzdId}" class="auto_tzdDom"><div class="head"></div><div class="direction"></div></div>`
).appendTo(".tzdDrawing");
$('.auto_tzdDom').css('display', 'flex')
$('.auto_tzdDom').css('align-items', 'center')
$('.auto_tzdDom').css('position', 'absolute')
$('.auto_tzdDom').css('transform-origin', 'left center')
$('.auto_tzdDom .head').css('width', '8px')
$('.auto_tzdDom .head').css('height', '8px')
$('.auto_tzdDom .head').css('border-radius', '8px')
$('.auto_tzdDom .head').css('background-color', '#FFFD0F')
$('.auto_tzdDom .direction').css('width', '20px')
$('.auto_tzdDom .direction').css('height', '2px')
$('.auto_tzdDom .direction').css('background-color', '#FFFD0F')
console.log(item.xczw_zwtzd_tzxzb);
console.log(item.xczw_zwtzd_tzyzb);
console.log(item.xczw_zwtzd_tzfx);
$(`#auto_tzdDom${self.tzdId}`).css("left", (item.xczw_zwtzd_tzxzb - 4) / self.zoomLevel + "px");
$(`#auto_tzdDom${self.tzdId}`).css("top", (item.xczw_zwtzd_tzyzb - 4) / self.zoomLevel + "px");
$(`#auto_tzdDom${self.tzdId}`).css("box-sizing", "border-box");
$("#auto_tzdDom" + self.tzdId).css("transform", `rotate(${item.xczw_zwtzd_tzfx}deg)`);
self.tzdId++
})
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
// 将自动提取的特征点存入session中
sessionStorage.setItem(`auto_tzdDom${self.seq}`, JSON.stringify(self.autoTzdArr))
}
} else {
// 从session中拿
if (sessionStorage.getItem(`auto_tzdDom${this.seq}`)) {
self.autoTzdArr = JSON.parse(sessionStorage.getItem(`auto_tzdDom${this.seq}`))
self.autoTzdArr.forEach((item, index) => {
$(
`<div id="${item.id}" class="auto_tzdDom"><div class="head"></div><div class="direction"></div></div>`
).appendTo(".tzdDrawing");
$('.auto_tzdDom').css('display', 'flex')
$('.auto_tzdDom').css('align-items', 'center')
$('.auto_tzdDom').css('position', 'absolute')
$('.auto_tzdDom').css('transform-origin', 'left center')
$('.auto_tzdDom .head').css('width', '8px')
$('.auto_tzdDom .head').css('height', '8px')
$('.auto_tzdDom .head').css('border-radius', '8px')
$('.auto_tzdDom .head').css('background-color', '#FFFD0F')
$('.auto_tzdDom .direction').css('width', '20px')
$('.auto_tzdDom .direction').css('height', '2px')
$('.auto_tzdDom .direction').css('background-color', '#FFFD0F')
$(`#${item.id}`).css("left", (item.xczw_zwtzd_tzxzb - 4) / self.zoomLevel + "px");
$(`#${item.id}`).css("top", (item.xczw_zwtzd_tzyzb - 4) / self.zoomLevel + "px");
$(`#${item.id}`).css("box-sizing", "border-box");
$('#' + item.id).css("transform", `rotate(${item.xczw_zwtzd_tzfx}deg)`);
})
self.$store.commit('zwbj/setAutoTzdall', self.autoTzdArr)
// 将自动提取的特征点存入session中
sessionStorage.setItem(`auto_tzdDom${self.seq}`, JSON.stringify(self.autoTzdArr))
}
}
// if (self.autoTzdArr.length > 0) {
// if ($('.auto_tzdDom').css('display') == 'flex') {
// $('.auto_tzdDom').css('display', 'none')
// } else {
// $('.auto_tzdDom').css('display', 'flex')
// }
// return
// }
},
/***
* 裁剪
*/
......@@ -2066,7 +2370,10 @@ export default {
tzdChange () {
this.isHandTZD = !this.isHandTZD
if (this.isHandTZD) {
console.log(111);
$('.tzdDrawing').css('z-index', '99999')
} else {
$('.tzdDrawing').css('z-index', '99')
}
},
/**
......@@ -2830,8 +3137,72 @@ export default {
* @return {*}
*/
changeSaveType (saveType) {
let self = this
this.saveType = saveType
this.isShowSaveTypeOptions = false
if (this.saveType === '当前特征') {
self.tzdall = []
// let tzdall = self.tzdArr.concat(self.autoTzdArr)
if (self.tzdArr.length > 0) {
self.tzdArr.forEach(item => {
self.tzdall.push({
zwtzd_tzfx: item.angle,
zwzxd_tzxzb: item.x,
zwzxd_tzyzb: item.y
})
})
}
if (self.autoTzdArr.length > 0) {
self.tzdall.concat(self.autoTzdArr)
}
console.log(self.tzdall);
// 处理数据--圆
let circleArr_hand_t = []
self.circleArr_hand.forEach(item => {
circleArr_hand_t.push({
yxtq_yxxzb: item.x,
yxtq_yxyzb: item.y,
yxtq_yxbj: item.radius
})
})
// TODO
// 处理数据---自由
let Fcanvasarr_t = []
self.Fcanvasarr.forEach(item => {
Fcanvasarr_t.push({
})
})
self.fpt5LMinutiaList = []
self.fpt5LMinutiaList.push(self.circleArr_hand)
self.fpt5LMinutiaList.push(self.Fcanvasarr)
console.log(self.fpt5LMinutiaList);
let fpt5TraitMinutiaList = {
fpt5TraitMinutiaList: self.tzdall,
zwzwdm: self.seq > 9 ? self.seq : ('0' + self.seq),
fpt5LMinutiaList: self.fpt5LMinutiaList
}
console.log(8888);
this.$axios({
method: 'post',
headers: {
'Content-Type': 'application/json;charset=UTF-8'
},
url: '/api/upload/trait/case?barcode=' + self.barcode + '&seq=' + self.seq,
data: JSON.stringify(fpt5TraitMinutiaList),
loading: false
}).then(res => {
console.log(res);
if (res.data.message == 'success') {
self.$message.success('保存成功！')
}
})
}
},
/**
* @description: 是否展示选择保存类型对话框
......@@ -3218,14 +3589,16 @@ export default {
* @return {*}
*/
onchangePreview () {
this.isShowSourcePrivew = !this.isShowSourcePrivew
if (this.isShowSourcePrivew) {
// 转换canvas为base64图片贴到缩略图中
setTimeout(() => {
let dataURL = this.imageEditor.toDataURL()
console.log(dataURL);
this.previewSource = dataURL
}, 200);
if (this.isSLT) {
this.isShowSourcePrivew = !this.isShowSourcePrivew
if (this.isShowSourcePrivew) {
// 转换canvas为base64图片贴到缩略图中
setTimeout(() => {
let dataURL = this.imageEditor.toDataURL()
console.log(dataURL);
this.previewSource = dataURL
}, 200);
}
}
},
/**
......
src/views/drFPTX/Index.vue
......@@ -812,11 +812,13 @@ export default {
this.nowSelectData = val;
},
checkRightAll (val) {
console.log('val111', val)
// console.log('val111', val)
this.nowSelectRightData = val;
},
// 选中
handelSelect () {
// this.checkRightAll(this.nowSelectData)
// this.nowSelectRightData.push(this.nowSelectData)
this.selectArr = this.handleConcatArr(this.selectArr, this.nowSelectData)
this.nowSelectRightData = this.selectArr
this.handleRemoveTabList(this.nowSelectData, this.datas);
......
src/views/drFPTX/RAList.vue
......@@ -6,9 +6,15 @@
<el-radio :label="1">人员</el-radio>
<el-radio :label="2">案件</el-radio>
</el-radio-group>
<div class="search barcode">
<div class="item">条码号：</div>
<el-input placeholder="请输入条码号" v-model="barcode" clearable>
<div class='search barcode'>
<div class='item'> 条码号：</div>
<el-input
placeholder="请输入条码号"
v-model="barcode"
maxlength="23"
show-word-limit
clearable
>
</el-input>
</div>
<div class="search ljfk">
......@@ -23,9 +29,15 @@
</el-option>
</el-select>
</div>
<div class="search taskNumber">
<div class="item">任务号：</div>
<el-input placeholder="请输入任务号" v-model="taskNumber" clearable>
<div class='search taskNumber'>
<div class='item'> 任务号：</div>
<el-input
placeholder="请输入任务号"
v-model="taskNumber"
maxlength="14"
show-word-limit
clearable
>
</el-input>
</div>
<div class="search rkzt">
......@@ -51,10 +63,19 @@
</el-date-picker>
</div>
</div>
<div class="head" v-if="showType == 2">
<div class="search barcode">
<div class="item">条码号：</div>
<el-input placeholder="请输入条码号" v-model="barcode" clearable>
<div
class='head'
v-if="showType==2"
>
<div class='search barcode'>
<div class='item'> 条码号：</div>
<el-input
placeholder="请输入条码号"
v-model="barcode"
maxlength="23"
show-word-limit
clearable
>
</el-input>
</div>
<div class="search ljfk">
......
src/views/login/Login1.vue
<template>
<div id="homepage_hero_module" class="homepage_hero_module">
<div class="video_container">
<!-- <div :style="fixStyle" class="filter"></div>-->
<!-- autoplay 自动播放 loop 循环播放 muted 静音播放-->
<!-- <video autoplay loop muted class="fillWidth" v-on:canplay="canplay">-->
<!-- <source :src="barcgroundUrl" type="video/mp4" />-->
<!-- 浏览器不支持 video 标签，建议升级浏览器。-->
<!-- </video>-->
<!-- &lt;!&ndash; todo 视频加载切换为图片加载 &ndash;&gt;-->
<!-- &lt;!&ndash; 考虑视频加载失败 图片背景效果 &ndash;&gt;-->
<!-- <div class="poster hidden" v-if="!vedioCanPlay">-->
<!-- <img :style="fixStyle" :src="barcgroundImgUrl" alt="" />-->
<!-- </div>-->
<img src="@/assets/img/login/login.gif" />
</div>
<transition name="slide_fade">
<div :style="drawerStyle" class="login_main_layer" v-if="isShow">
<transition name="login_fade">
<div v-if="loginShow">
<div class=" login_top_layer middle">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image>
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<div>
<accountsLogin
:login-type="loginType.accountStatus"
></accountsLogin>
</div>
<div>
<keyLogin :login-type="loginType.keyStatus"></keyLogin>
</div>
</div>
</transition>
<div class="login_bottom_layer middle ">
<span class=" font_color"
>Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span
>
<!-- <div class="video_container">-->
<!-- &lt;!&ndash; <div :style="fixStyle" class="filter"></div>&ndash;&gt;-->
<!-- &lt;!&ndash; autoplay 自动播放 loop 循环播放 muted 静音播放&ndash;&gt;-->
<!-- &lt;!&ndash; <video autoplay loop muted class="fillWidth" v-on:canplay="canplay">&ndash;&gt;-->
<!-- &lt;!&ndash; <source :src="barcgroundUrl" type="video/mp4" />&ndash;&gt;-->
<!-- &lt;!&ndash; 浏览器不支持 video 标签，建议升级浏览器。&ndash;&gt;-->
<!-- &lt;!&ndash; </video>&ndash;&gt;-->
<!-- &lt;!&ndash; &lt;!&ndash; todo 视频加载切换为图片加载 &ndash;&gt;&ndash;&gt;-->
<!-- &lt;!&ndash; &lt;!&ndash; 考虑视频加载失败 图片背景效果 &ndash;&gt;&ndash;&gt;-->
<!-- &lt;!&ndash; <div class="poster hidden" v-if="!vedioCanPlay">&ndash;&gt;-->
<!-- &lt;!&ndash; <img :style="fixStyle" :src="barcgroundImgUrl" alt="" />&ndash;&gt;-->
<!-- &lt;!&ndash; </div>&ndash;&gt;-->
<!-- -->
<!-- </div>-->
<img class="video_container" src="@/assets/img/login/login.gif" />
<div :style="drawerStyle" class="login_main_layer" ref="loginWindow">
<div>
<div class=" login_top_layer middle">
<el-image class="login_emblem middle" :src="emblemUrl"></el-image>
<br />
<el-image class="login_system middle" :src="systemUrl"></el-image>
</div>
<div class=" middle margin_top25_bottom10">
<el-button
class="magin_left_right30"
:class="{ active: loginType.accountStatus }"
:autofocus="true"
type="text"
@click="changeLoginType(1)"
>帐号密码登录
</el-button>
<span class="font_color">|</span>
<el-button
class="magin_left_right30"
type="text"
:class="{ active: loginType.keyStatus }"
@click="changeLoginType(2)"
>KEY登录
</el-button>
</div>
<div>
<accountsLogin :login-type="loginType.accountStatus"></accountsLogin>
</div>
<div>
<keyLogin :login-type="loginType.keyStatus"></keyLogin>
</div>
</div>
</transition>
<div class="login_bottom_layer middle ">
<span class=" font_color">Copyright&nbsp;©&nbsp;2021&nbsp;Founder</span>
</div>
</div>
</div>
</template>
......@@ -74,8 +67,7 @@ export default {
data() {
return {
isShow: false,
loginShow: false,
isShow: true,
// drawerHeight: null,
barcgroundUrl: require("../../assets/video/login.mp4"),
barcgroundImgUrl: require("../../assets/img/login/background.png"),
......@@ -110,15 +102,18 @@ export default {
},
created() {
var me = this;
console.log(this.$refs.loginWindow);
// 动画加载时间
setTimeout(() => {
me.isShow = true;
}, 1000);
setTimeout(() => {
me.loginShow = true;
}, 3000);
// setTimeout(() => {
// me.isShow = true;
// }, 1000);
},
mounted() {
this.$nextTick(() => {
console.log(this.$refs.loginWindow);
this.$refs.loginWindow.right = "0px";
});
this.loginType.accountStatus = true;
if (localStorage.getItem("token") !== null) {
this.$router.push("/Home/Home");
......@@ -177,6 +172,8 @@ export default {
width: 100vw;
height: 100vh;
overflow: hidden;
background: rgba(36, 54, 76, 0.5);
position: relative;
}
.homepage_hero_module img {
width: 100%;
......@@ -224,6 +221,7 @@ video {
} */
.video_container {
height: 100%;
width: 100%;
}
.video_container .poster img,
.video_container video {
......@@ -238,30 +236,30 @@ video {
/*opacity: 0.5;*/
}
/*滑动进入*/
/* 可以设置不同的进入和离开动画 */
/* 设置动画持续时间和动画函数 */
.slide_fade-enter-active {
transition: all 2s ease;
}
/*!*滑动进入*!*/
/*!* 可以设置不同的进入和离开动画 *!*/
/*!* 设置动画持续时间和动画函数 *!*/
/*.slide_fade-enter-active {*/
/* transition: all 2s ease;*/
/*}*/
.slide_fade-leave-active {
transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
/*.slide_fade-leave-active {*/
/* transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);*/
/*}*/
.slide_fade-enter, .slide_fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */
{
transform: translateX(1000px);
opacity: 0;
}
/*.slide_fade-enter, .slide_fade-leave-to*/
/* !* .slide-fade-leave-active for below version 2.1.8 *!*/
/* {*/
/* !*transform: translateX(100%);*!*/
/* !*opacity: 0;*!*/
/*}*/
/*淡入淡出*/
.login_fade-enter-active,
.login_-leave-active {
/* opacity 透明度 */
transition: opacity 2s;
}
/*!*淡入淡出*!*/
/*.login_fade-enter-active,*/
/*.login_-leave-active {*/
/* !* opacity 透明度 *!*/
/* transition: opacity 2s;*/
/*}*/
/* .fade-leave-active, 2.1.8 版本以下 */
.login_fade-enter,
......@@ -269,33 +267,33 @@ video {
opacity: 0;
}
@keyframes fade-in {
0% {
opacity: 0;
}
/*初始状态 透明度为0*/
40% {
opacity: 0;
}
/*过渡状态 透明度为0*/
100% {
opacity: 1;
}
/*结束状态 透明度为1*/
}
/*@keyframes fade-in {*/
/* 0% {*/
/* opacity: 0;*/
/* }*/
/* !*初始状态 透明度为0*!*/
/* 40% {*/
/* opacity: 0;*/
/* }*/
/* !*过渡状态 透明度为0*!*/
/* 100% {*/
/* opacity: 1;*/
/* }*/
/* !*结束状态 透明度为1*!*/
/*}*/
@-webkit-keyframes fade-in {
/*针对webkit内核*/
0% {
opacity: 0;
}
40% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/*@-webkit-keyframes fade-in {*/
/* !*针对webkit内核*!*/
/* 0% {*/
/* opacity: 0;*/
/* }*/
/* 40% {*/
/* opacity: 0;*/
/* }*/
/* 100% {*/
/* opacity: 1;*/
/* }*/
/*}*/
/*#wrapper {*/
/* animation: fade-in;!*动画名称*!*/
......@@ -307,11 +305,12 @@ video {
height: 100%;
width: 600px;
position: absolute;
right: 0;
right: -600px;
top: 0;
z-index: 4;
/*opacity: 0.5;*/
background: rgba(36, 54, 76, 0.5);
transition: all 2s;
/*background-color: #24364c;*/
}
......@@ -334,6 +333,7 @@ video {
z-index: 10;
margin-bottom: 10px;
opacity: 1;
background: rgba(36, 54, 76, 0);
}
.login_system {
......@@ -341,11 +341,13 @@ video {
height: 55px;
opacity: 1;
z-index: 10;
background: rgba(36, 54, 76, 0);
}
.login_top_layer {
margin-top: 20%;
margin-bottom: 50px;
background: rgba(36, 54, 76, 0);
}
.login_bottom_layer {
......
vue.config.js
/*
* @Author: your name
* @Date: 2021-09-07 09:57:48
* @LastEditTime: 2021-11-08 20:01:14
* @LastEditTime: 2021-11-10 09:47:04
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \指纹系统\founder_vue\vue.config.js
......@@ -92,13 +92,12 @@ module.exports = {
// 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.114:8099", // 湖南-马
target: "http://192.168.128.114:8099", // 湖南-马
// target: "http://192.168.128.116: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",
// target: "http://192.168.128.109:8765", // 湖南-王
target: "http://www.meetfood.cn:2390/", // 湖南-线上
// target: "http://www.meetfood.cn:2390/", // 湖南-线上
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