目录
1、引言 4
1.1 编写目的 4
1.2 读者对象 4
1.3 软件项目概述 4
1.4 文档概述 4
1.5 定义 4
2、软件设计约束 4
2.1 软件设计目标和原则 5
2.2 软件设计的约束和限制 5
3、软件设计 5
3.1 软件体系结构设计 5
3.2 用户界面设计 6
3.3 用例设计 6
3.4 类设计 6
3.5 数据设计 6
目录
- 引言 4
1.1 编写目的 4
1.2 读者对象 4
1.3 软件项目概述 4
1.4 文档概述 4
1.5 定义 4 - 软件的一般性描述 5
2.1软件产品与其环境之间的关系 5
2.2限制与约束 5 - 软件功能需求描述 5
3.1 软件功能概述 5
3.2 软件需求的用例模型 5
3.3 软件需求的分析模型 5 - 其它软件需求描述 5
4.1 性能要求 5
4.2 设计约束 6
4.3 界面要求 6
4.4 进度要求 6 - 其它软件需求描述
4.1 性能要求
根据用户对本系统的要求,确定系统在响应时间、可靠性、安全等方面有较高的性能要求。
界面需求
页面内容:主题突出,站点定义、术语和行文格式统一、规范、明确,栏目、菜单设置和布局合理,传递的信息准确、及时。内容丰富,文字准确,语句通顺;专用术语规范,行文格式统一规范。
导航结构:页面具有明确的导航指示,且便于理解,方便用户使用。
技术环境:页面大小适当;无错误链接和空链接;采用样式处理,控制字体大小和版面布局。
艺术风格:界面、版面形象清新悦目、布局合理,字号大小适宜、字体选择合理,前后一致,美观大方;动与静搭配恰当,动静效果好;色彩和谐自然,与主题内容相协调。
响应时间需求
无论是客户端和管理端,当用户登录,进行任何操作的时候,系统应该及时的进行反应,反应的时间在5秒以内。系统应能监测出各种非正常情况,如与设备的通信中断,无法连接数据库服务器等,及时给出提示信息,避免出现长时间等待甚至无响应。
开放性需求
系统应具有十分的灵活性,以适应将来功能扩展的需求。
可扩展性需求
系统设计要求能够体现扩展性要求,以适应将来功能扩展的需求。
4.2 设计约束
后台开发语言:Java 版本1.8
开发框架:
o前端:Vue
o后端:Springboot
操作系统:
oWeb端:Windows10
o后台:Windows10
开发工具:Jetbrains Intelij IDEA
数据库:Mysql
浏览器:Chrome
系统安全性需求
系统有严格的权限管理功能,各功能模块需有相应的权限方能进入。系统需能够防止各类误操作可能造成的数据丢失,破坏。防止用户非法获取网页以及内容。
可靠性需求
系统应保证7X24内不当机,保证20人可以同时在客户端登录,系统正常运行,正确提示相关内容。
4.3 界面要求
页面内容:主题突出,站点定义、术语和行文格式统一、规范、明确,栏目、菜单设置和布局合理,传递的信息准确、及时。内容丰富,文字准确,语句通顺;专用术语规范,行文格式统一规范。
导航结构:页面具有明确的导航指示,且便于理解,方便用户使用。
技术环境:页面大小适当;无错误链接和空链接;采用样式处理,控制字体大小和版面布局。
艺术风格:界面、版面形象清新悦目、布局合理,字号大小适宜、字体选择合理,前后一致,美观大方;动与静搭配恰当,动静效果好;色彩和谐自然,与主题内容相协调。
<template>
<el-row>
<el-col :span="4">
<el-menu
:uniqueOpened="true"
default-active="2"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b">
<el-menu-item index="1">
<i class="el-icon-menu"></i>
<template #title>
<router-link :to="{path: '/SubHomePage',query:{id:id}}">
主页
</router-link>
</template>
</el-menu-item>
<el-submenu index="2">
<template #title>
<i class="el-icon-menu"></i>
<span>请假</span>
</template>
<el-menu-item-group>
<template #title>分组一</template>
<el-menu-item index="2-1">
<router-link :to="{path:'/leaveapply',query:{id:id}}" background="red">申请请假</router-link>
</el-menu-item>
<el-menu-item index="2-2">
<router-link :to="{path:'/leavestate',query:{id:id}}">审核状态</router-link>
</el-menu-item>
<el-menu-item index="2-3">
<router-link :to="{path:'/leavehistory',query:{id:id}}">历史信息</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="3">
<template #title>
<i class="el-icon-location"></i>
<span>加班</span>
</template>
<el-menu-item-group>
<template #title>分组一</template>
<el-menu-item index="3-1">
<router-link :to="{path: '/WorkOvertimeApply',query:{id:id}}">
加班申请
</router-link>
</el-menu-item>
<el-menu-item index="3-2">
<router-link :to="{path: '/WorkOvertimeAuditStatus',query:{id:id}}">
审核状态
</router-link>
</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="3-3">
<router-link :to="{path: '/WorkOvertimeHistory',query:{id:id}}">
历史信息
</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-submenu index="4">
<template #title>
<i class="el-icon-location"></i>
<span>审批</span>
</template>
<el-menu-item-group>
<el-menu-item index="4-1">
<router-link :to="{path:'/leavecheck',query:{id:id}}">请假审批</router-link>
</el-menu-item>
<el-menu-item index="4-2">
<router-link :to="{path: '/Confirm',query:{id:id}}">
加班审批
</router-link>
</el-menu-item>
</el-menu-item-group>
</el-submenu>
<el-menu-item index="5" v-if="flag==='1'">
<i class="el-icon-setting"></i>
<router-link :to="{path:'/set'}">设置</router-link>
</el-menu-item>
<el-button :type="typecolor" @click="checkup()" circle style="width:100px;height:100px;"
:disabled="isdisable">上班打卡
</el-button>
<br>
<el-button :type="typecolor1" @click="checkup1()" circle style="width:100px;height:100px;"
:disabled="isdisable1">下班打卡
</el-button>
<br>
</el-menu>
</el-col>
<el-main>
<router-view></router-view>
</el-main>
</el-row>
</template>
<script>
/* eslint-disable */
import {
defineComponent, h} from 'vue'
import {
ElMessage} from 'element-plus'
import moment from "moment"
export default defineComponent({
name: "Homepage",
data() {
return {
id: '',
flag:'0',
imgSrc: require('../assets/save.jpg'),
Cwa :{
epnum:20210000,
ename:'',
work_date:'2021-11-1 00:00:00',
work_start:'2021-11-1 00:00:00',
work_end: '2021-11-1 00:00:00',
work_descrip:''
},
typecolor: "info",
typecolor1: "info",
isdisable: true,
isdisable1: true,
checktable: [
{
epnum: 66666,
ename: '陈项',
workdate: '',
workstartdatetime: '',
workenddatetime: '',
workdescriptext: '',
}
]
}
},
beforeRouteEnter: (to, from, next) => {
next(vm => {
vm.getParams();
});
},
methods: {
predo(){
let timestamp0 = moment(new Date()).format("YYYY-MM-DD")+" 21:00:00";
let timestamp1 = moment(new Date()).format("YYYY-MM-DD")+" 21:30:00";
let timestamp2 = new Date(timestamp0).getTime();
let timestamp3 = new Date(timestamp1).getTime();
let timestamp4 = new Date().getTime();
/* typecolor: "primary",
typecolor1: "primary",
isdisable: false,
isdisable1: false,*/
console.log(moment(new Date()).format("YYYY-MM-DD HH:mm:ss"))
if(timestamp2<=timestamp4 & timestamp4<=timestamp3){
this.typecolor = 'primary';
this.isdisable= false;
}else{
this.typecolor = 'info';
this.isdisable= true;
}
console.log(timestamp2)
console.log(timestamp3)
console.log(timestamp4)
},
predo1(){
let timestamp0 = moment(new Date()).format("YYYY-MM-DD")+" 21:00:00";
let timestamp1 = moment(new Date()).format("YYYY-MM-DD")+" 21:30:00";
let timestamp2 = new Date(timestamp0).getTime();
let timestamp3 = new Date(timestamp1).getTime();
let timestamp4 = new Date().getTime();
/* typecolor: "primary",
typecolor1: "primary",
isdisable: false,
isdisable1: false,*/
if(timestamp2<=timestamp4 && timestamp4<=timestamp3){
this.typecolor1 = 'primary';
this.isdisable1= false;
}else{
this.typecolor1 = 'info';
this.isdisable1= true;
}
console.log(timestamp2)
console.log(timestamp3)
console.log(timestamp4)
},
getParams() {
this.id = this.$route.params.id;
this.flag = this.$route.params.flag;
console.log(this.flag);
this.$router.push({
path:'/SubHomePage',query:{
id:this.id}})
this.Cwa.epnum =this.id;
this.predo()
this.predo1()
this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
console.log(this.Cwa)
this.axios({
method:'post',
url:"http://localhost:8081/ems/employee/saveCwa",
data:this.Cwa,
}).then((res)=>{
console.log( '打卡日期更新成功')
/*
typecolor1: "info",
isdisable: false,
isdisable1: true,*/
});
},
handleOpen(key, keyPath) {
console.log(key, keyPath);
},
handleClose(key, keyPath) {
console.log(key, keyPath);
},
checkup(){
console.log(this.Cwa)
this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
this.Cwa.work_start = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
this.axios({
method:'post',
url:"http://localhost:8081/ems/employee/updateCwa",
data:this.Cwa,
}).then(()=>{
console.log( '打卡成功')
this.typecolor ="primary"
this.isdisable = true
});
},
checkup1(){
console.log(this.Cwa)
this.Cwa.work_date = moment(new Date()).format("YYYY-MM-DD");
this.Cwa.work_end = moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
this.axios({
method:'post',
url:"http://localhost:8081/ems/employee/updateCwaend",
data:this.Cwa,
}).then(()=>{
console.log( '打卡成功')
this.typecolor ="primary"
this.isdisable1 = true
});
}
},
/* created() {
this.$router.push({path:'/SubHomePage',query:{id:this.id}})
},*/
setup() {
return {
open() {
console.log(this.Cwa)
},
openVn() {
ElMessage({
message: h('p', null, [
h('span', null, '内容可以是 '),
h('i', {
style: 'color: teal'}, 'VNode')
])
});
}
}
}
})
</script>
<style scoped>
a {
color: white;
text-decoration: none;
}
.text {
font-size: 14px;
}
.item {
margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both
}
.box-card {
width: 480px;
}
</style>