fzu102201435
/
YueDrom-front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

初始化前端代码

Browse Source
master
Gary 3 months ago
commit 94ab5b1396
66 changed files with 7179 additions and 0 deletions
Show Stats Download Patch File Download Diff File

23
.gitignore vendored
Unescape View File

@ -0,0 +1,23 @@
.DS_Store
node_modules/
dist/
npm-debug.log*
yarn-debug.log*
yarn-error.log*
**/*.log
tests/**/coverage/
tests/e2e/reports
selenium-debug.log
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.local
package-lock.json
yarn.lock

5
babel.config.js
Unescape View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

34
package.json
Unescape View File

@ -0,0 +1,34 @@
{
"name": "YueDorm",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"@element-plus/icons-vue": "^0.2.7",
"axios": "^0.25.0",
"core-js": "^3.6.5",
"echarts": "^5.3.0",
"element-plus": "^2.0.1",
"vue": "^3.0.0",
"vue-axios": "^3.4.1",
"vue-router": "^4.0.13",
"vuex": "^4.0.0-0",
"wangeditor": "^4.7.11"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"element": "^0.1.4"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

18
public/index.html
Unescape View File

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width,initial-scale=1.0" name="viewport">
<link href="<%= BASE_URL %>favicon.ico" rel="icon">
<title>YueDorm</title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

BIN
public/login_Team.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.6 MiB

BIN
public/myRoom.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.4 MiB

BIN
public/self_Space.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 718 KiB

BIN
public/waoku.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

BIN
public/wuwu.jpeg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 60 KiB

17
src/App.vue
Unescape View File

@ -0,0 +1,17 @@
<template>
<div>
<router-view/>
</div>
</template>
<style>
</style>
<script>
export default {
name: "Layout",
}
</script>

BIN
src/assets/QQ.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
src/assets/WeChat.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.4 KiB

99
src/assets/css/Home.css
Unescape View File

@ -0,0 +1,99 @@
.wv-lt-refresh {
display: none;
}
.topInfo {
margin: 0 auto;
}
.el-colDiv {
margin: 20px auto;
max-width: 340px;
min-width: 200px;
overflow: hidden;
height: 115px;
border-radius: 5px;
background-color: black;
color: white;
padding-left: 15px;
padding-top: 15px;
position: relative;
}
.el-colDiv:hover {
background-position: right;
}
.nowDiv {
width: 38px;
height: 19px;
position: absolute;
right: 5%;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.digital {
font-size: 25px;
line-height: normal;
margin-left: 2px;
}
.title {
font-size: 18px;
}
.last-span {
font-size: 13px;
}
#stuNumDiv {
/*background-color: #2e4057;*/
background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
background-size: 200%;
transition: 0.6s;
}
#haveRoomDiv {
/*background-color: #1398ff;*/
background-image: linear-gradient(to left, #C4E538, #009432, #C4E538);
background-size: 200%;
transition: 0.6s;
}
#repairNum {
/*background-color: #008789;*/
background-image: linear-gradient(to left, #12CBC4, #0652DD, #12CBC4);
background-size: 200%;
transition: 0.6s;
}
#emptyRoom {
/*background-color: #ffb400;*/
background-image: linear-gradient(to left, #FDA7DF, #9980FA, #FDA7DF);
background-size: 200%;
transition: 0.6s;
}
#ssv1-main-text {
background-color: #1398ff;
}
#ssv2-main-text {
background-color: #2e4057;
}
#ssv3-main-text {
background-color: #ffb400;
}
#ssv4-main-text {
background-color: #008789;
}

21
src/assets/css/Login.css
Unescape View File

@ -0,0 +1,21 @@
.login-container {
height: 100%;
position: fixed;
top: 0;
left: 0;
transform: translate(-50%, -50%);
display: flex;
justify-content: center;
align-items: center;
}
@keyframes myanimation {
0% {
background-position: 0% 50%;
}
50% {
background-position: 0% 50%;
}
100% {
background-position: 0% 50%;
}
}

4
src/assets/css/MyRoomInfo.css
Unescape View File

@ -0,0 +1,4 @@
.rightSpan {
display: inline-block;
width: 80px;
}

34
src/assets/css/RoomInfo.css
Unescape View File

@ -0,0 +1,34 @@
.demo-table-expand {
font-size: 0;
}
.demo-table-expand label {
text-align: center;
width: 90px;
color: #99a9bf;
}
.demo-table-expand .el-form-item {
text-align: center;
margin-right: 0;
margin-bottom: 0;
width: 25%;
}
.el-form--inline-icon {
margin-left: 5px;
display: flex;
font-size: 16px;
}
.el-form--inline-icon > .el-icon {
cursor: pointer;
margin: 0 5px;
}
.item {
margin-left: 50px;
margin-bottom: 0;
width: 20%;
}

40
src/assets/css/SelfInfo.css
Unescape View File

@ -0,0 +1,40 @@
.img {
}
.editImg {
width: 78px;
height: 78px;
border-radius: 39px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-size: 14px;
line-height: 79px;
color: #cccccc;
position: absolute;
left: 261px;
background-color: rgba(0, 0, 0, 0.5);
display: none;
}
.AvatarDiv {
width: 80px;
height: 80px;
border-radius: 40px;
display: flex;
margin: 0 auto;
}
.AvatarDiv:hover .editImg {
display: block;
cursor: pointer;
}
.upload-demo {
display: grid;
width: 80px;
height: 80px;
margin: 40px auto;
}

8
src/assets/css/global.css
Unescape View File

@ -0,0 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}

201
src/assets/js/AdjustRoomInfo.js
Unescape View File

@ -0,0 +1,201 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "AdjustRoomInfo",
data() {
const checkRoomState = (rule, value, callback) => {
this.dormRoomId = value
request.get("/room/checkRoomState/" + value).then((res) => {
if (res.code === "0") {
callback();
} else {
callback(new Error(res.msg));
}
});
};
const checkBedState = (rule, value, callback) => {
request.get("/room/checkBedState/" + this.dormRoomId + '/' + value).then((res) => {
if (res.code === "0") {
callback();
} else {
callback(new Error(res.msg));
}
});
};
const checkApplyState = (rule, value, callback) => {
console.log(this.form.finishTime)
if (value === "通过" && this.form.finishTime !== null) {
callback();
} else if (value === "驳回" && this.form.finishTime !== null) {
callback();
} else {
callback(new Error("请检查订单完成状态与选择时间是否匹配"));
}
};
return {
loading: true,
dialogVisible: false,
detailDialog: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {},
dormRoomId: 0,
orderState: false,
rules: {
username: [
{required: true, message: "请输入学号", trigger: "blur"},
{pattern: /^[a-zA-Z0-9]{4,9}$/, message: "必须由 2 到 5 个字母或数字组成", trigger: "blur",},
],
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
{pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/, message: "必须由 2 到 10 个汉字组成", trigger: "blur",},
],
currentRoomId: [
{required: true, message: "请输入当前房间号", trigger: "blur"},
],
currentBedId: [
{required: true, message: "请输入当前床位号", trigger: "blur"},
],
state: [{validator: checkApplyState, trigger: "blur"},],
towardsRoomId: [{validator: checkRoomState, trigger: "blur"}],
towardsBedId: [{validator: checkBedState, trigger: "blur"}],
},
}
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/adjustRoom/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/adjustRoom/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.gender === value;
},
judgeOrderState(state) {
if (state === '通过') {
this.orderState = true
} else if (state === '驳回') {
this.orderState = false
}
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
this.judgeOrderState(this.form.state)
//修改
request.put("/adjustRoom/update/" + this.orderState, this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else if (res.msg === "重复操作") {
ElMessage({
message: res.msg,
type: "error",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
this.detailDialog = false;
},
showDetail(row) {
// 查看详情
this.detailDialog = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
});
},
handleEdit(row) {
//修改
// 生拷贝
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
});
},
async handleDelete(id) {
//删除
request.delete("/adjustRoom/delete/" + id).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
}

215
src/assets/js/ApplyChangeRoom.js
Unescape View File

@ -0,0 +1,215 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "AdjustRoomInfo",
data() {
const checkRoomState = (rule, value, callback) => {
this.dormRoomId = value
if (typeof value === "number") {
request.get("/room/checkRoomState/" + value).then((res) => {
request.get("/room/checkRoomExist/" + value).then((result) => {
if (result.code === "-1") {
callback(new Error(result.msg));
}
if (res.code === "-1") {
callback(new Error(res.msg));
}
callback();
})
});
} else {
callback(new Error("请输入正确的数据"));
}
};
const checkBedState = (rule, value, callback) => {
request.get("/room/checkBedState/" + this.dormRoomId + '/' + value).then((res) => {
if (res.code === "0") {
callback();
} else {
callback(new Error(res.msg));
}
});
};
return {
loading: true,
dialogVisible: false,
detailDialog: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {},
dormRoomId: 0,
orderState: false,
judgeOption: false,
rules: {
username: [
{required: true, message: "请输入学号", trigger: "blur"},
{pattern: /^[a-zA-Z0-9]{4,9}$/, message: "必须由 2 到 5 个字母或数字组成", trigger: "blur",},
],
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
{pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/, message: "必须由 2 到 10 个汉字组成", trigger: "blur",},
],
currentRoomId: [
{required: true, message: "请输入当前房间号", trigger: "blur"},
],
currentBedId: [
{required: true, message: "请输入当前床位号", trigger: "blur"},
],
towardsRoomId: [
{validator: checkRoomState, trigger: "blur"},
],
towardsBedId: [
{validator: checkBedState, trigger: "blur"},
],
},
}
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/adjustRoom/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.gender === value;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form.username = JSON.parse(sessionStorage.getItem("user")).username;
this.form.name = JSON.parse(sessionStorage.getItem("user")).name;
request.get("/room/getMyRoom/" + this.form.username).then((res) => {
this.form.currentRoomId = res.data.dormRoomId
this.form.currentBedId = this.calBedNum(this.form.username, res.data)
});
this.judgeOption = true;
});
},
calBedNum(username, data) {
if (data.firstBed === username) {
return 1;
} else if (data.secondBed === username) {
return 2;
} else if (data.thirdBed === username) {
return 3;
} else if (data.fourthBed === username) {
return 4;
}
},
judgeOrderState(state) {
if (state === '通过') {
this.orderState = true
} else if (state === '驳回') {
this.orderState = false
} else if (state === '未处理') {
this.orderState = false
}
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.judgeOption === false) {
//修改
this.judgeOrderState(this.form.state)
request.put("/adjustRoom/update/" + this.orderState, this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else if (res.msg === "重复操作") {
ElMessage({
message: res.msg,
type: "error",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else if (this.judgeOption === true) {
//添加
request.post("/adjustRoom/add", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "添加成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
this.detailDialog = false;
},
showDetail(row) {
// 查看详情
this.detailDialog = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
});
},
handleEdit(row) {
//修改
// 生拷贝
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
this.judgeOption = false;
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
}

136
src/assets/js/ApplyRepairInfo.js
Unescape View File

@ -0,0 +1,136 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "ApplyRepairInfo",
components: {},
data() {
return {
loading: true,
dialogVisible: false,
detailDialog: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
detail: {},
name: '',
username: '',
form: {},
room: {
dormRoomId: '',
dormBuildId: '',
},
rules: {
title: [{required: true, message: "请输入标题", trigger: "blur"}],
content: [{required: true, message: "请输入内容", trigger: "blur"}],
orderBuildTime: [{required: true, message: "请选择时间", trigger: "blur"},],
},
};
},
created() {
this.init()
this.getInfo()
this.load()
this.loading = true
setTimeout(() => {
//设置延迟执行
this.loading = false
}, 1000);
},
methods: {
init() {
this.form = JSON.parse(sessionStorage.getItem("user"));
this.name = this.form.name;
this.username = this.form.username;
},
async load() {
request.get("/repair/find/" + this.name, {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
getInfo() {
request.get("/room/getMyRoom/" + this.username).then((res) => {
if (res.code === "0") {
this.room = res.data;
console.log(this.room);
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
filterTag(value, row) {
return row.state === value;
},
showDetail(row) {
this.detailDialog = true;
this.$nextTick(() => {
this.detail = row;
});
},
closeDetails() {
this.detailDialog = false;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form.repairer = this.name
this.form.dormBuildId = this.room.dormBuildId
this.form.dormRoomId = this.room.dormRoomId
});
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
//新增
console.log(this.form)
await request.post("/repair/add", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
})
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

181
src/assets/js/BuildingInfo.js
Unescape View File

@ -0,0 +1,181 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "BuildingInfo",
components: {},
data() {
return {
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {
dormBuildId: "",
dormBuildName: "",
dormBuildDetail: "",
},
rules: {
dormBuildId: [
{required: true, message: "请输入编号", trigger: "blur"},
{
pattern: /^(1|[1-9]\d?|100)$/,
message: "范围：1-100",
trigger: "blur",
},
],
dormBuildName: [
{required: true, message: "请输入名称", trigger: "blur"},
],
dormBuildDetail: [
{required: true, message: "请输入备注", trigger: "blur"},
],
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/building/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/building/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.dormBuildDetail === value;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.judge === false) {
//新增
request.post("/building/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
request.put("/building/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
},
handleEdit(row) {
//修改
this.judge = true;
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(row));
this.disabled = true;
});
},
handleDelete(id) {
console.log(id);
request.delete("/building/delete/" + id).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

277
src/assets/js/DormManagerInfo.js
Unescape View File

@ -0,0 +1,277 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "StuInfo",
components: {},
data() {
// 手机号验证
const checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
if (!value) {
return callback(new Error("电话号码不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(+value)) {
callback(new Error("请输入数字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("电话号码格式不正确"));
}
}
}, 100);
};
const checkPass = (rule, value, callback) => {
if (!this.editJudge) {
console.log("验证");
if (value == "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
} else {
console.log("不验证");
callback();
}
};
return {
showpassword: true,
editJudge: true,
judgeAddOrEdit: true,
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {
username: "",
name: "",
age: "",
gender: "",
phoneNum: "",
email: "",
dormBuildId: "",
},
rules: {
username: [
{required: true, message: "请输入账号", trigger: "blur"},
{
pattern: /^[a-zA-Z0-9]{4,9}$/,
message: "必须由 4 到 9 个字母或数字组成",
trigger: "blur",
},
],
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
{
pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/,
message: "必须由 2 到 10 个汉字组成",
trigger: "blur",
},
],
age: [
{required: true, message: "请输入年龄", trigger: "blur"},
{type: "number", message: "年龄必须为数字值", trigger: "blur"},
{
pattern: /^(1|[1-9]\d?|100)$/,
message: "范围：1-100",
trigger: "blur",
},
],
gender: [{required: true, message: "请选择性别", trigger: "change"}],
phoneNum: [{required: true, validator: checkPhone, trigger: "blur"}],
email: [
{type: "email", message: "请输入正确的邮箱地址", trigger: "blur"},
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{
min: 6,
max: 32,
message: "长度在 6 到 16 个字符",
trigger: "blur",
},
],
checkPass: [{validator: checkPass, trigger: "blur"}],
dormBuildId: [],
},
editDisplay: {
display: "block",
},
display: {
display: "none",
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/dormManager/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/dormManager/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.gender === value;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.judgeAddOrEdit = false;
this.editDisplay = {display: "none"};
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
if (this.judge === false) {
//新增
request.post("/dormManager/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
request.put("/dormManager/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.display = {display: "none"};
this.editJudge = true;
this.disabled = true;
this.showpassword = true;
this.dialogVisible = false;
},
EditPass() {
if (this.editJudge) {
this.showpassword = false;
this.display = {display: "flex"};
this.disabled = false;
this.editJudge = false;
} else {
this.showpassword = true;
this.display = {display: "none"};
this.editJudge = true;
this.disabled = true;
}
},
handleEdit(row) {
//修改
//判断操作类型
this.judge = true;
// 生拷贝
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
this.judgeAddOrEdit = true;
this.editDisplay = {display: "block"};
this.disabled = true;
});
},
async handleDelete(username) {
//删除
console.log(username);
request.delete("/dormManager/delete/" + username).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

92
src/assets/js/Home.js
Unescape View File

@ -0,0 +1,92 @@
import weather from "@/components/weather";
import Calender from "@/components/Calendar";
import request from "@/utils/request";
import home_echarts from "@/components/home_echarts";
export default {
name: "Home",
components: {
weather,
Calender,
home_echarts,
},
data() {
return {
studentNum: "",
haveRoomStudentNum: "",
detailDialog: false,
repairOrderNum: "",
noFullRoomNum: "",
activities: [],
};
},
created() {
this.getHomePageNotice();
this.getStuNum();
this.getHaveRoomNum();
this.getOrderNum();
this.getNoFullRoom();
},
methods: {
async getStuNum() {
request.get("/stu/stuNum").then((res) => {
if (res.code === "0") {
this.studentNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getHaveRoomNum() {
request.get("/room/selectHaveRoomStuNum").then((res) => {
if (res.code === "0") {
this.haveRoomStudentNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getOrderNum() {
request.get("/repair/orderNum").then((res) => {
if (res.code === "0") {
this.repairOrderNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getNoFullRoom() {
request.get("/room/noFullRoom").then((res) => {
if (res.code === "0") {
this.noFullRoomNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getHomePageNotice() {
request.get("/notice/homePageNotice").then((res) => {
if (res.code === "0") {
this.activities = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
},
};

181
src/assets/js/Login.js
Unescape View File

@ -0,0 +1,181 @@
import request from "@/utils/request";
import router from '@/router'; // 根据你的项目结构和路由文件的位置进行调整
import { registerRuntimeCompiler } from "vue";
const {ElMessage} = require("element-plus");
export default {
name: "Login",
data() {
return {
flag:true,
identity: "",
options: [{
value: '选项1',
label: '学生'
}, {
value: '选项2',
label: '宿舍管理员'
}, {
value: '选项3',
label: '后勤管理中心'
}],
value: '',
form: {
username: "",
password: "",
confirmPassword:"",
identity: "",
},
rules: {
username: [
{required: true, message: "请输入用户名", trigger: "blur"},
],
password: [{required: true, message: "请输入密码", trigger: "blur"}],
confirmPassword: [{required: true, message: "请确认密码", trigger: "blur"}],
identity: [{required: true, message: "请选择身份", trigger: "blur"}],
},
};
},
computed: {
disabled() {
const {username, password, identity} = this.form;
return Boolean(username && password && identity);
},
},
methods: {
register() {
const preBox = document.querySelector(".pre-box");
const img = document.querySelector("img");
// if(this.form.username == '123') {
// router.push('/home');
// }
this.$refs.form.validate((valid) => {
console.log(this.form);
if (valid) {
this.identity = this.form.identity;
request.post("/" + this.identity + "/register", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "注册成功",
type: "success",
});
alert('注册成功，请登录');
preBox.style.transform = "translateX(0%)";
preBox.style.backgroundColor = "#edd4dc";
img.src = "img/sleep.5db2c1bc.png";
// 注册成功跳转登录页面
window.sessionStorage.setItem("user", JSON.stringify(res.data));
window.sessionStorage.setItem("identity", JSON.stringify(this.form.identity));
this.$router.replace({path: "/Login"});
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
// register() {
// let url = this.axios.urls.SYSTEM_USER_DOREG;
// let params = {
// username: this.username,
// password: this.password,
// }
// this.axios.post(url,params).then(r=> {
// // console.log(r);
// if (r.data.success) {
// this.$message({
// message: r.data.msg,
// type: 'success',
// });
// this.$router.push('/Login')
// } else {
// this.$message.error(r.data.msg);
// }
// }).catch(r=> {
// //如果有问题就会走这里
// // console.log(error);
// });
// },
login() {
// if(this.form.username == '123') {
// router.push('/home');
// }
this.$refs.form.validate((valid) => {
if (valid) {
this.identity = this.form.identity;
console.log(this.form.username);
//console.log(this.identity);
request.post("/" + this.identity + "/login", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "登陆成功",
type: "success",
});
// 登陆成功跳转主页
window.sessionStorage.setItem("user", JSON.stringify(res.data));
window.sessionStorage.setItem("identity", JSON.stringify(this.form.identity));
this.$router.replace({path: "/home"});
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
// 滑动的状态
mySwitch() {
const preBox = document.querySelector(".pre-box");
const img = document.querySelector("img");
if (this.flag) {
// 修改滑动盒子的移动位置和背景颜色
preBox.style.transform = "translateX(100%)";
preBox.style.backgroundColor = "#c9e0ed";
// 修改图片的路径
img.src = "img/wake.b9344131.png";
} else {
preBox.style.transform = "translateX(0%)";
preBox.style.backgroundColor = "#edd4dc";
img.src = "img/sleep.5db2c1bc.png";
}
this.flag = !this.flag;
},
// createBubbles() {
// //console.log("Creating bubbles!");
// // 获取body元素
// const body = document.querySelector('.login')
// // 创建泡泡元素
// const buble = document.createElement("span")
// buble.classList.add("buble");
// // 设置泡泡半径
// let r = Math.random()*5 + 25 //半径大小为25~30
// // 设置泡泡的宽高
// buble.style.width=r+'px'
// buble.style.height=r+'px'
// // 设置泡泡的随机起点
// buble.style.left=Math.random()*innerWidth+'px'
// // 为body添加buble元素
// body.append(buble)
// // 4s清除一次泡泡
// setTimeout(() => {
// buble.remove()
// }, 4000);
// //console.log("Box element:", body);
// },
// },
// created() {
// // 每200ms生成一个泡泡
// setInterval(() => {
// this.createBubbles()
// }, 200);
},
};

49
src/assets/js/MyRoomInfo.js
Unescape View File

@ -0,0 +1,49 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "MyRoomInfo",
data() {
return {
name: "",
form: {
username: "",
},
room: {
dormRoomId: "",
dormBuildId: "",
floorNum: "",
maxCapacity: "",
currentCapacity: "",
firstBed: "",
secondBed: "",
thirdBed: "",
fourthBed: "",
},
};
},
created() {
this.init();
this.getInfo();
},
methods: {
init() {
this.form = JSON.parse(sessionStorage.getItem("user"));
this.name = this.form.username;
},
getInfo() {
request.get("/room/getMyRoom/" + this.name).then((res) => {
if (res.code === "0") {
this.room = res.data;
console.log(this.room);
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
},
};

207
src/assets/js/NoticeInfo.js
Unescape View File

@ -0,0 +1,207 @@
import request from "@/utils/request";
import E from "wangeditor";
const {ElMessage} = require("element-plus");
let editor;
export default {
name: "BuildingInfo",
components: {
E,
},
data() {
return {
author: "",
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
detailDialog: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
detail: {},
form: {
id: "",
title: "",
content: "",
author: "",
releaseTime: "",
},
rules: {
title: [{required: true, message: "请输入标题", trigger: "blur"}],
content: [{required: true, message: "请输入内容", trigger: "blur"}],
releaseTime: [
{required: true, message: "请选择时间", trigger: "blur"},
],
},
};
},
created() {
this.getSessionInfo();
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
mounted() {
},
methods: {
async load() {
request.get("/notice/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/notice/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
getSessionInfo() {
let user = JSON.parse(sessionStorage.getItem("user"));
this.author = user.name;
},
showDetail(row) {
this.detailDialog = true;
this.$nextTick(() => {
this.detail = row;
});
},
closeDetailDialog() {
this.detailDialog = false;
},
add() {
this.form.author = this.author;
console.log(this.form.author);
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
//加载wangEdit
editor = new E("#div1");
editor.create();
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.form.content = editor.txt.html(); //获取编辑器内容并赋值
this.form.author = this.author;
console.log(this.form.author);
this.$refs.form.validate((valid) => {
if (valid) {
if (this.judge === false) {
//新增
request.post("/notice/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
request.put("/notice/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
editor.txt.clear();
editor.destroy();
this.dialogVisible = false;
},
handleEdit(row) {
//修改
this.judge = true;
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
//加载wangEdit
editor = new E("#div1");
editor.create();
// 生拷贝
this.form = JSON.parse(JSON.stringify(row));
editor.txt.html(this.form.content);
this.disabled = true;
});
},
handleDelete(id) {
console.log(id);
request.delete("/notice/delete/" + id).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

204
src/assets/js/RepairInfo.js
Unescape View File

@ -0,0 +1,204 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "RepairInfo",
components: {},
data() {
const checkOrderState = (rule, value, callback) => {
if (this.judge) {
if (value === "未完成" && this.form.orderFinishTime === null) {
callback();
} else if (value === "完成" && this.form.orderFinishTime !== null) {
callback();
} else {
callback(new Error("请检查订单完成状态与选择时间是否匹配"));
}
} else {
callback();
}
};
return {
buildTimeDisabled: true,
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
detailDialog: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
detail: {},
form: {},
rules: {
title: [{required: true, message: "请输入标题", trigger: "blur"}],
content: [{required: true, message: "请输入内容", trigger: "blur"}],
repairer: [
{required: true, message: "请输入申请人", trigger: "blur"},
],
orderBuildTime: [
{required: true, message: "请选择时间", trigger: "blur"},
],
state: [{validator: checkOrderState, trigger: "blur"}],
},
finishTime: {
display: "none",
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/repair/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/repair/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.state === value;
},
showDetail(row) {
this.detailDialog = true;
this.$nextTick(() => {
this.detail = row;
});
},
closeDetails() {
this.detailDialog = false;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.buildTimeDisabled = false;
this.finishTime = {display: "none"};
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
if (this.judge === false) {
//新增
await request.post("/repair/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
await request.put("/repair/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
},
handleEdit(row) {
//修改
this.judge = true;
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(row));
this.disabled = true;
this.buildTimeDisabled = true;
this.finishTime = {display: "flex"};
});
},
handleDelete(id) {
console.log(id);
request.delete("/repair/delete/" + id).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

374
src/assets/js/RoomInfo.js
Unescape View File

@ -0,0 +1,374 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "BuildingInfo",
components: {},
data() {
const checkStuNum = (rule, value, callback) => {
request.get("/stu/exist/" + value).then((res) => {
request.get("/room/judgeHadBed/" + value).then((result) => {
if (res.code === "0" && result.code === "0") {
callback();
} else if (res.code === "-1" && result.code === "0") {
callback(new Error(res.msg));
} else if (res.code === "0" && result.code === "-1") {
callback(new Error(result.msg));
} else {
callback(new Error("请输入正确的数据"));
}
});
});
};
return {
bedNum: 0,
havePeopleNum: 0,
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
bedDialog: false,
stuInfoDialog: false,
bedName: "",
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {
dormRoomId: "",
dormBuildId: "",
floorNum: "",
maxCapacity: "",
currentCapacity: "",
firstBed: "",
secondBed: "",
thirdBed: "",
fourthBed: "",
},
rules: {
dormRoomId: [
{required: true, message: "请输入房间号", trigger: "blur"},
{pattern: /^[0-9]{4}$/, message: "范围：1000-9999", trigger: "blur"},
],
floorNum: [
{required: true, message: "请输入楼层数", trigger: "blur"},
{pattern: /^[1-3]$/, message: "范围：1-3", trigger: "blur"},
],
dormBuildId: [
{required: true, message: "请输入楼宇号数", trigger: "blur"},
{pattern: /^[1-4]$/, message: "范围：1-4", trigger: "blur"},
],
maxCapacity: [
{required: true, message: "请输入房间可住人数", trigger: "blur"},
{pattern: /^[0-4]$/, message: "范围：0-4", trigger: "blur"},
],
currentCapacity: [
{required: true, message: "请输入当前已住人数", trigger: "blur"},
{pattern: /^[0-4]$/, message: "范围：0-4", trigger: "blur"},
],
firstBed: [{validator: checkStuNum, trigger: "blur"}],
secondBed: [{validator: checkStuNum, trigger: "blur"}],
thirdBed: [{validator: checkStuNum, trigger: "blur"}],
fourthBed: [{validator: checkStuNum, trigger: "blur"}],
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/room/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/room/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.currentCapacity === value;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
if (this.judge === false) {
//新增
request.post("/room/add", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.loading = true;
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
request.put("/room/update", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
this.bedDialog = false;
this.stuInfoDialog = false;
},
handleEdit(row) {
//修改
this.judge = true;
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(row));
this.disabled = true;
});
},
handleDelete(dormRoomId) {
//删除
request.delete("/room/delete/" + dormRoomId).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
calCurrentNum(info) {
this.havePeopleNum = 0;
// 获取房间人数
let roomPeopleNum = 0;
if (info.firstBed != null) {
roomPeopleNum++;
}
if (info.secondBed != null) {
roomPeopleNum++;
}
if (info.thirdBed != null) {
roomPeopleNum++;
}
if (info.fourthBed != null) {
roomPeopleNum++;
}
this.havePeopleNum = roomPeopleNum;
},
plusIcon(num, info) {
//添加图标
this.judge = false;
//显示对应床位input
this.bedNum = num;
//获取当前房间人数
this.calCurrentNum(info);
this.bedDialog = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(info));
});
},
editIcon(num, info) {
//修改图标
this.judge = true;
//显示对应床位input
this.bedNum = num;
//修改床位所住的学生
this.bedDialog = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(info));
});
},
detailIcon(num, info) {
//查看床位所住的学生
let stu = "";
// 删除
if (num === 1) {
stu = info.firstBed;
} else if (num === 2) {
stu = info.secondBed;
} else if (num === 3) {
stu = info.thirdBed;
} else if (num === 4) {
stu = info.fourthBed;
}
request.get("/stu/exist/" + stu).then((res) => {
if (res.code === "0") {
this.stuInfoDialog = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(res.data));
});
}
});
},
addStuBed() {
this.$refs.form.validate((valid) => {
if (valid) {
// 为床位添加学生
this.form.currentCapacity = this.havePeopleNum + 1;
request.put("/room/update", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.loading = true;
this.load();
this.bedDialog = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
editStuBed() {
//修改
this.$refs.form.validate((valid) => {
if (valid) {
request.put("/room/update", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.loading = true;
this.load();
this.bedDialog = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
async deleteStuBed(bedNum, info) {
let bedName = "";
// 删除
if (bedNum === 1) {
bedName = "first_bed";
} else if (bedNum === 2) {
bedName = "second_bed";
} else if (bedNum === 3) {
bedName = "third_bed";
} else if (bedNum === 4) {
bedName = "fourth_bed";
}
//更新当前房间人数
this.calCurrentNum(info);
request.delete(
"/room/delete/" +
bedName +
"/" +
info.dormRoomId +
"/" +
this.havePeopleNum
).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.loading = true;
this.load();
this.bedDialog = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

238
src/assets/js/SelfInfo.js
Unescape View File

@ -0,0 +1,238 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "selfInfo",
data() {
// 手机号验证
const checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
if (!value) {
return callback(new Error("电话号码不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(+value)) {
callback(new Error("请输入数字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("电话号码格式不正确"));
}
}
}, 100);
};
const checkPass = (rule, value, callback) => {
if (!this.editJudge) {
console.log("验证");
if (value == "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
} else {
console.log("不验证");
callback();
}
};
return {
showpassword: true,
image: "",
editJudge: true,
disabled: true,
dialogVisible: false,
identity: "",
username: "",
name: "",
gender: "",
age: "",
phoneNum: "",
email: "",
targetURL: "",
avatar: "",
form: {
username: "",
name: "",
gender: "",
age: "",
phoneNum: "",
email: "",
},
rules: {
username: [
{required: true, message: "请输入账号", trigger: "blur"},
{
pattern: /^[a-zA-Z0-9]{4,9}$/,
message: "必须由 4 到 9 个字母或数字组成",
trigger: "blur",
},
],
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
{
pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/,
message: "必须由 2 到 10 个汉字组成",
trigger: "blur",
},
],
gender: [{required: true, message: "请选择性别", trigger: "change"}],
age: [
{required: true, message: "请输入年龄", trigger: "blur"},
{type: "number", message: "年龄必须为数字值", trigger: "blur"},
{
pattern: /^(1|[1-9]\d?|100)$/,
message: "范围：1-100",
trigger: "blur",
},
],
phoneNum: [{required: true, validator: checkPhone, trigger: "blur"}],
email: [
{type: "email", message: "请输入正确的邮箱地址", trigger: "blur"},
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{
min: 6,
max: 32,
message: "长度在 6 到 16 个字符",
trigger: "blur",
},
],
checkPass: [{validator: checkPass, trigger: "blur"}],
},
display: {
display: "none",
},
imgDisplay: {
display: "none",
},
};
},
created() {
this.load();
this.find();
this.init(this.avatar);
},
methods: {
//获取个人信息页面信息
load() {
this.form = JSON.parse(sessionStorage.getItem("user"));
this.identity = JSON.parse(sessionStorage.getItem("identity"));
this.username = this.form.username;
this.name = this.form.name;
this.gender = this.form.gender;
this.age = this.form.age;
this.phoneNum = this.form.phoneNum;
this.email = this.form.email;
this.avatar = this.form.avatar;
},
//查询数据，更新session
find() {
this.form = JSON.parse(sessionStorage.getItem("user"));
request.post("/" + this.identity + "/login", this.form).then((res) => {
//更新sessionStorage
window.sessionStorage.setItem("user", JSON.stringify(res.data));
//更新页面数据
this.load();
});
},
Edit() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(sessionStorage.getItem("user"));
});
},
cancel() {
this.$refs.form.resetFields();
this.display = {display: "none"};
this.showpassword = true;
this.editJudge = true;
this.disabled = true;
this.dialogVisible = false;
},
async save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
//修改
await request.put("/" + this.identity + "/update", this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
//更新sessionStorage
window.sessionStorage.setItem(
"user",
JSON.stringify(this.form)
);
this.find();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
});
},
EditPass() {
if (this.editJudge) {
this.display = {display: "flex"};
this.showpassword = false;
this.disabled = false;
this.editJudge = false;
} else {
this.display = {display: "none"};
this.showpassword = true;
this.editJudge = true;
this.disabled = true;
}
},
//发送请求，获取头像
async init(data) {
if (data === null || data === "") {
console.log("用户未设置头像");
this.imgDisplay = {display: "none"};
} else {
this.imgDisplay = {display: "block"};
console.log("头像名称：" + data);
await request.get("/files/initAvatar/" + data).then((res) => {
if (res.code === "0") {
this.image = res.data.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
},
async uploadSuccess() {
this.form = JSON.parse(sessionStorage.getItem("user"));
await request.post("/files/uploadAvatar/" + this.identity, this.form).then((res) => {
if (res.code === "0") {
ElMessage({
message: "设置成功",
type: "success",
});
//获取头像文件名
this.avatar = res.data;
console.log("上传成功：" + this.avatar);
this.find();
this.init(this.avatar);
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
},
};

273
src/assets/js/StuInfo.js
Unescape View File

@ -0,0 +1,273 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "StuInfo",
data() {
// 手机号验证
const checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
if (!value) {
return callback(new Error("电话号码不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(+value)) {
callback(new Error("请输入数字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("电话号码格式不正确"));
}
}
}, 100);
};
const checkPass = (rule, value, callback) => {
if (!this.editJudge) {
if (value == "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
} else {
callback();
}
};
return {
showpassword: true,
judgeAddOrEdit: true,
loading: true,
editJudge: true,
disabled: false,
judge: false,
dialogVisible: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
form: {
username: "",
name: "",
age: "",
gender: "",
phoneNum: "",
email: "",
},
rules: {
username: [
{required: true, message: "请输入学号", trigger: "blur"},
{
pattern: /^[a-zA-Z0-9]{4,9}$/,
message: "必须由 2 到 5 个字母或数字组成",
trigger: "blur",
},
],
name: [
{required: true, message: "请输入姓名", trigger: "blur"},
{
pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/,
message: "必须由 2 到 10 个汉字组成",
trigger: "blur",
},
],
age: [
{required: true, message: "请输入年龄", trigger: "blur"},
{type: "number", message: "年龄必须为数字值", trigger: "blur"},
{
pattern: /^(1|[1-9]\d?|100)$/,
message: "范围：1-100",
trigger: "blur",
},
],
gender: [{required: true, message: "请选择性别", trigger: "change"}],
phoneNum: [{required: true, validator: checkPhone, trigger: "blur"}],
email: [
{type: "email", message: "请输入正确的邮箱地址", trigger: "blur"},
],
password: [
{required: true, message: "请输入密码", trigger: "blur"},
{
min: 6,
max: 32,
message: "长度在 6 到 16 个字符",
trigger: "blur",
},
],
checkPass: [{validator: checkPass, trigger: "blur"}],
},
editDisplay: {
display: "block",
},
display: {
display: "none",
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/stu/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/stu/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.gender === value;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.judgeAddOrEdit = false;
this.editDisplay = {display: "none"};
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate((valid) => {
if (valid) {
if (this.judge === false) {
//新增
request.post("/stu/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.loading = true;
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
request.put("/stu/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.display = {display: "none"};
this.editJudge = true;
this.disabled = true;
this.showpassword = true;
this.dialogVisible = false;
},
EditPass() {
if (this.editJudge) {
this.showpassword = false;
this.display = {display: "flex"};
this.disabled = false;
this.editJudge = false;
} else {
this.showpassword = true;
this.display = {display: "none"};
this.editJudge = true;
this.disabled = true;
}
},
handleEdit(row) {
//修改
//判断操作类型
this.judge = true;
// 生拷贝
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.form = JSON.parse(JSON.stringify(row));
this.judgeAddOrEdit = true;
this.editDisplay = {display: "block"};
this.disabled = true;
});
},
async handleDelete(username) {
//删除
console.log(username);
request.delete("/stu/delete/" + username).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

207
src/assets/js/VisitorInfo.js
Unescape View File

@ -0,0 +1,207 @@
import request from "@/utils/request";
const {ElMessage} = require("element-plus");
export default {
name: "VisitorInfo",
components: {},
data() {
// 手机号验证
const checkPhone = (rule, value, callback) => {
const phoneReg = /^1[3|4|5|6|7|8][0-9]{9}$/;
if (!value) {
return callback(new Error("电话号码不能为空"));
}
setTimeout(() => {
if (!Number.isInteger(+value)) {
callback(new Error("请输入数字值"));
} else {
if (phoneReg.test(value)) {
callback();
} else {
callback(new Error("电话号码格式不正确"));
}
}
}, 100);
};
return {
loading: true,
disabled: false,
judge: false,
dialogVisible: false,
search: "",
currentPage: 1,
pageSize: 10,
total: 0,
tableData: [],
detail: {},
form: {},
rules: {
visitorName: [
{required: true, message: "请输入姓名", trigger: "blur"},
{
pattern: /^(?:[\u4E00-\u9FA5·]{2,10})$/,
message: "必须由 2 到 10 个汉字组成",
trigger: "blur",
},
],
gender: [{required: true, message: "请选择性别", trigger: "change"}],
phoneNum: [{required: true, validator: checkPhone, trigger: "blur"}],
visitTime: [
{required: true, message: "请选择时间", trigger: "change"},
],
content: [
{required: true, message: "请输入来访信息", trigger: "change"},
],
},
};
},
created() {
this.load();
this.loading = true;
setTimeout(() => {
//设置延迟执行
this.loading = false;
}, 1000);
},
methods: {
async load() {
request.get("/visitor/find", {
params: {
pageNum: this.currentPage,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
reset() {
this.search = ''
request.get("/visitor/find", {
params: {
pageNum: 1,
pageSize: this.pageSize,
search: this.search,
},
}).then((res) => {
console.log(res);
this.tableData = res.data.records;
this.total = res.data.total;
this.loading = false;
});
},
filterTag(value, row) {
return row.gender === value;
},
showDetail(row) {
this.detailDialog = true;
this.$nextTick(() => {
this.detail = row;
});
},
closeDetailDialog() {
this.detailDialog = false;
},
add() {
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
this.disabled = false;
this.form = {};
this.judge = false;
});
},
save() {
this.$refs.form.validate(async (valid) => {
if (valid) {
if (this.judge === false) {
//新增
await request.post("/visitor/add", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "新增成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
} else {
//修改
await request.put("/visitor/update", this.form).then((res) => {
console.log(res);
if (res.code === "0") {
ElMessage({
message: "修改成功",
type: "success",
});
this.search = "";
this.load();
this.dialogVisible = false;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
}
}
});
},
cancel() {
this.$refs.form.resetFields();
this.dialogVisible = false;
},
handleEdit(row) {
//修改
this.judge = true;
this.dialogVisible = true;
this.$nextTick(() => {
this.$refs.form.resetFields();
// 生拷贝
this.form = JSON.parse(JSON.stringify(row));
this.disabled = true;
});
},
async handleDelete(id) {
console.log(id);
request.delete("/visitor/delete/" + id).then((res) => {
if (res.code === "0") {
ElMessage({
message: "删除成功",
type: "success",
});
this.search = "";
this.load();
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
handleSizeChange(pageSize) {
//改变每页个数
this.pageSize = pageSize;
this.load();
},
handleCurrentChange(pageNum) {
//改变页码
this.currentPage = pageNum;
this.load();
},
},
};

BIN
src/assets/login_bg_phone.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
src/assets/login_two.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 180 KiB

BIN
src/assets/logo.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.1 KiB

BIN
src/assets/sleep.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 196 KiB

BIN
src/assets/wake.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 195 KiB

161
src/components/Aside.vue
Unescape View File

@ -0,0 +1,161 @@
<template>
<el-menu
:default-active="this.path"
router
style="width: 200px; height:100%; min-height: calc(100vh - 40px)"
unique-opened
>
<div style="display: flex;align-items: center;justify-content: center;padding: 11px 0;">
<img alt="" src="@/assets/logo.png" style="width: 60px;">
</div>
<el-menu-item index="/home">
<el-icon>
<house/>
</el-icon>
<span>首页</span>
</el-menu-item>
<el-sub-menu v-if="this.judgeIdentity()!==0" index="2">
<template #title>
<el-icon>
<user/>
</el-icon>
<span>用户管理</span>
</template>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/stuInfo">学生信息</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()===2" index="/dormManagerInfo">宿管信息</el-menu-item>
</el-sub-menu>
<el-sub-menu v-if="this.judgeIdentity()!==0" index="3">
<template #title>
<el-icon>
<coin/>
</el-icon>
<span>宿舍管理</span>
</template>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/buildingInfo">楼宇信息</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/roomInfo">房间信息</el-menu-item>
</el-sub-menu>
<el-sub-menu v-if="this.judgeIdentity()!==0" index="4">
<template #title>
<el-icon>
<message/>
</el-icon>
<span>信息管理</span>
</template>
<el-menu-item v-if="this.judgeIdentity()===2" index="/noticeInfo">公告信息</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/repairInfo">报修信息</el-menu-item>
</el-sub-menu>
<el-sub-menu v-if="this.judgeIdentity()!==0" index="5">
<template #title>
<el-icon>
<pie-chart/>
</el-icon>
<span>申请管理</span>
</template>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/adjustRoomInfo">调宿申请</el-menu-item>
</el-sub-menu>
<el-menu-item v-if="this.judgeIdentity()!==0" index="/visitorInfo">
<svg class="icon" data-v-042ca774="" style="height: 18px; margin-right: 11px;"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg">
<path
d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 110 448 224 224 0 010-448zm0 64a160.192 160.192 0 00-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"
fill="currentColor"></path>
</svg>
<span>访客管理</span>
</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()===0" index="/myRoomInfo">
<el-icon>
<school/>
</el-icon>
<span>我的宿舍</span>
</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()===0" index="/applyChangeRoom">
<el-icon>
<takeaway-box/>
</el-icon>
<span>申请调宿</span>
</el-menu-item>
<el-menu-item v-if="this.judgeIdentity()===0" index="/applyRepairInfo">
<el-icon>
<set-up/>
</el-icon>
<span>报修申请</span>
</el-menu-item>
<el-menu-item index="/selfInfo">
<el-icon>
<setting/>
</el-icon>
<span>个人信息</span>
</el-menu-item>
</el-menu>
</template>
<script>
import request from "@/utils/request";
import {ElMessage} from "element-plus";
export default {
name: "Aside",
data() {
return {
user: {},
identity: '',
path: this.$route.path
}
},
created() {
this.init()
},
methods: {
init() {
request.get("/main/loadIdentity").then((res) => {
if (res.code !== "0") {
ElMessage({
message: '用户会话过期',
type: 'error',
});
sessionStorage.clear()
request.get("/main/signOut");
}
window.sessionStorage.setItem("identity", JSON.stringify(res.data));
this.identity = res.data
});
request.get("/main/loadUserInfo").then((result) => {
if (result.code !== "0") {
ElMessage({
message: '用户会话过期',
type: 'error',
});
request.get("/main/signOut");
sessionStorage.clear()
this.$router.replace({path: "/login"});
}
window.sessionStorage.setItem("user", JSON.stringify(result.data));
this.user = result.data
});
},
judgeIdentity() {
if (this.identity === 'stu') {
return 0
} else if (this.identity === 'dormManager') {
return 1
} else
return 2
}
},
}
</script>
<style scoped>
.icon {
margin-right: 6px;
}
.el-sub-menu .el-menu-item {
height: 50px;
line-height: 50px;
padding: 0 45px;
min-width: 199px;
}
</style>

563
src/components/Calendar.vue
Unescape View File

@ -0,0 +1,563 @@
<template>
<div class="calendar">
<section class="header">
{{ selectData.year }}年{{ selectData.month }}月{{ selectData.day }}日
</section>
<ul class="week-area">
<li v-for="(item, index) in weekArr" :key="index" class="week-item">
<span class="week-font calendar-item">{{ item }}</span>
</li>
</ul>
<section
ref="calendar"
:style="{
height: isWeekView
? `${itemHeight + touchAreaHeight}px`
: `${lineNum * itemHeight + touchAreaHeight}px`,
transitionDuration: `${needHeightAnimation ? transitionDuration : 0}s`,
}"
class="data-container"
@touchend="touchEnd"
@touchstart="touchStart"
@touchmove.stop.prevent="touchMove"
>
<section
:style="{
transform: `translateX(${-(translateIndex + 1) * 100}%)`,
transitionDuration: `${needAnimation ? transitionDuration : 0}s`,
}"
class="month-area"
>
<div
:style="{
transform: `translateY(${offsetY}px)`,
transitionDuration: `${
needHeightAnimation ? transitionDuration : 0
}s`,
}"
class="banner-area"
>
<ul
v-for="(monthItem, monthIndex) in allDataArr"
:key="monthIndex"
:style="{
transform: `translateX(${
(translateIndex + isTouching ? touch.x : 0) * 100
}%)`,
transitionDuration: `${isTouching ? 0 : transitionDuration}s`,
}"
class="data-area"
>
<li
v-for="(item, index) in monthItem"
:key="index"
:class="[
'data-item',
{ selected: item.isSelected },
{ 'other-item': item.type !== 'normal' && !isWeekView },
]"
:style="`height: ${itemHeight}px`"
@click="checkoutDate(item)"
>
<span class="data-font calendar-item">{{ item.day }}</span>
</li>
</ul>
</div>
</section>
</section>
</div>
</template>
<script>
export default {
name: "calender",
data() {
return {
weekArr: ["日", "一", "二", "三", "四", "五", "六"], // 星期数组
dataArr: [], // 当前可视区域数据
allDataArr: [], // 轮播数组
selectData: {}, // 选中日期信息 -> year, month, day
isSelectedCurrentDate: false, // 是否点选当前月份信息 (配合月视图减少点击切换时的数组更新)
translateIndex: 0, // 轮播所在位置
transitionDuration: 0.3, // 动画持续时间
needAnimation: true, // 左右滑动是否需要动画
isTouching: false, // 是否为touch状态
touchStartPositionX: null, // 初始滑动 X的值
touchStartPositionY: null, // 初始滑动 Y的值
touch: {
// 本次touch事件，横向，纵向滑动的距离
x: 0,
y: 0,
},
isWeekView: false, // 周视图还是月视图
itemHeight: 50, // 子元素行高
needHeightAnimation: false, // 高度变化是否需要动画
offsetY: 0, // 周视图 Y轴偏移量
lineNum: 0, // 当前视图总行数
lastWeek: [], // 周视图 前一周数据
nextWeek: [], // 周视图 后一周数据
isDelay: true, // 是否延迟 (动画结束在处理数据)
touchAreaHeight: 40, // 底部区域高度
touchAreaPadding: 10, // 底部区域padding
isClicked: false, // 点选元素 (去除周视图切换月份时的动画延迟)
};
},
created() {
this.checkoutCurrentDate();
},
watch: {
dataArr: {
handler(val) {
this.changeAllData(val);
},
deep: true,
},
isWeekView(val) {
if (!val) {
this.isSelectedCurrentDate = false;
this.changeAllData(this.dataArr);
}
},
},
methods: {
// 更新轮播数组
changeAllData(val) {
if (this.isSelectedCurrentDate && !this.isWeekView) return;
const preDate = this.getPreMonth();
const preDataArr = this.getMonthData(preDate, true);
const nextDate = this.getNextMonth();
const nextDataArr = this.getMonthData(nextDate, true);
if (this.isWeekView) {
const sliceStart = this.dealWeekViewSliceStart();
preDataArr.splice(sliceStart, 7, ...this.lastWeek);
nextDataArr.splice(sliceStart, 7, ...this.nextWeek);
}
const delayHandle = (isDelay) => {
this.allDataArr = [preDataArr, val, nextDataArr];
this.needAnimation = false;
this.translateIndex = 0;
if (isDelay) this.isDelay = false;
};
if (this.isDelay) {
delayHandle(this.isDelay);
return;
}
setTimeout(
() => {
delayHandle();
},
this.isClicked && this.isWeekView ? 0 : this.transitionDuration * 1000
);
},
// 获取当前日期
getCurrentDate() {
this.selectData = {
year: new Date().getFullYear(),
month: new Date().getMonth() + 1,
day: new Date().getDate(),
};
},
// 获取指定月份数据
getMonthData(date, unSelected = false) {
const {year, month, day} = date;
let dataArr = [];
let daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
daysInMonth[1] = 29;
}
const monthStartWeekDay = new Date(year, month - 1, 1).getDay();
const monthEndWeekDay = new Date(year, month, 1).getDay() || 7;
const preInfo = this.getPreMonth(date);
const nextInfo = this.getNextMonth();
for (let i = 0; i < monthStartWeekDay; i++) {
let preObj = {
type: "pre",
day: daysInMonth[preInfo.month - 1] - (monthStartWeekDay - i - 1),
month: preInfo.month,
year: preInfo.year,
};
dataArr.push(preObj);
}
for (let i = 0; i < daysInMonth[month - 1]; i++) {
let itemObj = {
type: "normal",
day: i + 1,
month,
year,
isSelected: day === i + 1 && !unSelected,
};
dataArr.push(itemObj);
}
for (let i = 0; i < 7 - monthEndWeekDay; i++) {
let nextObj = {
type: "next",
day: i + 1,
month: nextInfo.month,
year: nextInfo.year,
};
dataArr.push(nextObj);
}
return dataArr;
},
// 点选切换日期
checkoutDate(selectData) {
this.isSelectedCurrentDate = true;
this.isClicked = true;
if (this.isWeekView && selectData.type !== "normal") {
this.needAnimation = false;
this.needHeightAnimation = false;
}
if (selectData.type === "next") {
this.translateIndex += 1;
this.dealMonthData("NEXT_MONTH", selectData.day);
return;
}
if (selectData.type === "pre") {
this.translateIndex -= 1;
this.dealMonthData("PRE_MONTH", selectData.day);
return;
}
this.selectData.day = selectData.day;
const oldSelectIndex = this.dataArr.findIndex(
(item) => item.isSelected && item.type === "normal"
);
const newSelectIndex = this.dataArr.findIndex(
(item) => item.day === selectData.day && item.type === "normal"
);
if (this.dataArr[oldSelectIndex])
this.$set(this.dataArr[oldSelectIndex], "isSelected", false);
if (this.dataArr[newSelectIndex])
this.$set(this.dataArr[newSelectIndex], "isSelected", true);
},
// 获取前(后)一个月的年月日信息
getPreMonth(date, appointDay = 1) {
let {year, month} = date || this.selectData;
if (month === 1) {
year -= 1;
month = 12;
} else {
month -= 1;
}
return {year, month, day: appointDay};
},
getNextMonth(appointDay = 1) {
let {year, month} = this.selectData;
if (month === 12) {
year += 1;
month = 1;
} else {
month += 1;
}
return {year, month, day: appointDay};
},
// 切换上(下)一月
handlePreMonth() {
this.dealMonthData("PRE_MONTH");
},
handleNextMonth() {
this.dealMonthData("NEXT_MONTH");
},
// 处理月数据
dealMonthData(type, appointDay = 1) {
this.isSelectedCurrentDate = false;
switch (type) {
case "PRE_MONTH":
this.selectData = this.getPreMonth("", appointDay);
break;
case "NEXT_MONTH":
this.selectData = this.getNextMonth(appointDay);
break;
default:
break;
}
this.dataArr = this.getMonthData(this.selectData);
this.lineNum = Math.ceil(this.dataArr.length / 7);
},
// 今日
checkoutCurrentDate() {
this.isDelay = true;
this.getCurrentDate();
this.dealMonthData();
},
// touch事件
touchStart(event) {
this.isTouching = true;
this.needAnimation = true;
this.isClicked = false;
this.touchStartPositionX = event.touches[0].clientX;
this.touchStartPositionY = event.touches[0].clientY;
this.touch = {
x: 0,
};
},
touchMove(event) {
const moveX = event.touches[0].clientX - this.touchStartPositionX;
const moveY = event.touches[0].clientY - this.touchStartPositionY;
if (Math.abs(moveX) > Math.abs(moveY)) {
// 左右
this.needHeightAnimation = false;
this.touch = {
x: moveX / this.$refs.calendar.offsetWidth,
y: 0,
};
} else {
// 上下
this.needHeightAnimation = true;
this.touch = {
x: 0,
y: moveY / this.$refs.calendar.offsetHeight,
};
}
},
touchEnd() {
this.isTouching = false;
const {x, y} = this.touch;
// 月视图
if (Math.abs(x) > Math.abs(y) && Math.abs(x) > 0.3) {
if (x > 0) {
// 左
this.translateIndex -= 1;
this.isWeekView ? this.handlePreWeek() : this.handlePreMonth();
} else if (x < 0) {
// 右
this.translateIndex += 1;
this.isWeekView ? this.handleNextWeek() : this.handleNextMonth();
}
}
// 周视图
if (
Math.abs(y) > Math.abs(x) &&
Math.abs(y * this.$refs.calendar.offsetHeight) > 50
) {
if (y > 0) {
// 下
this.isWeekView = false;
this.offsetY = 0;
} else if (y < 0) {
// 上
this.isWeekView = true;
this.dealWeekViewData();
}
}
this.touch = {
x: 0,
y: 0,
};
},
// 周视图的位置信息
getInfoOfWeekView(selectedIndex, length) {
const indexOfLine = Math.ceil((selectedIndex + 1) / 7);
const totalLine = Math.ceil(length / 7);
const sliceStart = (indexOfLine - 1) * 7;
const sliceEnd = sliceStart + 7;
return {indexOfLine, totalLine, sliceStart, sliceEnd};
},
// 生成前(后)一周数据
dealWeekViewSliceStart() {
const selectedIndex = this.dataArr.findIndex((item) => item.isSelected);
const {indexOfLine, totalLine, sliceStart, sliceEnd} =
this.getInfoOfWeekView(selectedIndex, this.dataArr.length);
this.offsetY = -((indexOfLine - 1) * this.itemHeight);
// 前一周数据
if (indexOfLine === 1) {
const preInfo = this.getPreMonth();
const preDataArr = this.getMonthData(preInfo, true);
const preDay =
this.dataArr[0].day - 1 || preDataArr[preDataArr.length - 1].day;
const preIndex = preDataArr.findIndex(
(item) => item.day === preDay && item.type === "normal"
);
const {sliceStart: preSliceStart, sliceEnd: preSliceEnd} =
this.getInfoOfWeekView(preIndex, preDataArr.length);
this.lastWeek = preDataArr.slice(preSliceStart, preSliceEnd);
} else {
this.lastWeek = this.dataArr.slice(sliceStart - 7, sliceEnd - 7);
}
// 后一周数据
if (indexOfLine >= totalLine) {
const nextInfo = this.getNextMonth();
const nextDataArr = this.getMonthData(nextInfo, true);
const nextDay =
this.dataArr[this.dataArr.length - 1].type === "normal"
? 1
: this.dataArr[this.dataArr.length - 1].day + 1;
const nextIndex = nextDataArr.findIndex((item) => item.day === nextDay);
const {sliceStart: nextSliceStart, sliceEnd: nextSliceEnd} =
this.getInfoOfWeekView(nextIndex, nextDataArr.length);
this.nextWeek = nextDataArr.slice(nextSliceStart, nextSliceEnd);
} else {
this.nextWeek = this.dataArr.slice(sliceStart + 7, sliceEnd + 7);
}
return sliceStart;
},
// 切换上(下)一周
handlePreWeek() {
this.dealWeekData("PRE_WEEK");
},
handleNextWeek() {
this.dealWeekData("NEXT_WEEK");
},
// 处理周数据
dealWeekData(type) {
const {year, month, day} =
type === "PRE_WEEK"
? this.lastWeek.find((item) => item.type === "normal")
: this.nextWeek[0];
this.selectData = {year, month, day};
this.dataArr = this.getMonthData(this.selectData);
this.lineNum = Math.ceil(this.dataArr.length / 7);
this.offsetY -= this.itemHeight;
this.dealWeekViewData();
},
// 处理上(下)一周数据
dealWeekViewData() {
const sliceStart = this.dealWeekViewSliceStart();
this.allDataArr[0].splice(sliceStart, 7, ...this.lastWeek);
this.allDataArr[2].splice(sliceStart, 7, ...this.nextWeek);
},
},
};
</script>
<style>
.calendar {
overflow-x: hidden;
/*width: 385px;*/
/*height: 440px;*/
display: inline;
text-align: center;
}
.header {
padding: 0 5px;
font-size: 18px;
font-weight: 500;
color: #2b4450;
line-height: 44px;
margin: 0 calc((14.285% - 40px) / 2 + 6px);
}
.calendar-item {
display: block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
}
.selected .calendar-item {
background: #2b4450;
border-radius: 50%;
color: #fff;
}
.week-area {
width: 100%;
display: flex;
}
.week-item {
height: 45px;
flex: 0 0 14.285%;
display: flex;
align-items: center;
justify-content: center;
}
.week-font {
font-size: 15px;
color: #2b4450;
font-weight: 500;
}
.data-container {
overflow: hidden;
position: relative;
}
.banner-area {
width: 300%;
display: flex;
}
.data-area {
width: 100%;
height: 100%;
display: flex;
flex-flow: row wrap;
}
.data-item {
flex: 0 0 14.285%;
display: flex;
align-items: center;
justify-content: center;
}
.data-font {
color: #2b4450;
font-size: 18px;
font-weight: 400;
}
.other-item .data-font {
color: #ccc;
}
.touch-area {
width: 100%;
box-sizing: border-box;
background-color: #fff;
position: absolute;
left: 0;
bottom: 0;
}
.touch-container {
width: 100%;
box-sizing: border-box;
border-top: 0.5px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}
.touch-item {
width: 40px;
height: 5px;
background: #2b4450;
border-radius: 100px;
opacity: 0.6;
}
</style>

43
src/components/Clock.vue
Unescape View File

@ -0,0 +1,43 @@
<template>
<el-container>
<span>{{ dateFormat(date) }}</span>
</el-container>
</template>
<script>
//创建一个函数来增加月日时小于10在前面加0
const padaDate = function (value) {
return value < 10 ? '0' + value : value;
};
export default {
name: 'clock',
data() {
return {
// 当前时间
date: new Date()
}
},
// 挂载时间
mounted() {
//获取当前日期
let that = this;
this.timer = setInterval(function () {
that.date = new Date().toLocaleString();
});
},
methods: {
//当前日期格式化
dateFormat() {
const date = new Date();
const year = date.getFullYear();
const month = date.getMonth() + 1 < 10 ?
'0' + (date.getMonth() + 1) : date.getMonth() + 1;
const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours();
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
}
}
}
</script>

72
src/components/Header.vue
Unescape View File

@ -0,0 +1,72 @@
<template>
<div style="line-height: 50px;display: flex">
<div style="width: 200px;margin-left: 10px; font-weight: bold; color: dodgerblue">YueDorm悦舍</div>
<Clock style="font-size: 20px;position: absolute;left: 50%;overflow: hidden;"/>
<div style="flex: 1"></div>
<div class="right-info">
<el-dropdown>
<span class="el-dropdown-link">
<el-icon :size="18" style="float: left;margin-right: 7px;"><avatar/></el-icon>
个人中心
<el-icon class="el-icon--right"><arrow-down/></el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="selfInfoManage">个人信息</el-dropdown-item>
<el-dropdown-item @click="SignOut">退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
import request from "@/utils/request";
import Clock from "@/components/Clock";
const {ElMessage} = require("element-plus");
export default {
name: "Header",
components: {
Clock
},
data() {
return {
name: '',
}
},
created() {
},
methods: {
SignOut() {
sessionStorage.clear()
request.get("/main/signOut");
ElMessage({
message: '用户退出登录',
type: 'success',
});
this.$router.replace({path: '/login'});
},
selfInfoManage() {
this.$router.push("/selfInfo")
}
},
}
</script>
<style scoped>
.right-info {
width: 120px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 1.5%;
}
.right-info:hover {
cursor: pointer;
}
</style>

96
src/components/home_echarts.vue
Unescape View File

@ -0,0 +1,96 @@
<template>
<div id="echarts-dom" style="width: 650px;height: 500px"></div>
</template>
<script>
import * as echarts from 'echarts';
import request from "@/utils/request";
require("echarts/theme/macarons");
export default {
name: "home_echarts",
data() {
return {
option: {
barWidth: 35,
tooltip: {},
xAxis: {
data: []
},
yAxis: {
type: "value"
},
series: [
{
name: '人数',
type: 'bar',
data: []
},
],
grid: {
x: 40,
y: 40,
x2: 40,
y2: 40,
borderWidth: 10,
top: '10%',
bottom: '0%',
containLabel: true
}
},
myEcharts: '',
chartWidth: '',
chartHeight: '',
};
},
created() {
this.getBuildingNum()
},
mounted() {
this.createEcharts()
},
watch: {
//观察option的变化
option: {
handler(newVal, oldVal) {
if (this.myEcharts) {
if (newVal) {
this.myEcharts.setOption(newVal);
} else {
this.myEcharts.setOption(oldVal);
}
} else {
this.createEcharts();
}
},
deep: true //对象内部属性的监听，关键。
}
},
methods: {
createEcharts() {
const chartDmo = document.getElementById("echarts-dom");
this.myEcharts = echarts.init(chartDmo, null);
this.myEcharts.setOption(this.option, true);
},
getBuildingNum() {
//xAxis.data
request.get("/building/getBuildingName").then(res => {
if (res.code === '0') {
this.option.xAxis.data = res.data
//series.data
request.get("/room/getEachBuildingStuNum/" + res.data.length).then(result => {
if (result.code === '0') {
this.option.series[0].data = result.data
}
})
}
});
},
}
}
</script>
<style scoped>
</style>

37
src/components/weather.vue
Unescape View File

@ -0,0 +1,37 @@
<template>
<div id="he-plugin-standard"></div>
</template>
<script>
export default {
name: "weather",
created() {
//和风天气插件调用
window.WIDGET = {
"CONFIG": {
"layout": "1",
"width": "380",
"height": "150",
"background": "3",
"dataColor": "FFFFFF",
"borderRadius": "5",
"key": "d9bc14a738454ed08a67ab8e21daaf79"
}
};
(function (d) {
var c = d.createElement('link')
c.rel = 'stylesheet'
c.href = 'https://widget.heweather.net/standard/static/css/he-standard.css?v=1.4.0'
var s = d.createElement('script')
s.src = 'https://widget.heweather.net/standard/static/js/he-standard.js?v=1.4.0'
var sn = d.getElementsByTagName('script')[0]
sn.parentNode.insertBefore(c, sn)
sn.parentNode.insertBefore(s, sn)
})(document)
},
}
</script>
<style scoped>
</style>

37
src/layout/Layout.vue
Unescape View File

@ -0,0 +1,37 @@
<template>
<el-container>
<!-- 侧边功能栏-->
<el-aside width="200px">
<Aside/>
</el-aside>
<el-container>
<!-- 头部-->
<el-header style="height: 50px;border-bottom: 1px solid #ccc;">
<Header/>
</el-header>
<el-main style="padding: 0;">
<!-- 内容区域-->
<router-view/>
</el-main>
</el-container>
</el-container>
</template>
<script>
import Header from "@/components/Header";
import Aside from "@/components/Aside";
const {ElMessage} = require("element-plus");
export default {
name: "layout",
components: {
Header,
Aside,
},
}
</script>
<style scoped>
</style>

22
src/main.js
Unescape View File

@ -0,0 +1,22 @@
import {createApp} from 'vue'
import router from './router'
import store from './store'
import './assets/css/global.css'
import App from './App.vue'
// element-plus
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import * as ELIcons from '@element-plus/icons-vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const app = createApp(App)
.use(ElementPlus, {
locale: zhCn
})
for (let iconName in ELIcons) {
app.component(iconName, ELIcons[iconName])
}
app.use(router)
app.use(store)
app.mount('#app')

53
src/router/index.js
Unescape View File

@ -0,0 +1,53 @@
import Layout from '../layout/Layout.vue'
import {createRouter, createWebHistory} from "vue-router";
export const constantRoutes = [
{path: '/Login', name: 'Login', component: () => import("@/views/Login")},
{
path: '/Layout', name: 'Layout', component: Layout, children: [
//
{path: '/home', name: 'Home', component: () => import("@/views/Home")},
{path: '/stuInfo', name: 'StuInfo', component: () => import("@/views/StuInfo")},
{path: '/dormManagerInfo', name: 'DormManagerInfo', component: () => import("@/views/DormManagerInfo")},
{path: '/buildingInfo', name: 'BuildingInfo', component: () => import("@/views/BuildingInfo")},
{path: '/roomInfo', name: 'RoomInfo', component: () => import("@/views/RoomInfo")},
{path: '/noticeInfo', name: 'NoticeInfo', component: () => import("@/views/NoticeInfo")},
{path: '/adjustRoomInfo', name: 'AdjustRoomInfo', component: () => import("@/views/AdjustRoomInfo")},
{path: '/repairInfo', name: 'RepairInfo', component: () => import("@/views/RepairInfo")},
{path: '/visitorInfo', name: 'VisitorInfo', component: () => import("@/views/VisitorInfo")},
//
{path: '/myRoomInfo', name: 'MyRoomInfo', component: () => import("@/views/MyRoomInfo")},
{path: '/applyRepairInfo', name: 'ApplyRepairInfo', component: () => import("@/views/ApplyRepairInfo")},
{path: '/applyChangeRoom', name: 'ApplyChangeRoom', component: () => import("@/views/ApplyChangeRoom")},
{path: '/selfInfo', name: 'SelfInfo', component: () => import("@/views/SelfInfo")},
]
},
]
const router = createRouter({
routes: constantRoutes,
history: createWebHistory(process.env.BASE_URL)
})
//路由守卫
router.beforeEach((to, from, next) => {
//to 要访问的路径
//from 代表从哪个路径跳转而来
// next 是函数，表示放行
// next() 放行
// next('/*') 强制跳转
const user = window.sessionStorage.getItem('user')
if (to.path === '/Login') {
return next();
}
if (!user) {
return next('/Login')
}
if (to.path === '/' && user) {
return next('/home')
}
next()
})
export default router

15
src/store/index.js
Unescape View File

@ -0,0 +1,15 @@
import {createStore} from 'vuex'
export default createStore({
state: {
isLogin: false,
identity: ''
},
mutations: {
login(state) {
state.isLogin = true
}
},
actions: {},
modules: {}
})

50
src/utils/request.js
Unescape View File

@ -0,0 +1,50 @@
import axios from 'axios'
const request = axios.create({
baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！
timeout: 5000
})
let token = '';
// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
//添加一个请求拦截器
axios.interceptors.request.use(function (config) {
let user = JSON.parse(window.sessionStorage.getItem('access-user'));
if (user) {
token = user.token;
}
config.headers.common['token'] = token;
//console.dir(config);
return config;
}, function (error) {
// Do something with request error
console.info("error: ");
console.info(error);
return Promise.reject(error);
});
// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(
response => {
let res = response.data;
// 如果是返回的文件
if (response.config.responseType === 'blob') {
return res
}
// 兼容服务端返回的字符串数据
if (typeof res === 'string') {
res = res ? JSON.parse(res) : res
}
return res;
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
// 以request暴露出去
export default request

188
src/views/AdjustRoomInfo.vue
Unescape View File

@ -0,0 +1,188 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>申请管理</el-breadcrumb-item>
<el-breadcrumb-item>调宿申请</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入学号" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="学号" prop="username" sortable width="100px"/>
<el-table-column label="姓名" prop="name" width="100px"/>
<el-table-column label="当前房间号" prop="currentRoomId" sortable/>
<el-table-column label="当前床位号" prop="currentBedId" sortable/>
<el-table-column label="目标房间号" prop="towardsRoomId" sortable/>
<el-table-column label="目标床位号" prop="towardsBedId" sortable/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '未处理', value: '未处理' },
{ text: '通过', value: '通过' },
{ text: '驳回', value: '驳回' },
]"
filter-placement="bottom-end"
label="申请状态"
prop="state"
sortable
width="130px"
>
<template #default="scope">
<el-tag :type="scope.row.state === '通过' ? 'success' : (scope.row.state === '驳回' ? 'danger' : 'info')"
disable-transitions
>{{ scope.row.state }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="申请时间" prop="applyTime" sortable/>
<el-table-column label="处理时间" prop="finishTime" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="190px">
<template #default="scope">
<el-button v-if="scope.row.state==='通过' ||scope.row.state==='驳回'" icon="more-filled" type="default"
@click="showDetail(scope.row)"></el-button>
<el-button v-if="scope.row.state!=='通过' " icon="Edit" type="primary"
@click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div>
<!-- 弹窗-->
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="学号" prop="username">
<el-input v-model="form.username" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item disabled label="当前房间号" prop="currentRoomId">
<el-input v-model="form.currentRoomId" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="当前床位号" prop="currentBedId">
<el-input v-model="form.currentBedId" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="目标房间号" prop="towardsRoomId">
<el-input v-model="form.towardsRoomId" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="目标床位号" prop="towardsBedId">
<el-input v-model="form.towardsBedId" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="申请时间" prop="applyTime" style="margin-top: 27px">
<el-date-picker
v-model="form.applyTime"
clearable
disabled
placeholder="选择时间"
style="width: 50%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item label="申请状态" prop="state">
<el-radio v-model="form.state" label="通过">通过</el-radio>
<el-radio v-if="this.form.state!=='通过'" v-model="form.state" label="驳回">驳回</el-radio>
</el-form-item>
<el-form-item label="处理时间" prop="finishTime" style="margin-top: 27px">
<el-date-picker
v-model="form.finishTime"
clearable
placeholder="选择时间"
style="width: 50%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!--详情信息弹窗-->
<el-dialog v-model="detailDialog" title="学生信息" width="30%" @close="cancel">
<el-form ref="form" :model="form" label-width="220px">
<el-form-item label="学号：" prop="username">
<template #default="scope">
<span>{{ form.username }}</span>
</template>
</el-form-item>
<el-form-item label="姓名：" prop="name">
<template #default="scope">
<span>{{ form.name }}</span>
</template>
</el-form-item>
<el-form-item label="当前房间号：" prop="currentRoomId">
<template #default="scope">
<span>{{ form.currentRoomId }}</span>
</template>
</el-form-item>
<el-form-item label="当前床位号：" prop="currentBedId">
<template #default="scope">
<span>{{ form.currentBedId }}</span>
</template>
</el-form-item>
<el-form-item label="目标房间号：" prop="towardsRoomId">
<template #default="scope">
<span>{{ form.towardsRoomId }}</span>
</template>
</el-form-item>
<el-form-item label="目标床位号：" prop="towardsBedId">
<template #default="scope">
<span>{{ form.towardsBedId }}</span>
</template>
</el-form-item>
<el-form-item label="申请时间：" prop="applyTime">
<template #default="scope">
<span>{{ form.applyTime }}</span>
</template>
</el-form-item>
<el-form-item label="申请状态：" prop="state">
<template #default="scope">
<span>{{ form.state }}</span>
</template>
</el-form-item>
<el-form-item label="处理时间：" prop="finishTime">
<template #default="scope">
<span>{{ form.finishTime }}</span>
</template>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/AdjustRoomInfo.js"></script>

172
src/views/ApplyChangeRoom.vue
Unescape View File

@ -0,0 +1,172 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>申请管理</el-breadcrumb-item>
<el-breadcrumb-item>调宿申请</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入学号" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="学号" prop="username" sortable width="100px"/>
<el-table-column label="姓名" prop="name" width="100px"/>
<el-table-column label="当前房间号" prop="currentRoomId" sortable/>
<el-table-column label="当前床位号" prop="currentBedId" sortable/>
<el-table-column label="目标房间号" prop="towardsRoomId" sortable/>
<el-table-column label="目标床位号" prop="towardsBedId" sortable/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '未处理', value: '未处理' },
{ text: '通过', value: '通过' },
{ text: '驳回', value: '驳回' },
]"
filter-placement="bottom-end"
label="申请状态"
prop="state"
sortable
width="130px"
>
<template #default="scope">
<el-tag :type="scope.row.state === '通过' ? 'success' : (scope.row.state === '驳回' ? 'danger' : 'info')"
disable-transitions
>{{ scope.row.state }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="申请时间" prop="applyTime" sortable/>
<el-table-column label="处理时间" prop="finishTime" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="more-filled" type="default" @click="showDetail(scope.row)"></el-button>
<el-button v-if="scope.row.state!=='通过' " icon="Edit" type="primary"
@click="handleEdit(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div>
<!-- 弹窗-->
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="学号" prop="username">
<el-input v-model="form.username" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item disabled label="当前房间号" prop="currentRoomId">
<el-input v-model="form.currentRoomId" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="当前床位号" prop="currentBedId">
<el-input v-model="form.currentBedId" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="目标房间号" prop="towardsRoomId">
<el-input v-model.number="form.towardsRoomId" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="目标床位号" prop="towardsBedId">
<el-input v-model.number="form.towardsBedId" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="申请时间" prop="applyTime" style="margin-top: 27px">
<el-date-picker
v-model="form.applyTime"
:disabled="!judgeOption"
clearable
placeholder="选择时间"
style="width: 50%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!--详情信息弹窗-->
<el-dialog v-model="detailDialog" title="学生信息" width="30%" @close="cancel">
<el-form ref="form" :model="form" label-width="220px">
<el-form-item label="学号：" prop="username">
<template #default="scope">
<span>{{ form.username }}</span>
</template>
</el-form-item>
<el-form-item label="姓名：" prop="name">
<template #default="scope">
<span>{{ form.name }}</span>
</template>
</el-form-item>
<el-form-item label="当前房间号：" prop="currentRoomId">
<template #default="scope">
<span>{{ form.currentRoomId }}</span>
</template>
</el-form-item>
<el-form-item label="当前床位号：" prop="currentBedId">
<template #default="scope">
<span>{{ form.currentBedId }}</span>
</template>
</el-form-item>
<el-form-item label="目标房间号：" prop="towardsRoomId">
<template #default="scope">
<span>{{ form.towardsRoomId }}</span>
</template>
</el-form-item>
<el-form-item label="目标床位号：" prop="towardsBedId">
<template #default="scope">
<span>{{ form.towardsBedId }}</span>
</template>
</el-form-item>
<el-form-item label="申请时间：" prop="applyTime">
<template #default="scope">
<span>{{ form.applyTime }}</span>
</template>
</el-form-item>
<el-form-item label="申请状态：" prop="state">
<template #default="scope">
<span>{{ form.state }}</span>
</template>
</el-form-item>
<el-form-item label="处理时间：" prop="finishTime">
<template #default="scope">
<span>{{ form.finishTime }}</span>
</template>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/ApplyChangeRoom.js"></script>

128
src/views/ApplyRepairInfo.vue
Unescape View File

@ -0,0 +1,128 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>申请报修</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入标题" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column :show-overflow-tooltip="true" label="标题" prop="title"/>
<el-table-column label="宿舍号" prop="dormBuildId" sortable width="150px"/>
<el-table-column label="房间号" prop="dormRoomId" sortable width="150px"/>
<el-table-column label="申请人" prop="repairer" width="150px"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '完成', value: '完成' },
{ text: '未完成', value: '未完成' },
]"
filter-placement="bottom-end"
label="订单状态"
prop="state"
sortable
>
<template #default="scope">
<el-tag :type="scope.row.state === '完成' ? 'success' : 'info'" disable-transitions
>{{ scope.row.state }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="订单创建时间" prop="orderBuildTime" sortable/>
<el-table-column label="订单完成时间" prop="orderFinishTime" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="74px">
<template #default="scope">
<el-button icon="more-filled" type="default" @click="showDetail(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="楼宇号" prop="dormBuildId" style="margin-bottom: 27px">
<el-input v-model="form.dormBuildId" disabled style="width: 80%">{{ this.room.dormBuildId }}</el-input>
</el-form-item>
<el-form-item label="房间号" prop="dormRoomId" style="margin-bottom: 27px">
<el-input v-model="form.dormRoomId" disabled style="width: 80%">{{ this.room.dormRoomId }}</el-input>
</el-form-item>
<el-form-item label="申请人" prop="repairer">
<el-input v-model="form.repairer" disabled style="width: 80%">{{ this.name }}</el-input>
</el-form-item>
<el-form-item label="标题" prop="title" style="margin-bottom: 27px">
<el-input v-model="form.title" clearable style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input
v-model="form.content"
:autosize="{ minRows: 3, maxRows: 10 }"
autosize
clearable
style="width: 80%"
type="textarea"
></el-input>
</el-form-item>
<el-form-item label="订单创建时间" prop="orderBuildTime" style="margin-top: 27px">
<el-date-picker
v-model="form.orderBuildTime"
clearable
placeholder="选择时间"
style="width: 50%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 内容详情弹窗-->
<el-dialog v-model="detailDialog" title="详情" width="30%">
<el-card>
<div v-html="detail.content"></div>
</el-card>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="closeDetails">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/ApplyRepairInfo.js"></script>

98
src/views/BuildingInfo.vue
Unescape View File

@ -0,0 +1,98 @@
<template>
<div>
<el-breadcrumb replace="true" separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: 'home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
<el-breadcrumb-item>楼宇信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入编号" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" show-overflow-tooltip
style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="编号" prop="dormBuildId" sortable/>
<el-table-column label="名称" prop="dormBuildName"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '男宿舍', value: '男宿舍' },
{ text: '女宿舍', value: '女宿舍' },
]"
filter-placement="bottom-end"
label="备注"
prop="dormBuildDetail"
/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"
></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="编号" prop="dormBuildId">
<el-input v-model.number="form.dormBuildId" :disabled="disabled" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="名称" prop="dormBuildName">
<el-input v-model="form.dormBuildName" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="备注" prop="dormBuildDetail">
<el-input
v-model="form.dormBuildDetail"
:autosize="{ minRows: 2, maxRows: 4 }"
autosize
style="width: 80%"
type="textarea"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/BuildingInfo.js"></script>

120
src/views/DormManagerInfo.vue
Unescape View File

@ -0,0 +1,120 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>宿管信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入姓名" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="账号" prop="username" sortable/>
<el-table-column label="姓名" prop="name"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '男', value: '男' },
{ text: '女', value: '女' },
]"
filter-placement="bottom-end"
label="性别"
prop="gender"
/>
<el-table-column label="年龄" prop="age" sortable/>
<el-table-column label="手机号" prop="phoneNum"/>
<el-table-column label="邮箱" prop="email"/>
<el-table-column label="任职宿舍楼" prop="dormBuildId" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.username)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div>
<!-- 弹窗-->
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="账号" prop="username">
<el-input v-model="form.username" :disabled="judgeAddOrEdit" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" :disabled="disabled" :show-password="showpassword"
style="width: 80%"></el-input>
<el-tooltip content="修改密码" placement="right">
<el-icon :style="editDisplay" size="large" style="margin-left: 5px; cursor: pointer"
@click="EditPass">
<edit/>
</el-icon>
</el-tooltip>
</el-form-item>
<el-form-item :style="display" label="确认密码" prop="checkPass">
<el-input v-model="form.checkPass" :show-password="showpassword" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio v-model="form.gender" label="男">男</el-radio>
<el-radio v-model="form.gender" label="女">女</el-radio>
</el-form-item>
<el-form-item label="手机号" prop="phoneNum">
<el-input v-model.number="form.phoneNum" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="邮箱地址" prop="email">
<el-input v-model="form.email" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="任职宿舍楼" prop="dormBuildId">
<el-input v-model="form.dormBuildId" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/DormManagerInfo.js"></script>

202
src/views/Home.vue
Unescape View File

@ -0,0 +1,202 @@
<template>
<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
<!-- 头部数据-->
<div>
<el-row :gutter="20" class="topInfo">
<el-col :span="6">
<div id="stuNumDiv" class="el-colDiv">
<div id="ssv1-main-text" class="nowDiv">实时</div>
<span class="title">学生统计</span><br/>
<span class="digital">{{ this.studentNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="haveRoomDiv" class="el-colDiv">
<div id="ssv2-main-text" class="nowDiv">实时</div>
<span class="title">住宿人数</span><br/>
<span class="digital">{{ this.haveRoomStudentNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="repairNum" class="el-colDiv">
<div id="ssv3-main-text" class="nowDiv">实时</div>
<span class="title">报修统计</span><br/>
<span class="digital">{{ this.repairOrderNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="emptyRoom" class="el-colDiv">
<div id="ssv4-main-text" class="nowDiv">实时</div>
<span class="title">空宿舍统计</span><br/>
<span class="digital">{{ this.noFullRoomNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
</el-row>
</div>
<!-- 下部-->
<div class="left">
<!-- 左侧 宿舍通告-->
<div style="margin-right: 5%">
<span style="font-size: 22px;display: block;margin-bottom: 30px;margin-left: 10px;">宿舍通告</span>
<el-timeline>
<el-timeline-item v-for="(activity, index) in activities.slice(0, 8)" :key="index"
:timestamp="activity.releaseTime">
<span style="font-size: 15px">{{ activity.title }}</span><br/>
<span style="font-size: 10px">{{ activity.content }}</span>
</el-timeline-item>
</el-timeline>
</div>
<!-- 中部-->
<div style="height: 588px">
<span style="
font-size: 22px;
display: block;
margin-bottom: 30px;
margin-left: 10px;
">宿舍学生人数分布
</span>
<home_echarts/>
</div>
<!-- 右侧-->
<div style="margin-left: 5%">
<!-- 天气组件-->
<div class="weather">
<weather/>
</div>
<!-- 日历组件-->
<el-card style="width: 380px; max-height: 440px; margin-top: 17px">
<Calender/>
</el-card>
</div>
</div>
</el-card>
</template>
<script src="@/assets/js/Home.js"></script>
<style scoped>
.wv-lt-refresh {
display: none;
}
.topInfo {
margin: 0 auto;
}
.weather{
border: 2px #2e4057;
}
.left{
display: flex;
width: 100%
;margin-top: 40px;
align-items: center;
justify-content: center;
}
.el-colDiv {
margin: 20px auto;
max-width: 340px;
min-width: 200px;
overflow: hidden;
height: 115px;
border-radius: 5px;
background-color: black;
color: white;
padding-left: 15px;
padding-top: 15px;
position: relative;
}
.el-colDiv:hover {
background-position: right;
}
.nowDiv {
width: 38px;
height: 19px;
position: absolute;
right: 5%;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.digital {
font-size: 25px;
line-height: normal;
margin-left: 2px;
}
.title {
font-size: 18px;
}
.last-span {
font-size: 13px;
}
#stuNumDiv {
/*background-color: #2e4057;*/
background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
background-size: 200%;
transition: 0.6s;
}
#haveRoomDiv {
/*background-color: #1398ff;*/
background-image: linear-gradient(to left, #C4E538, #009432, #C4E538);
background-size: 200%;
transition: 0.6s;
}
#repairNum {
/*background-color: #008789;*/
background-image: linear-gradient(to left, #12CBC4, #0652DD, #12CBC4);
background-size: 200%;
transition: 0.6s;
}
#emptyRoom {
/*background-color: #ffb400;*/
background-image: linear-gradient(to left, #FDA7DF, #9980FA, #FDA7DF);
background-size: 200%;
transition: 0.6s;
}
#ssv1-main-text {
background-color: #1398ff;
}
#ssv2-main-text {
background-color: #2e4057;
}
#ssv3-main-text {
background-color: #ffb400;
}
#ssv4-main-text {
background-color: #008789;
}
</style>

313
src/views/Login.vue
Unescape View File

@ -0,0 +1,313 @@
<template>
<div class="login">
<!-- 最外层的大盒子 -->
<div class="box">
<!-- 滑动盒子 -->
<div class="pre-box">
<h1>YueDorm</h1>
<p style="font-size: 25px;">悦舍</p>
<div class="img-box">
<img src="../assets/sleep.png" alt="">
<img src="../assets/wake.png" alt="">
</div>
</div>
<!-- 注册盒子 -->
<div class="register-form">
<!-- 标题盒子 -->
<div class="title-box">
<h1>注册</h1>
</div>
<!-- 输入框盒子 -->
<div class="input-box">
<input type="text" v-model="form.username" placeholder="用户名">
<input type="password" v-model="form.password" placeholder="密码">
<input type="password" v-model="form.confirmPassword" placeholder="确认密码">
<el-form ref="form" :model="form" :rules="rules" size="large">
<el-form-item :model="form" prop="identity">
<el-radio v-model="form.identity" label="stu" style="color: grey">学生</el-radio>
<el-radio v-model="form.identity" label="dormManager" style="color: grey">宿舍管理员</el-radio>
<el-radio v-model="form.identity" label="admin" style="color: grey">后勤管理中心</el-radio>
</el-form-item>
</el-form>
</div>
<!-- 按钮盒子 -->
<div class="btn-box">
<button @click="register()">注册</button>
<!-- 绑定点击事件 -->
<p @click="mySwitch()">已有账号?去登录</p>
</div>
</div>
<!-- 登录盒子 -->
<div class="login-form">
<!-- 标题盒子 -->
<div class="title-box">
<h1>登录</h1>
</div>
<!-- 输入框盒子 -->
<div class="input-box" >
<input type="text" v-model="form.username" placeholder="用户名">
<input type="password" v-model="form.password" placeholder="密码">
<el-form ref="form" :model="form" :rules="rules" size="large">
<el-form-item :model="form" prop="identity">
<el-radio v-model="form.identity" label="stu" style="color: grey">学生</el-radio>
<el-radio v-model="form.identity" label="dormManager" style="color: grey">宿舍管理员</el-radio>
<el-radio v-model="form.identity" label="admin" style="color: grey">后勤管理中心</el-radio>
</el-form-item>
</el-form>
</div>
<!-- 按钮盒子 -->
<div class="btn-box">
<button @click="login">登录</button>
<!-- 绑定点击事件 -->
<p @click="mySwitch()">没有账号?去注册</p>
</div>
</div>
</div>
</div>
</template>
<script src="@/assets/js/Login.js"></script>
<style scoped>
/* 去除input的轮廓 */
input,.elSelect {
outline: none;
}
.login {
height: 100vh;
/* 溢出隐藏 */
overflow-x: hidden;
display: flex;
/* 渐变方向从左到右 */
background: linear-gradient(to right, rgb(247, 209, 215), rgb(191, 227, 241));
}
span {
background-color: #1a1919;
position: absolute;
z-index: 0;
bottom: 0;
border-radius: 50%;
/* 径向渐变 */
background: radial-gradient(circle at 72% 28%, #fff 3px, #ff7edf 8%, #5b5b5b, #aad7f9 100%);
/* 泡泡内阴影 */
box-shadow: inset 0 0 6px #fff,
inset 3px 0 6px #eaf5fc,
inset 2px -2px 10px #efcde6,
inset 0 0 60px #f9f6de,
0 0 20px #fff;
/* 动画 */
animation: myMove 4s linear infinite;
}
@keyframes myMove {
0% {
transform: translateY(0%);
opacity: 1;
}
50% {
transform: translate(10%, -1000%);
}
75% {
transform: translate(-20%, -1200%);
}
99% {
opacity: .9;
}
100% {
transform: translateY(-1800%) scale(1.5);
opacity: 0;
}
}
/* 最外层的大盒子 */
.box {
width: 1050px;
height: 600px;
display: flex;
/* 相对定位 */
position: relative;
z-index: 2;
margin: auto;
/* 设置圆角 */
border-radius: 8px;
/* 设置边框 */
border: 1px solid rgba(255, 255, 255, .6);
/* 设置盒子阴影 */
box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
}
/* 滑动的盒子 */
.pre-box {
/* 宽度为大盒子的一半 */
width: 50%;
/* width: var(--width); */
height: 100%;
/* 绝对定位 */
position: absolute;
/* 距离大盒子左侧为0 */
left: 0;
/* 距离大盒子顶部为0 */
top: 0;
z-index: 99;
border-radius: 4px;
background-color: #edd4dc;
box-shadow: 2px 1px 19px rgba(0, 0, 0, .1);
/* 动画过渡，先加速再减速 */
transition: 0.5s ease-in-out;
}
/* 滑动盒子的标题 */
.pre-box h1 {
margin-top: 150px;
text-align: center;
/* 文字间距 */
letter-spacing: 5px;
color: white;
/* 禁止选中 */
user-select: none;
/* 文字阴影 */
text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}
/* 滑动盒子的文字 */
.pre-box p {
height: 30px;
line-height: 30px;
text-align: center;
margin: 20px 0;
/* 禁止选中 */
user-select: none;
font-weight: bold;
color: white;
text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}
/* 图片盒子 */
.img-box {
width: 200px;
height: 200px;
margin: 20px auto;
/* 设置为圆形 */
border-radius: 50%;
/* 设置用户禁止选中 */
user-select: none;
overflow: hidden;
box-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}
/* 图片 */
.img-box img {
width: 100%;
transition: 0.5s;
}
/* 登录和注册盒子 */
.login-form,
.register-form {
flex: 1;
height: 100%;
}
/* 标题盒子 */
.title-box {
height: 280px;
line-height: 500px;
}
/* 标题 */
.title-box h1 {
text-align: center;
color: white;
/* 禁止选中 */
user-select: none;
letter-spacing: 5px;
text-shadow: 4px 4px 3px rgba(0, 0, 0, .1);
}
/* 输入框盒子 */
.input-box,.elSelect {
display: flex;
/* 纵向布局 */
flex-direction: column;
/* 水平居中 */
align-items: center;
}
/* 输入框 */
input {
width: 60%;
height: 40px;
margin-bottom: 20px;
text-indent: 10px;
border: 1px solid #fff;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 120px;
/* 增加磨砂质感 */
backdrop-filter: blur(10px);
}
input:focus {
/* 光标颜色 */
color: #b0cfe9;
}
/* 聚焦时隐藏文字 */
input:focus::placeholder {
opacity: 0;
}
/* 按钮盒子 */
.btn-box {
display: flex;
justify-content: center;
}
/* 按钮 */
button {
width: 100px;
height: 30px;
margin: 0 7px;
line-height: 30px;
border: none;
border-radius: 4px;
background-color: #69b3f0;
color: white;
}
/* 按钮悬停时 */
button:hover {
/* 鼠标小手 */
cursor: pointer;
/* 透明度 */
opacity: .8;
}
/* 按钮文字 */
.btn-box p {
height: 30px;
line-height: 30px;
/* 禁止选中 */
user-select: none;
font-size: 14px;
color: white;
}
.btn-box p:hover {
cursor: pointer;
border-bottom: 1px solid white;
}
</style>

245
src/views/Login2.vue
Unescape View File

@ -0,0 +1,245 @@
<script setup>
</script>
<!--login.vue-->
<template>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="content">
<div class="login-wrapper">
<h1>登录</h1>
<div class="login-form">
<div class="username form-item">
<span>使用邮箱或者手机号</span>
<input type="text" class="input-item">
</div>
<div class="password form-item">
<span>密码</span>
<input type="password" class="input-item">
</div>
<button class="login-btn">登 录</button>
</div>
<div class="divider">
<span class="line"></span>
<span class="divider-text">其他方式登录</span>
<span class="line"></span>
</div>
<div class="other-login-wrapper">
<div class="other-login-item">
<img src="./asset/QQ.png" alt="">
</div>
<div class="other-login-item">
<img src="./asset/WeChat.png" alt="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>
</template>
<style >
@charset "UTF-8";
* {
margin: 0;
padding: 0;
}
/*公共CSS*/
.box {
width: 100vw;
height: 100vh;
background-color: rgb(29, 67, 89);
}
.box .content .login-wrapper h1 {
text-align: center;
}
.box .content .login-wrapper .login-form .form-item {
margin: 20px 0;
}
.box .content .login-wrapper .login-form .form-item span {
display: block;
margin: 5px 20px;
font-weight: 100;
}
.box .content .login-wrapper .login-form .form-item .input-item {
width: 100%;
border-radius: 40px;
padding: 20px;
box-sizing: border-box;
font-size: 20px;
font-weight: 200;
}
.box .content .login-wrapper .login-form .form-item .input-item:focus {
outline: none;
}
.box .content .login-wrapper .login-form .login-btn {
width: 100%;
border-radius: 40px;
color: #fff;
border: 0;
font-weight: 100;
margin-top: 10px;
cursor: pointer;
}
.box .content .login-wrapper .divider {
width: 100%;
margin: 20px 0;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.box .content .login-wrapper .divider span:nth-child(1) {
flex: 1;
}
.box .content .login-wrapper .divider span:nth-child(3) {
flex: 1;
}
.box .content .login-wrapper .divider .line {
display: inline-block;
max-width: 30%;
width: 30%;
}
.box .content .login-wrapper .divider .divider-text {
vertical-align: middle;
margin: 0px 20px;
line-height: 0px;
display: inline-block;
width: 100px;
}
.box .content .login-wrapper .other-login-wrapper {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.box .content .login-wrapper .other-login-item {
border: 1px solid rgb(214, 222, 228);
padding: 10px;
margin: 10px;
cursor: pointer;
}
/*一般大于手机的尺寸CSS*/
@media (min-width: 767px) {
.box {
background-color: rgb(29, 67, 89);
}
.box .content {
width: 85vw;
height: 90vh;
background: url("./assets/login_two.jpg") no-repeat;
background-size: 90% 100%;
position: absolute;
right: 15%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 20px;
background-color: #fff;
}
.box .content .login-wrapper {
width: 25vw;
position: absolute;
right: 15%;
top: 50%;
transform: translateY(-50%);
}
.box .content .login-wrapper h1 {
text-align: center;
font-size: 45px;
color: rgb(81, 100, 115);
margin-bottom: 40px;
}
.box .content .login-wrapper .login-form {
margin: 10px 0;
}
.box .content .login-wrapper .login-form .form-item span {
color: rgb(81, 100, 115);
}
.box .content .login-wrapper .login-form .form-item .input-item {
height: 60px;
border: 1px solid rgb(214, 222, 228);
}
.box .content .login-wrapper .login-form .login-btn {
height: 50px;
background-color: rgb(59, 72, 89);
font-size: 20px;
}
.box .content .login-wrapper .divider .line {
border-bottom: 1px solid rgb(214, 222, 228);
}
.box .content .login-wrapper .other-login-item {
border-radius: 20px;
}
.box .content .login-wrapper .other-login-item img {
width: 40px;
height: 40px;
}
}
/*手机端CSS*/
@media (max-width: 768px) {
.box .content {
width: 100vw;
height: 100vh;
background: url(".vue/src/assets/login_bg_phone.png") no-repeat;
background-size: 100% 100%;
display: flex;
align-items: flex-start;
justify-content: center;
}
.box .content .login-wrapper {
width: 70%;
height: 60%;
padding-top: 15%;
}
.box .content .login-wrapper h1 {
font-size: 30px;
color: #fff;
}
.box .content .login-wrapper .login-form .form-item {
margin: 10px 0;
}
.box .content .login-wrapper .login-form .form-item span {
color: rgb(113, 129, 141);
}
.box .content .login-wrapper .login-form .form-item .input-item {
height: 30px;
border: 1px solid rgb(113, 129, 141);
background-color: transparent;
color: #fff;
}
.box .content .login-wrapper .login-form .login-btn {
height: 40px;
background-color: rgb(235, 95, 93);
font-size: 16px;
}
.box .content .login-wrapper .divider .line {
border-bottom: 1px solid #fff;
}
.box .content .login-wrapper .divider .divider-text {
color: #fff;
}
.box .content .login-wrapper .other-login-item {
border-radius: 15px;
}
.box .content .login-wrapper .other-login-item img {
width: 35px;
height: 35px;
}
}/*# sourceMappingURL=style.css.map */
</style>

148
src/views/MyRoomInfo.vue
Unescape View File

@ -0,0 +1,148 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>我的宿舍</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div style="display: flex">
<div style="margin-top: 55px">
<div style="margin-left: 50px;margin-top: 20px">
<!-- 房间信息-->
<el-descriptions :column="1" border style="width: 500px" title="房间信息">
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<user/>
</el-icon>
楼宇号
</div>
</template>
<span class="rightSpan">{{ this.room.dormBuildId }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<location/>
</el-icon>
房间号
</div>
</template>
<span class="rightSpan">{{ this.room.dormRoomId }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<tickets/>
</el-icon>
楼层
</div>
</template>
<span class="rightSpan">{{ this.room.floorNum }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<office-building/>
</el-icon>
可住人数
</div>
</template>
<span class="rightSpan">{{ this.room.maxCapacity }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<iphone/>
</el-icon>
已住人数
</div>
</template>
<span class="rightSpan">{{ this.room.currentCapacity }}</span>
</el-descriptions-item>
</el-descriptions>
</div>
<!-- 床位信息-->
<div style="margin-left: 50px;margin-top: 40px">
<el-descriptions :column="1" border style="width: 500px" title="床位信息">
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<user/>
</el-icon>
一号床位
</div>
</template>
<el-tag
v-if="this.room.firstBed != null"
:type="this.name === this.room.firstBed ? 'primary':'info'"
disable-transitions
>{{ this.room.firstBed }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<location/>
</el-icon>
二号床位
</div>
</template>
<el-tag
v-if="this.room.secondBed != null"
:type="this.name === this.room.secondBed ? 'primary':'info'"
disable-transitions
>{{ this.room.secondBed }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<tickets/>
</el-icon>
三号床位
</div>
</template>
<el-tag
v-if="this.room.thirdBed != null"
:type="this.name === this.room.thirdBed ? 'primary':'info'"
disable-transitions
>{{ this.room.thirdBed }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<office-building/>
</el-icon>
四号床位
</div>
</template>
<el-tag
v-if="this.room.fourthBed != null"
:type="this.name === this.room.fourthBed ? 'primary':'info'"
disable-transitions
>{{ this.room.fourthBed }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
</div>
</div>
<div style="margin-left: 100px;margin-top: 85px">
<img alt="" src="../../public/myRoom.png" style="width: 600px">
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/MyRoomInfo.js"></script>
<style scoped>@import '../assets/css/MyRoomInfo.css';</style>

99
src/views/NoticeInfo.vue
Unescape View File

@ -0,0 +1,99 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>信息管理</el-breadcrumb-item>
<el-breadcrumb-item>公告信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入标题" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column :show-overflow-tooltip="true" label="标题" prop="title"/>
<el-table-column label="作者" prop="author" width="150px"/>
<el-table-column label="发布时间" prop="releaseTime" sortable width="400px"/>
<!-- 操作栏-->
<el-table-column label="操作" width="190px">
<template #default="scope">
<el-button icon="more-filled" type="default" @click="showDetail(scope.row)"></el-button>
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="50%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="标题" prop="title" style="margin-bottom: 27px">
<el-input v-model="form.title" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<div id="div1" style="width: 74%; margin: 4px 0"></div>
</el-form-item>
<el-form-item label="发布时间" prop="releaseTime" style="margin-top: 27px">
<el-date-picker
v-model="form.releaseTime"
clearable
placeholder="选择时间"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 公告详情-->
<el-dialog v-model="detailDialog" title="详情" width="50%">
<el-card>
<div v-html="detail.content"></div>
</el-card>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="closeDetailDialog">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/NoticeInfo.js"></script>

155
src/views/RepairInfo.vue
Unescape View File

@ -0,0 +1,155 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>信息管理</el-breadcrumb-item>
<el-breadcrumb-item>报修信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入标题" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"
></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column :show-overflow-tooltip="true" label="标题" prop="title"/>
<el-table-column label="宿舍号" prop="dormBuildId" sortable width="150px"/>
<el-table-column label="房间号" prop="dormRoomId" sortable width="150px"/>
<el-table-column label="申请人" prop="repairer" width="150px"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '完成', value: '完成' },
{ text: '未完成', value: '未完成' },
]"
filter-placement="bottom-end"
label="订单状态"
prop="state"
sortable
>
<template #default="scope">
<el-tag
:type="scope.row.state === '完成' ? 'success' : 'info'"
disable-transitions
>{{ scope.row.state }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="订单创建时间" prop="orderBuildTime" sortable/>
<el-table-column label="订单完成时间" prop="orderFinishTime" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="190px">
<template #default="scope">
<el-button icon="more-filled" type="default" @click="showDetail(scope.row)"></el-button>
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="标题" prop="title" style="margin-bottom: 27px">
<el-input v-model="form.title" clearable style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="楼宇号" prop="dormBuildId" style="margin-bottom: 27px">
<el-input v-model="form.dormBuildId" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="房间号" prop="dormRoomId" style="margin-bottom: 27px">
<el-input v-model="form.dormRoomId" clearable style="width: 50%"
></el-input>
</el-form-item>
<el-form-item label="申请人" prop="repairer">
<el-input v-model="form.repairer" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="内容" prop="content">
<el-input
v-model="form.content"
:autosize="{ minRows: 3, maxRows: 10 }"
autosize
clearable
style="width: 80%"
type="textarea"
></el-input>
</el-form-item>
<el-form-item :style="finishTime" label="订单状态" prop="state">
<el-radio v-model="form.state" label="完成">完成</el-radio>
<el-radio v-model="form.state" label="未完成">未完成</el-radio>
</el-form-item>
<el-form-item label="订单创建时间" prop="orderBuildTime" style="margin-top: 27px">
<el-date-picker
v-model="form.orderBuildTime"
:disabled="buildTimeDisabled"
clearable
placeholder="选择时间"
style="width: 48%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item :style="finishTime" label="订单完成时间" prop="orderFinishTime" style="margin-top: 27px">
<el-date-picker
v-model="form.orderFinishTime"
clearable
placeholder="选择时间"
style="width: 48%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 内容详情弹窗-->
<el-dialog v-model="detailDialog" title="详情" width="30%">
<el-card>
<div v-html="detail.content"></div>
</el-card>
<template #footer>
<span class="dialog-footer">
<el-button type="primary" @click="closeDetails">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/RepairInfo.js"></script>

287
src/views/RoomInfo.vue
Unescape View File

@ -0,0 +1,287 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>宿舍管理</el-breadcrumb-item>
<el-breadcrumb-item>房间信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入房间号" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<!-- 床位展开-->
<el-table-column type="expand">
<template #default="props">
<el-form inline label-position="left">
<el-form-item label="一号床位" class="item">
<template #default="scope">
<el-tag v-if="props.row.firstBed != null" disable-transitions type="primary"
>{{ props.row.firstBed }}
</el-tag>
<div class="el-form--inline-icon">
<el-icon v-if="props.row.firstBed == null" @click="plusIcon(1, props.row)">
<plus/>
</el-icon>
<div v-if="props.row.firstBed != null" class="el-form--inline-icon">
<el-icon @click="detailIcon(1, props.row)">
<more-filled/>
</el-icon>
<el-icon @click="editIcon(1, props.row)">
<edit/>
</el-icon>
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(1, props.row)">
<template #reference>
<el-icon>
<delete/>
</el-icon>
</template>
</el-popconfirm>
</div>
</div>
</template>
</el-form-item>
<el-form-item label="二号床位" class="item">
<template #default="scope">
<el-tag v-if="props.row.secondBed != null" disable-transitions type="primary"
>{{ props.row.secondBed }}
</el-tag>
<div class="el-form--inline-icon">
<el-icon v-if="props.row.secondBed == null" @click="plusIcon(2, props.row)">
<plus/>
</el-icon>
<div v-if="props.row.secondBed != null" class="el-form--inline-icon">
<el-icon @click="detailIcon(2, props.row)">
<more-filled/>
</el-icon>
<el-icon @click="editIcon(2, props.row)">
<edit/>
</el-icon>
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(2, props.row)">
<template #reference>
<el-icon>
<delete/>
</el-icon>
</template>
</el-popconfirm>
</div>
</div>
</template>
</el-form-item>
<el-form-item label="三号床位" class="item">
<template #default="scope">
<el-tag v-if="props.row.thirdBed != null" disable-transitions type="primary"
>{{ props.row.thirdBed }}
</el-tag>
<div class="el-form--inline-icon">
<el-icon v-if="props.row.thirdBed == null" @click="plusIcon(3, props.row)">
<plus/>
</el-icon>
<div v-if="props.row.thirdBed != null" class="el-form--inline-icon">
<el-icon @click="detailIcon(3, props.row)">
<more-filled/>
</el-icon>
<el-icon @click="editIcon(3, props.row)">
<edit/>
</el-icon>
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(3, props.row)">
<template #reference>
<el-icon>
<delete/>
</el-icon>
</template>
</el-popconfirm>
</div>
</div>
</template>
</el-form-item>
<el-form-item label="四号床位" class="item">
<template #default="scope">
<el-tag v-if="props.row.fourthBed != null" disable-transitions type="primary"
>{{ props.row.fourthBed }}
</el-tag>
<div class="el-form--inline-icon">
<el-icon v-if="props.row.fourthBed == null" @click="plusIcon(4, props.row)">
<plus/>
</el-icon>
<div v-if="props.row.fourthBed != null" class="el-form--inline-icon">
<el-icon @click="detailIcon(4, props.row)">
<more-filled/>
</el-icon>
<el-icon @click="editIcon(4, props.row)">
<edit/>
</el-icon>
<el-popconfirm title="确认删除？" @confirm="deleteStuBed(4, props.row)">
<template #reference>
<el-icon>
<delete/>
</el-icon>
</template>
</el-popconfirm>
</div>
</div>
</template>
</el-form-item>
</el-form>
</template>
</el-table-column>
<el-table-column label="房间号" prop="dormRoomId" sortable/>
<el-table-column label="楼栋号" prop="dormBuildId" sortable/>
<el-table-column label="楼层" prop="floorNum" sortable/>
<el-table-column label="最多可住人数" prop="maxCapacity"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: 0, value: 0 },
{ text: 1, value: 1 },
{ text: 2, value: 2 },
{ text: 3, value: 3 },
{ text: 4, value: 4 },
]"
filter-placement="bottom-end"
label="已住人数"
prop="currentCapacity"
sortable
/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"
></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.dormRoomId)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="楼栋号" prop="dormBuildId">
<el-input v-model.number="form.dormBuildId" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="楼层数" prop="floorNum">
<el-input v-model.number="form.floorNum" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="房间号" prop="dormRoomId">
<el-input v-model.number="form.dormRoomId" :disabled="disabled" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="最多可住人数" prop="maxCapacity">
<el-input v-model.number="form.maxCapacity" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="已住人数" prop="currentCapacity">
<el-input v-model.number="form.currentCapacity" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 床位 弹窗-->
<el-dialog v-model="bedDialog" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="楼栋号" prop="dormBuildId">
<el-input v-model.number="form.dormBuildId" disabled="true" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="楼层数" prop="floorNum">
<el-input v-model.number="form.floorNum" disabled="true" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="房间号" prop="dormRoomId">
<el-input v-model.number="form.dormRoomId" disabled="true" style="width: 80%"></el-input>
</el-form-item>
<el-form-item v-if="this.bedNum === 1" label="床位(一)" prop="firstBed">
<el-input v-model.number="form.firstBed" placeholder="请输入学号" style="width: 80%"></el-input>
</el-form-item>
<el-form-item v-if="this.bedNum === 2" label="床位(二)" prop="secondBed">
<el-input v-model.number="form.secondBed" placeholder="请输入学号" style="width: 80%"></el-input>
</el-form-item>
<el-form-item v-if="this.bedNum === 3" label="床位(三)" prop="thirdBed">
<el-input v-model.number="form.thirdBed" placeholder="请输入学号" style="width: 80%"></el-input>
</el-form-item>
<el-form-item v-if="this.bedNum === 4" label="床位(四)" prop="fourthBed">
<el-input v-model.number="form.fourthBed" placeholder="请输入学号" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button v-if="this.judge === false" type="primary" @click="addStuBed">确 定</el-button>
<el-button v-if="this.judge === true" type="primary" @click="editStuBed">确 定</el-button>
</span>
</template>
</el-dialog>
<!-- 学生信息弹窗-->
<el-dialog v-model="stuInfoDialog" title="学生信息" width="20%" @close="cancel">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="学号：" prop="username">
<template #default="scope">
<span>{{ form.username }}</span>
</template>
</el-form-item>
<el-form-item label="姓名：" prop="name">
<template #default="scope">
<span>{{ form.name }}</span>
</template>
</el-form-item>
<el-form-item label="年龄：" prop="age">
<template #default="scope">
<span>{{ form.age }}</span>
</template>
</el-form-item>
<el-form-item label="性别：" prop="gender">
<template #default="scope">
<span>{{ form.gender }}</span>
</template>
</el-form-item>
<el-form-item label="手机号：" prop="phoneNum">
<template #default="scope">
<span>{{ form.phoneNum }}</span>
</template>
</el-form-item>
<el-form-item label="邮箱地址：" prop="email">
<template #default="scope">
<span>{{ form.email }}</span>
</template>
</el-form-item>
</el-form>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/RoomInfo.js"></script>
<style scoped>@import '../assets/css/RoomInfo.css';</style>

186
src/views/SelfInfo.vue
Unescape View File

@ -0,0 +1,186 @@
<template>
<div >
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>个人信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div style="display: flex">
<div style="width: 600px; margin-left: 30px; position: relative">
<div>
<el-upload :on-success="uploadSuccess" :show-file-list="false"
action="http://localhost:9090/files/upload/"
class="upload-demo"
>
<div class="AvatarDiv">
<el-avatar icon="UserFilled" style="width: 80px; height: 80px"></el-avatar>
<img :src="'data:image;base64,' + image" :style="imgDisplay"
style="width: 80px; height: 80px; border-radius: 40px"/>
<div class="editImg">
更换头像
<el-icon color="color">
<edit></edit>
</el-icon>
</div>
</div>
</el-upload>
</div>
<el-descriptions :column="1" :size="large" border style="min-width: 500px" title="">
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<user/>
</el-icon>
用户名
</div>
</template>
{{ username }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<location/>
</el-icon>
姓名
</div>
</template>
{{ name }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<tickets/>
</el-icon>
性别
</div>
</template>
{{ gender }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<office-building/>
</el-icon>
年龄
</div>
</template>
{{ age }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<iphone/>
</el-icon>
手机号
</div>
</template>
{{ phoneNum }}
</el-descriptions-item>
<el-descriptions-item>
<template #label>
<div>
<el-icon>
<office-building/>
</el-icon>
邮箱
</div>
</template>
{{ email }}
</el-descriptions-item>
</el-descriptions>
<el-tooltip content="修改信息" placement="bottom">
<el-button icon="Edit" size="large" style="margin-top: 30px; width: 80px" type="primary"
@click="Edit">
</el-button>
</el-tooltip>
</div>
<div class="img" style="margin-left: 130px ">
<img alt="" src="../../public/self_Space.png"/>
</div>
</div>
<div>
<!-- 弹窗-->
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="账号" prop="username">
<el-input v-model="form.username" disabled style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" :disabled="disabled" :show-password="showpassword"
show-password
style="width: 80%"></el-input>
<el-tooltip content="修改密码" placement="right">
<el-icon size="large" style="margin-left: 5px; cursor: pointer" @click="EditPass">
<edit/>
</el-icon>
</el-tooltip>
</el-form-item>
<el-form-item :style="display" label="确认密码" prop="checkPass">
<el-input v-model="form.checkPass" show-password style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio v-model="form.gender" label="男">男</el-radio>
<el-radio v-model="form.gender" label="女">女</el-radio>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phoneNum">
<el-input v-model.number="form.phoneNum" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="邮箱地址" prop="email">
<el-input v-model="form.email" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/SelfInfo.js"></script>
<style scoped>@import '../assets/css/SelfInfo.css';
.login-container {
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(
135deg,
hsl(170deg, 80%, 70%),
hsl(190deg, 80%, 70%),
hsl(250deg, 80%, 70%),
hsl(320deg, 80%, 70%),
hsl(320deg, 80%, 70%),
hsl(250deg, 80%, 70%),
hsl(190deg, 80%, 70%),
hsl(190deg, 80%, 70%),
hsl(170deg, 80%, 70%)
);
background-size: 600%;
animation: myanimation 15s linear infinite;
}
@keyframes myanimation {
0% {
background-position: 0 0;
}
100% {
background-position: 100% 100%;
}
}</style>

120
src/views/StuInfo.vue
Unescape View File

@ -0,0 +1,120 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>用户管理</el-breadcrumb-item>
<el-breadcrumb-item>学生信息</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入姓名" prefix-icon="Search"
style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="学号" prop="username" sortable/>
<el-table-column label="姓名" prop="name"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '男', value: '男' },
{ text: '女', value: '女' },
]"
filter-placement="bottom-end"
label="性别"
prop="gender"
/>
<el-table-column label="年龄" prop="age" sortable/>
<el-table-column label="手机号" prop="phoneNum"/>
<el-table-column :show-overflow-tooltip="true" label="邮箱" prop="email"/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.username)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<div>
<!-- 弹窗-->
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="学号" prop="username">
<el-input v-model="form.username" :disabled="judgeAddOrEdit" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" :disabled="disabled" :show-password="showpassword"
style="width: 80%"></el-input>
<el-tooltip content="修改密码" placement="right">
<el-icon :style="editDisplay" size="large" style="margin-left: 5px; cursor: pointer"
@click="EditPass">
<edit/>
</el-icon>
</el-tooltip>
</el-form-item>
<el-form-item :style="display" label="确认密码" prop="checkPass">
<el-input v-model="form.checkPass" :show-password="showpassword" style="width: 80%"
></el-input>
</el-form-item>
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="年龄" prop="age">
<el-input v-model.number="form.age" style="width: 80%"
></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio v-model="form.gender" label="男">男</el-radio>
<el-radio v-model="form.gender" label="女">女</el-radio>
</el-form-item>
<el-form-item label="手机号" prop="phoneNum">
<el-input v-model.number="form.phoneNum" style="width: 80%"
></el-input>
</el-form-item>
<el-form-item label="邮箱地址" prop="email">
<el-input v-model="form.email" style="width: 80%"></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/StuInfo.js"></script>

295
src/views/StudentHome.vue
Unescape View File

@ -0,0 +1,295 @@
<template>
<el-card style="margin: 15px; min-height: calc(100vh - 80px)">
<!-- 头部数据-->
<div>
<el-row :gutter="20" class="topInfo">
<el-col :span="6">
<div id="stuNumDiv" class="el-colDiv">
<div id="ssv1-main-text" class="nowDiv">实时</div>
<span class="title">学生统计</span><br/>
<span class="digital">{{ this.studentNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="haveRoomDiv" class="el-colDiv">
<div id="ssv2-main-text" class="nowDiv">实时</div>
<span class="title">住宿人数</span><br/>
<span class="digital">{{ this.haveRoomStudentNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="repairNum" class="el-colDiv">
<div id="ssv3-main-text" class="nowDiv">实时</div>
<span class="title">报修统计</span><br/>
<span class="digital">{{ this.repairOrderNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
<el-col :span="6">
<div id="emptyRoom" class="el-colDiv">
<div id="ssv4-main-text" class="nowDiv">实时</div>
<span class="title">空宿舍统计</span><br/>
<span class="digital">{{ this.noFullRoomNum }}</span><br/>
<span class="last-span">当前分类总记录数</span>
</div>
</el-col>
</el-row>
</div>
<!-- 下部-->
<div class="left">
<!-- 左侧 宿舍通告-->
<div style="margin-right: 5%">
<span style="font-size: 22px;display: block;margin-bottom: 30px;margin-left: 10px;">宿舍通告</span>
<el-timeline>
<el-timeline-item v-for="(activity, index) in activities.slice(0, 8)" :key="index"
:timestamp="activity.releaseTime">
<span style="font-size: 15px">{{ activity.title }}</span><br/>
<span style="font-size: 10px">{{ activity.content }}</span>
</el-timeline-item>
</el-timeline>
</div>
<!-- 中部-->
<div style="height: 588px">
<span style="
font-size: 22px;
display: block;
margin-bottom: 30px;
margin-left: 10px;
">宿舍学生人数分布
</span>
<home_echarts/>
</div>
<!-- 右侧-->
<div style="margin-left: 5%">
<!-- 天气组件-->
<div class="weather">
<weather/>
</div>
<!-- 日历组件-->
<el-card style="width: 380px; max-height: 440px; margin-top: 17px">
<Calender/>
</el-card>
</div>
</div>
</el-card>
</template>
<script src="@/assets/js/Home.js">
import weather from "@/components/weather";
import Calender from "@/components/Calendar";
import request from "@/utils/request";
import home_echarts from "@/components/home_echarts";
export default {
name: "Home",
components: {
weather,
Calender,
home_echarts,
},
data() {
return {
studentNum: "",
haveRoomStudentNum: "",
detailDialog: false,
repairOrderNum: "",
noFullRoomNum: "",
activities: [],
};
},
created() {
this.getHomePageNotice();
this.getStuNum();
this.getHaveRoomNum();
this.getOrderNum();
this.getNoFullRoom();
},
methods: {
async getStuNum() {
request.get("/stu/stuNum").then((res) => {
if (res.code === "0") {
this.studentNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getHaveRoomNum() {
request.get("/room/selectHaveRoomStuNum").then((res) => {
if (res.code === "0") {
this.haveRoomStudentNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getOrderNum() {
request.get("/repair/orderNum").then((res) => {
if (res.code === "0") {
this.repairOrderNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getNoFullRoom() {
request.get("/room/noFullRoom").then((res) => {
if (res.code === "0") {
this.noFullRoomNum = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
async getHomePageNotice() {
request.get("/notice/homePageNotice").then((res) => {
if (res.code === "0") {
this.activities = res.data;
} else {
ElMessage({
message: res.msg,
type: "error",
});
}
});
},
},
};
</script>
<style scoped>
.wv-lt-refresh {
display: none;
}
.topInfo {
margin: 0 auto;
}
.weather{
border: 2px #2e4057;
}
.left{
display: flex;
width: 100%
;margin-top: 40px;
align-items: center;
justify-content: center;
}
.el-colDiv {
margin: 20px auto;
max-width: 340px;
min-width: 200px;
overflow: hidden;
height: 115px;
border-radius: 5px;
background-color: black;
color: white;
padding-left: 15px;
padding-top: 15px;
position: relative;
}
.el-colDiv:hover {
background-position: right;
}
.nowDiv {
width: 38px;
height: 19px;
position: absolute;
right: 5%;
font-size: 15px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 3px;
}
.digital {
font-size: 25px;
line-height: normal;
margin-left: 2px;
}
.title {
font-size: 18px;
}
.last-span {
font-size: 13px;
}
#stuNumDiv {
/*background-color: #2e4057;*/
background-image: linear-gradient(to left, #FFC312, #EE5A24, #FFC312);
background-size: 200%;
transition: 0.6s;
}
#haveRoomDiv {
/*background-color: #1398ff;*/
background-image: linear-gradient(to left, #C4E538, #009432, #C4E538);
background-size: 200%;
transition: 0.6s;
}
#repairNum {
/*background-color: #008789;*/
background-image: linear-gradient(to left, #12CBC4, #0652DD, #12CBC4);
background-size: 200%;
transition: 0.6s;
}
#emptyRoom {
/*background-color: #ffb400;*/
background-image: linear-gradient(to left, #FDA7DF, #9980FA, #FDA7DF);
background-size: 200%;
transition: 0.6s;
}
#ssv1-main-text {
background-color: #1398ff;
}
#ssv2-main-text {
background-color: #2e4057;
}
#ssv3-main-text {
background-color: #ffb400;
}
#ssv4-main-text {
background-color: #008789;
}
</style>

117
src/views/VisitorInfo.vue
Unescape View File

@ -0,0 +1,117 @@
<template>
<div>
<el-breadcrumb separator-icon="ArrowRight" style="margin: 16px">
<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
<el-breadcrumb-item>访客管理</el-breadcrumb-item>
</el-breadcrumb>
<el-card style="margin: 15px; min-height: calc(100vh - 111px)">
<div>
<!-- 功能区-->
<div style="margin: 10px 0">
<!-- 搜索区-->
<div style="margin: 10px 0">
<el-input v-model="search" clearable placeholder="请输入标题" prefix-icon="Search" style="width: 20%"/>
<el-button icon="Search" style="margin-left: 5px" type="primary" @click="load"></el-button>
<el-button icon="refresh-left" style="margin-left: 10px" type="default" @click="reset"></el-button>
<div style="float: right">
<el-tooltip content="添加" placement="top">
<el-button icon="plus" style="width: 50px" type="primary" @click="add"></el-button>
</el-tooltip>
</div>
</div>
</div>
<!-- 表格-->
<el-table v-loading="loading" :data="tableData" border max-height="705" style="width: 100%">
<el-table-column label="#" type="index"/>
<el-table-column label="姓名" prop="visitorName" width="150px"/>
<el-table-column
:filter-method="filterTag"
:filters="[
{ text: '男', value: '男' },
{ text: '女', value: '女' },
]"
filter-placement="bottom-end"
label="性别"
prop="gender"
width="130px"
/>
<el-table-column label="手机号" prop="phoneNum" width="200px"/>
<el-table-column label="来源地" prop="originCity" sortable width="140px"/>
<el-table-column label="来访时间" prop="visitTime" sortable width="220px"/>
<el-table-column label="备注" prop="content" sortable/>
<!-- 操作栏-->
<el-table-column label="操作" width="130px">
<template #default="scope">
<el-button icon="Edit" type="primary" @click="handleEdit(scope.row)"></el-button>
<el-popconfirm title="确认删除？" @confirm="handleDelete(scope.row.id)">
<template #reference>
<el-button icon="Delete" type="danger"></el-button>
</template>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
<!--分页-->
<div style="margin: 10px 0">
<el-pagination
v-model:currentPage="currentPage"
:page-size="pageSize"
:page-sizes="[10, 20]"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
>
</el-pagination>
</div>
<!-- 弹窗-->
<div>
<el-dialog v-model="dialogVisible" title="操作" width="30%" @close="cancel">
<el-form ref="form" :model="form" :rules="rules" label-width="120px">
<el-form-item label="姓名" prop="visitorName">
<el-input v-model="form.visitorName" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="性别" prop="gender">
<el-radio v-model="form.gender" label="男">男</el-radio>
<el-radio v-model="form.gender" label="女">女</el-radio>
</el-form-item>
<el-form-item label="手机号" prop="phoneNum">
<el-input v-model="form.phoneNum" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="来源地" prop="originCity">
<el-input v-model="form.originCity" clearable style="width: 50%"></el-input>
</el-form-item>
<el-form-item label="来访时间" prop="visitTime">
<el-date-picker
v-model="form.visitTime"
clearable
placeholder="选择时间"
style="width: 48%"
type="datetime"
value-format="YYYY-MM-DD HH:mm:ss"
></el-date-picker>
</el-form-item>
<el-form-item label="来访信息" prop="content">
<el-input
v-model="form.content"
:autosize="{ minRows: 3, maxRows: 10 }"
autosize
clearable
style="width: 80%"
type="textarea"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" @click="save">确 定</el-button>
</span>
</template>
</el-dialog>
</div>
</div>
</el-card>
</div>
</template>
<script src="@/assets/js/VisitorInfo.js"></script>

19
vue.config.js
Unescape View File

@ -0,0 +1,19 @@
// 跨域配置
module.exports = {
publicPath: './',// vue-cli3.3+新版本使用
devServer: { //记住，别写错了devServer//设置本地默认端口 选填
// port: 9876,
proxy: { //设置代理，必须填
'/api': { //设置拦截器 拦截器格式 斜杠+拦截器名字，名字可以自己定
target: 'http://localhost:8083', //代理的目标地址
changeOrigin: true, //是否设置同源，输入是的
pathRewrite: { //路径重写
'^/api': '' //选择忽略拦截器里面的内容
}
}
}
}
}
Write Preview
Loading…
Cancel
Save