Skip to content

F
founder_vue
Commit 3f6b4c6e by 米嘉伟
Options

调整页面结构

parent 105d06c0
Showing with 355 additions and 36 deletions
src/router/modules/index.js
......@@ -37,7 +37,7 @@ export default [
title: "首页",
auth: "5"
},
component: () => import("@/views/ZhiWenPingTaiShouYe.vue")
component: () => import("@/views/Home/ZhiWenPingTaiShouYe.vue")
},
{
path: "/Editor",
......@@ -46,6 +46,15 @@ export default [
title: "指纹",
auth: "5"
},
component: () => import("@/views/Editor.vue")
component: () => import("@/views/Editor/Editor.vue")
},
{
path: "/QuanBuRenYuanKu",
name: "QuanBuRenYuanKu",
meta: {
title: "指纹",
auth: "5"
},
component: () => import("@/views/Quanburenyuanku/QuanBuRenYuanKu.vue")
}
];
src/utils/watermark.js
let watermark = {}
let setWatermark = (str,str3,str4,str5) => {
let setWatermark = (str, str3, str4, str5) => {
let id = '1.23452384164.123412415'
if (document.getElementById(id) !== null) {
......@@ -37,15 +37,15 @@ let setWatermark = (str,str3,str4,str5) => {
}
// 该方法只允许调用一次
watermark.set = (str,str3,str4,str5) => {
let id = setWatermark(str,str3,str4,str5)
watermark.set = (str, str3, str4, str5) => {
let id = setWatermark(str, str3, str4, str5)
setInterval(() => {
if (document.getElementById(id) === null) {
id = setWatermark(str,str3,str4,str5)
id = setWatermark(str, str3, str4, str5)
}
}, 500)
window.onresize = () => {
setWatermark(str,str3,str4,str5)
setWatermark(str, str3, str4, str5)
}
}
export default watermark
src/views/Editor.vue → src/views/Editor/Editor.vue
......@@ -4,7 +4,7 @@
</div>
</template>
<script>
import ImageEditor from "../components/ImageEditor.vue"
import ImageEditor from "./modules/ImageEditor.vue"
export default {
name: 'Editor',
components: {
......
src/views/Editor/modules/ImageEditor.vue 0 → 100644
<template>
<div id="app">
<ImageEditor
:include-ui="useDefaultUI"
:options="options"
ref='editor'
></ImageEditor>
<!-- <button @click="click">点击</button> -->
<button @click="addText">特征点提取</button>
<button @click="rotate">旋转</button>
<button @click="flip">上下反转</button>
<button @click="undo">撤销</button>
</div>
</template>
<script>
// 引入样式
import "tui-image-editor/dist/tui-image-editor.css";
import "tui-color-picker/dist/tui-color-picker.css";
// 引入组件
import ImageEditor from "@toast-ui/vue-image-editor/src/ImageEditor.vue";
import zwimg from "../../../assets/logo.png"
const localeZh = { // 汉化标签,对应的翻译对照字段如下
// override default English locale to your custom
Crop: '裁剪',
ZoomIn: '放大',
ZoomOut: '缩小',
Hand: '拖拽',
History: '历史记录',
DeleteAll: '全部删除',
Delete: '删除',
Undo: '撤销',
Redo: '反撤销',
Reset: '重置',
Flip: '镜像',
Rotate: '旋转',
Draw: '画',
Shape: '形状标注',
Icon: '图标标注',
Text: '文字标注',
Mask: '遮罩',
Filter: '滤镜',
Bold: '加粗',
Italic: '斜体',
Underline: '下划线',
Left: '左对齐',
Center: '居中',
Right: '右对齐',
Color: '颜色',
'Text size': '字体大小',
Custom: '自定义',
Square: '正方形',
Apply: '应用',
Cancel: '取消',
'Flip X': 'X 轴',
'Flip Y': 'Y 轴',
Range: '区间',
Stroke: '描边',
Fill: '填充',
Circle: '圆',
Triangle: '三角',
Rectangle: '矩形',
Free: '曲线',
Straight: '直线',
Arrow: '箭头',
'Arrow-2': '箭头2',
'Arrow-3': '箭头3',
'Star-1': '星星1',
'Star-2': '星星2',
Polygon: '多边形',
Location: '定位',
Heart: '心形',
Bubble: '气泡',
'Custom icon': '自定义图标',
'Load Mask Image': '加载蒙层图片',
Grayscale: '灰度',
Blur: '模糊',
Sharpen: '锐化',
Emboss: '浮雕',
'Remove White': '除去白色',
Distance: '距离',
Brightness: '亮度',
Noise: '噪音',
'Color Filter': '彩色滤镜',
Sepia: '棕色',
Sepia2: '棕色2',
Invert: '负片',
Pixelate: '像素化',
Threshold: '阈值',
Tint: '色调',
Multiply: '正片叠底',
Blend: '混合色'
// etc...
}
const customTheme = { // 自定义主体配置
// image 左上角度图片
'common.bi.image': '', // 在这里换上你喜欢的logo图片
'common.bisize.width': '0px', // logo长度
'common.bisize.height': '0px', // logo高度
'common.backgroundImage': 'none', // 背景图片
'common.backgroundColor': '', //背景颜色
'common.border': '1px solid #444', // 画布边框
// header
'header.backgroundImage': 'none',
// 'header.backgroundColor': '#f3f4f6', // 头部的背景颜色
// 'header.border': '0px',
// 'header.display': 'none',
// load button
'loadButton.backgroundColor': '#fff',
'loadButton.border': '1px solid #ddd',
'loadButton.color': '#222',
'loadButton.fontFamily': 'NotoSans, sans-serif',
'loadButton.fontSize': '12px',
// 'loadButton.display': 'none', // 可以直接隐藏掉
// download button
'downloadButton.backgroundColor': '#fdba3b',// 下载按钮背景颜色
'downloadButton.border': '1px solid #fdba3b',// 下载按钮边框样式
'downloadButton.color': '#fff',// 下载按钮文字颜色
'downloadButton.innerHTML': 'xiazai',
'downloadButton.fontFamily': 'NotoSans, sans-serif',
'downloadButton.fontSize': '12px',
// 'downloadButton.display': 'none', // 可以直接隐藏掉
// icons default
'menu.normalIcon.color': '#8a8a8a', // 菜单-普通状态
'menu.activeIcon.color': '#555555',// 菜单-选中状态
'menu.disabledIcon.color': '#434343',// 菜单-禁用状态
'menu.hoverIcon.color': '#e9e9e9',//菜单-鼠标悬浮状态
'submenu.normalIcon.color': '#8a8a8a',
'submenu.activeIcon.color': '#e9e9e9',
'menu.iconSize.width': '24px',
'menu.iconSize.height': '24px',
'submenu.iconSize.width': '32px',
'submenu.iconSize.height': '32px',
// submenu primary color
'submenu.backgroundColor': '#1e1e1e',
'submenu.partition.color': '#858585',
// submenu labels
'submenu.normalLabel.color': '#858585',
'submenu.normalLabel.fontWeight': 'lighter',
'submenu.activeLabel.color': '#fff',
'submenu.activeLabel.fontWeight': 'lighter',
// checkbox style
'checkbox.border': '1px solid #ccc',
'checkbox.backgroundColor': '#fff',
// rango style
'range.pointer.color': '#fff',
'range.bar.color': '#666',
'range.subbar.color': '#d1d1d1',
'range.disabledPointer.color': '#414141',
'range.disabledBar.color': '#282828',
'range.disabledSubbar.color': '#414141',
'range.value.color': '#fff',
'range.value.fontWeight': 'lighter',
'range.value.fontSize': '11px',
'range.value.border': '1px solid #353535',
'range.value.backgroundColor': '#151515',
'range.title.color': '#fff',
'range.title.fontWeight': 'lighter',
// colorpicker style
'colorpicker.button.border': '1px solid #1e1e1e',
'colorpicker.title.color': '#fff'
}
export default {
name: "App",
components: {
ImageEditor,
},
data () {
return {
useDefaultUI: true,
options: {
includeUI: { // 表示使用它的内置的UI控件
loadImage: {
path: zwimg, // 照片路径
name: 'ZW.bmp', // 照片名称
}, // 默认加载图片
initMenu: 'filter', // 表示编辑器加载后，第一个被选中的操作菜单功能
menu: [
// 'crop', // 裁切
'flip', // 翻转
'rotate', // 旋转
'draw', // 添加绘画
'shape', // 添加形状
// 'icon', // 添加图标
// 'text', // 添加文本
// 'mask', // 添加覆盖
'filter' // 添加滤镜
], // 支持的菜单
locale: localeZh, // 国际化对照字段
menuBarPosition: 'left',// 菜单位置栏的位置，有四个选项可选：'top', 'bottom', 'left', 'right'
theme: customTheme,// 自定义的主题配置
uiSize: { // 视图大小
width: '1000px',
height: '600px',
},
},
cssMaxWidth: 700, // 编辑器Cavans的最大宽度
cssMaxHeight: 500, // 编辑器Cavans的最大高度
},
};
},
methods: {
// click () {
// console.log(this.$refs.editor.editorInstance._graphics.canvasImage)
// console.log(this.$refs.editor.loadImageFromURL, 123)
// },
// 特征点提取
addText () {
// 添加文字 Hello Jerry
// 默认在工作区的中间
// 文字填充颜色 - 红色；文字大小 22px；
// this.$refs.editor.invoke("addText", "Hello Jerry", {
// styles: {
// fontSize: 22,
// fill: "red",
// },
// });
this.$refs.editor.invoke('startDrawingMode', 'LINE_DRAWING', {
width: 5,
color: 'rgba(255, 255, 0, 1)',
arrowType: {
tail: 'chevron' // triangle
}
});
},
// 旋转 20 度
rotate () {
this.$refs.editor.invoke("rotate", 20);
},
// 沿 Y 轴翻转
flip () {
this.$refs.editor.invoke("flipY");
},
// 撤销上一次操作
undo () {
this.$refs.editor.invoke("undo");
},
},
}
</script>
<style>
html,
body {
height: 100%;
margin: 0;
}
#app {
height: 100%;
}
</style>
\ No newline at end of file
src/views/Home.vue
......@@ -3,6 +3,7 @@
<button @click="toLogin1">登录页</button>
<button @click="toHome1">门户页面</button>
<button @click="toEditor">指纹处理</button>
<button @click="toQuanBuRenYuanKu">全部人员库</button>
</div>
</template>
......@@ -11,15 +12,15 @@ import { mapGetters } from "vuex";
import ImageEditor from "../components/ImageEditor.vue"
export default {
name: "Home",
data() {
data () {
return {};
},
created() {},
created () { },
computed: {
...mapGetters(["defaultGoodsImage", "userAuth"])
},
methods: {
toLogin1() {
toLogin1 () {
this.$router.push("/login1");
},
toHome1 () {
......@@ -27,6 +28,9 @@ export default {
},
toEditor () {
this.$router.push('/Editor')
},
toQuanBuRenYuanKu () {
this.$router.push('/QuanBuRenYuanKu')
}
}
};
......
src/views/ZhiWenPingTaiShouYe.vue → src/views/Home/ZhiWenPingTaiShouYe.vue
......@@ -5,22 +5,22 @@
<!-- 头部左侧 -->
<div class='left'>
<div><img
src="../assets/img/zhiwenpingtaishouye/jinghui.png"
src="../../assets/img/zhiwenpingtaishouye/jinghui.png"
alt=""
></div>
<span><img
src="../assets/img/zhiwenpingtaishouye/shouyelogo.png"
src="../../assets/img/zhiwenpingtaishouye/shouyelogo.png"
alt=""
></span>
</div>
<!-- 头部右侧 -->
<div class='right'>
<div> <img
src="../assets/img/zhiwenpingtaishouye/shezhi.png"
src="../../assets/img/zhiwenpingtaishouye/shezhi.png"
alt=""
> 系统管理</div>
<div class="yonghujuese"><img
src="../assets/img/zhiwenpingtaishouye/geren.png"
src="../../assets/img/zhiwenpingtaishouye/geren.png"
alt=""
>用户角色
<div class="yonghujueselist">
......@@ -32,7 +32,7 @@
</div>
</div>
<div><img
src="../assets/img/zhiwenpingtaishouye/tuichu.png"
src="../../assets/img/zhiwenpingtaishouye/tuichu.png"
alt=""
>安全退出</div>
</div>
......@@ -46,7 +46,7 @@
<div class="todo">
<div>
<img
src="../assets/img/zhiwenpingtaishouye/todoview.png"
src="../../assets/img/zhiwenpingtaishouye/todoview.png"
alt=""
>
</div>
......@@ -71,14 +71,14 @@
<div class='list l1'>
<div class='tupiandaoru'>
<img
src="../assets/img/zhiwenpingtaishouye/tupiandaoru.png"
src="../../assets/img/zhiwenpingtaishouye/tupiandaoru.png"
alt=""
>
<div>图片导入</div>
</div>
<div class='daoruFTP'>
<img
src="../assets/img/zhiwenpingtaishouye/daoruFTP.png"
src="../../assets/img/zhiwenpingtaishouye/daoruFTP.png"
alt=""
>
<div>导入FTP</div>
......@@ -87,7 +87,7 @@
<!-- 第二列 -->
<div class="list l2">
<img
src="../assets/img/zhiwenpingtaishouye/fachaxun.png"
src="../../assets/img/zhiwenpingtaishouye/fachaxun.png"
alt=""
>
<p>发查询</p>
......@@ -95,7 +95,7 @@
<!-- 第三列 -->
<div class="list l2 l3">
<img
src="../assets/img/zhiwenpingtaishouye/bidui.png"
src="../../assets/img/zhiwenpingtaishouye/bidui.png"
alt=""
>
<p>比对认定</p>
......@@ -107,14 +107,14 @@
<div class='l4top1'>
<div class="left">
<img
src="../assets/img/zhiwenpingtaishouye/saomiao.png"
src="../../assets/img/zhiwenpingtaishouye/saomiao.png"
alt=""
>
扫描
</div>
<div class='right'>
<img
src="../assets/img/zhiwenpingtaishouye/zhiwenbianji.png"
src="../../assets/img/zhiwenpingtaishouye/zhiwenbianji.png"
alt=""
>
指纹编辑
......@@ -123,14 +123,14 @@
<!-- 第二行 -->
<div class='l4top2'>
<img
src="../assets/img/zhiwenpingtaishouye/huoticaiji.png"
src="../../assets/img/zhiwenpingtaishouye/huoticaiji.png"
alt=""
>活体采集
</div>
</div>
<div class='shujuziyuanguanli'>
<img
src="../assets/img/zhiwenpingtaishouye/shujuziyuanguanli.png"
src="../../assets/img/zhiwenpingtaishouye/shujuziyuanguanli.png"
alt=""
>
<div>数据资源管理</div>
......@@ -152,7 +152,7 @@ export default {
.zhiwenpingtai {
width: 100%;
height: 100%;
background-image: url(../assets/img/zhiwenpingtaishouye/beijingshengse.png);
background-image: url(../../assets/img/zhiwenpingtaishouye/beijingshengse.png);
background-size: cover;
background-position: center;
position: fixed;
......@@ -337,7 +337,7 @@ export default {
width: 100%;
height: 188px;
border-radius: 12px;
background: url(../assets/img/zhiwenpingtaishouye/tupiandaorubg.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/tupiandaorubg.png) no-repeat
right bottom,
linear-gradient(134deg, #f4b92b 0%, #ee9c0f 100%);
margin-bottom: 24px;
......@@ -350,7 +350,7 @@ export default {
transition: transform 0.15s;
}
.main .todolist .l1 .tupiandaoru:hover {
background: url(../assets/img/zhiwenpingtaishouye/tupiandaorubg.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/tupiandaorubg.png) no-repeat
right bottom,
linear-gradient(134deg, #fac137 0%, #f6a51a 100%);
transform: scale(102%);
......@@ -359,7 +359,7 @@ export default {
width: 100%;
height: 188px;
border-radius: 12px;
background: url(../assets/img/zhiwenpingtaishouye/daoruFPTbg.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/daoruFPTbg.png) no-repeat
right bottom,
linear-gradient(134deg, #51b5fd 0%, #0b6cd9 100%);
padding-top: 20px;
......@@ -371,7 +371,7 @@ export default {
transition: transform 0.15s;
}
.main .todolist .l1 .daoruFTP:hover {
background: url(../assets/img/zhiwenpingtaishouye/daoruFPTbg.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/daoruFPTbg.png) no-repeat
right bottom,
linear-gradient(134deg, #62bbfc 0%, #1177e8 100%);
transform: scale(102%);
......@@ -380,7 +380,7 @@ export default {
.main .todolist .l2 {
width: 100%;
height: 100%;
background: url(../assets/img/zhiwenpingtaishouye/fachaxunbg.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/fachaxunbg.png) no-repeat
left top/ cover,
linear-gradient(136deg, rgba(3, 149, 197, 0.99) 0%, #010731 100%);
box-shadow: 0px 2px 12px 0px rgba(48, 48, 48, 0.5);
......@@ -398,19 +398,19 @@ export default {
margin-bottom: 12px;
}
.main .todolist .l2:hover {
background: url(../assets/img/zhiwenpingtaishouye/fachaxunbghover.png)
background: url(../../assets/img/zhiwenpingtaishouye/fachaxunbghover.png)
no-repeat left top/ cover,
linear-gradient(136deg, rgba(3, 149, 197, 0.99) 0%, #010731 100%);
transform: scale(102%);
}
/* 第三列 */
.main .todolist .l3 {
background: url(../assets/img/zhiwenpingtaishouye/biduibg.png) no-repeat left
background: url(../../assets/img/zhiwenpingtaishouye/biduibg.png) no-repeat left
top/ cover,
linear-gradient(136deg, rgba(3, 108, 177, 0.99) 0%, #08023d 100%);
}
.main .todolist .l3:hover {
background: url(../assets/img/zhiwenpingtaishouye/biduibghover.png) no-repeat
background: url(../../assets/img/zhiwenpingtaishouye/biduibghover.png) no-repeat
left top/ cover,
linear-gradient(136deg, rgba(3, 108, 177, 0.99) 0%, #08023d 100%);
}
......@@ -473,7 +473,7 @@ export default {
width: 100%;
height: 188px;
border-radius: 12px;
background: url(../assets/img/zhiwenpingtaishouye/shujuziyuanguanlibg.png)
background: url(../../assets/img/zhiwenpingtaishouye/shujuziyuanguanlibg.png)
no-repeat right bottom,
linear-gradient(133deg, #34b6f0 0%, #0390d3 100%);
padding-top: 50px;
......@@ -485,7 +485,7 @@ export default {
transition: transform 0.15s;
}
.main .todolist .l4 .shujuziyuanguanli:hover {
background: url(../assets/img/zhiwenpingtaishouye/shujuziyuanguanlibg.png)
background: url(../../assets/img/zhiwenpingtaishouye/shujuziyuanguanlibg.png)
no-repeat right bottom,
linear-gradient(133deg, #42bbf2 0%, #12a1e5 100%);
transform: scale(102%);
......
src/views/Quanburenyuanku/QuanBuRenYuanKu.vue 0 → 100644
<template>
<div class="quanburenyuanguanli">
<el-tabs
v-model="activeName"
@tab-click="handleClick"
>
<!-- 活体指纹采集 -->
<el-tab-pane
label="活体指纹采集"
name="first"
>活体指纹采集</el-tab-pane>
<!-- 全部人员库 -->
<el-tab-pane
label="全部人员库"
name="second"
>
全部人员库
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
export default {
name: 'QuanBuRenYuanKu',
data () {
return {
activeName: 'second' //默认展示
};
},
methods: {
handleClick (tab, event) {
console.log(tab, event);
}
}
}
</script>
<style scoped>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment