山东大学项目实训设计系统（四）管理员端
2024-06-07 10:49:29
管理员界面具体代码
代码文件结构
1.主界面 administrate.vue
<template><el-container style="height: 100%;width: 100%"><el-headerheight="50px"style="background-color: #a40002;color: white;margin-top: -10px;margin-left: -8px;margin-right: -8px"><span>山东大学审计系统</span><!-- <div style="float: right">--><!-- <a href="./login.vue" style="margin-right: 20px">退出</a--><!-- ><span>管理员</span>--><!-- </div>--><div class="dropdown"><a class="more-menu-btn" @click="open_subMenu()"><i class="el-icon-menu" style="color: white;"></i></a><div class="user-info-box" v-show="subMenu" ref="subMenu"><!-- <a href="#"><i class="el-icon-chat-dot-square"></i> 消息</a>--><a href="#" @click="help"> <i class="el-icon-bell"></i> 帮助</a><a href="#" @click="response"><i class="el-icon-edit"></i> 问题反馈</a><a href="#" @click="exit"><i class="el-icon-lock"></i> 退出登录</a></div></div></el-header><el-container style="height: 100%;width: 100%"><el-aside width="200px" style="height: 100%"><el-menu:default-active="activeIndex"@select="handleSelect"style="background-color: white"active-text-color="#409dfe"><el-menu-item index="1" @click="open_MUser"><span slot="title"><i class="el-icon-edit-outline"></i>用户管理</span></el-menu-item><el-menu-item index="2" @click="open_MTemplate"><span slot="title"><i class="el-icon-document"></i>文件模板</span></el-menu-item><el-menu-item index="3" @click="open_MDataAnalyze"><span slot="title"><i class="el-icon-document"></i>数据分析</span></el-menu-item><el-menu-item index="4" @click="open_MCupBoard"><span slot="title"><i class="el-icon-document"></i>柜子信息</span></el-menu-item></el-menu></el-aside><el-main><MUser v-show="MUser" :isShow="MUser"></MUser><MTemplate v-show="MTemplate" :isShow="MTemplate"></MTemplate><MDataAnalyzev-show="MDataAnalyze":isShow="MDataAnalyze"></MDataAnalyze><MCupBoard v-show="MCupBoard" :isShow="MCupBoard"></MCupBoard></el-main></el-container></el-container>
</template><script>
import axios from "axios";
import MUser from "../components/administrate/MUser/MUser";
import MTemplate from "../components/administrate/MTemplate/MTemplate";
import MDataAnalyze from "../components/administrate/MDataAnalyze/MDataAnalyze";
import MCupBoard from "../components/administrate/CupBoard/MCupBoard";
export default {name: "administrator",components: {MTemplate,MUser,MDataAnalyze,MCupBoard},data() {return {subMenu: false,MUser: false,MTemplate: false,MDataAnalyze: false,MCupBoard: false,activeIndex: "1"};},mounted() {this.MUser = true;//点击窗口外关闭窗口document.addEventListener("mouseup", e => {let tree1 = this.$refs.subMenu;if (tree1) {if (!tree1.contains(e.target)) {this.subMenu = false;}}});},methods: {response() {let routeUrl = this.$router.resolve({path: "./Response"// path: "./login"});window.open(routeUrl.href, "_blank");},help() {let routeUrl = this.$router.resolve({path: "./AdministrateHelp"// path: "./login"});window.open(routeUrl.href, "_blank");},exit() {this.$router.push("/login");},open_subMenu() {if (this.subMenu == true) this.subMenu = false;else this.subMenu = true;},handleSelect(e) {this.activeIndex = e;},open_MUser() {this.MUser = true;this.MTemplate = false;this.MDataAnalyze = false;this.MCupBoard = false;},open_MTemplate() {this.MUser = false;this.MTemplate = true;this.MDataAnalyze = false;this.MCupBoard = false;},open_MDataAnalyze() {this.MUser = false;this.MTemplate = false;this.MDataAnalyze = true;this.MCupBoard = false;},open_MCupBoard() {this.MUser = false;this.MTemplate = false;this.MDataAnalyze = false;this.MCupBoard = true;}}
};
</script>
<style scoped>
/*右上角菜单栏样式*/
.dropdown {right: 0px;top: -2px;background-color: #a40002;min-height: 40px;border-color: #a40002;height: 50px;display: block;z-index: 10;position: absolute;
}
.dropdown:hover {background-color: #960001;
}
.more-menu-btn {margin-top: -5px;padding: 5px 10px;display: block;height: 40px;width: auto;color: transparent;text-decoration: none;cursor: pointer;
}
.user-info-box {display: block;z-index: 999;background-color: #960001;width: 230px;right: 0;left: auto;top: 48px;float: left;position: absolute;
}
.user-info-box a {text-decoration: none;color: #ffffff;font-size: 15px;line-height: 24px;min-height: 44px;display: block;padding: 5px 15px;float: left;width: 100%;cursor: pointer;
}
.user-info-box a:hover {background-color: #b40001;
}
/deep/ .el-header {background-color: #b3c0d1;color: #333;line-height: 60px;
}/deep/ .el-aside {margin-left: -20px;margin-right: -20px;background-color: white;height: 100%;border: 1px solid #a40002;border-top: none;
}
.el-submenu__title,
/deep/ .el-menu-item {color: black;/*background-color: #2b2b2b;*/background-color: white;
}
/*设置悬浮时的背景颜色统一*/
/deep/ .el-menu-item-group .el-menu-item .is-active {color: #fff !important;
}
/*设置子菜单宽度*/
/deep/ .el-menu-item-group .el-menu-item {min-width: 10px !important;
}
/deep/ .el-submenu__title:hover {background-color: #a40002;
}
/deep/ .el-menu-item:hover {background-color: #a40002;
}
/deep/ .el-menu-item.is-active {background-color: #a40002 !important;color: #fff;
}
/deep/ .el-menu-item.is-active span {color: #fff !important;
}
</style>
<style>
::-webkit-scrollbar {width: 6px;height: 3px;background-color: white;
}/*定义滑块颜色+圆角*/
::-webkit-scrollbar-thumb {border-radius: 10px;background-color: grey;
}/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {border-radius: 10px;background-color: white;
}
.el-message--success .el-message__icon {color: #a40002;
}
.el-message--success .el-message__content {color: #a40002;
}
.el-message--success {background-color: white;border: 1px solid #a40002;
}
</style>2. 各组件
2.1用户管理 MUser.vue
<template><div class="Muser"><div style="height: 50px;"><el-inputtype="text"placeholder="请输入内容"size="small"maxlength="10"v-model="searchContent"@keyup.enter.native="search(searchContent)"style="width: 250px;margin-left: 740.5px"></el-input><el-button type="primary" size="small" @click="search(searchContent)"><i class="el-icon-search"></i></el-button></div><div><el-table:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"height="410px":row-class-name="tableRowClassName"style="width: 1030px;margin-left: 10px;color: black;font-weight: 400;font-size: 15px"><el-table-column prop="index" label="序号" type="index" width="100"><template slot-scope="scope"><span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span></template></el-table-column><el-table-column prop="id" label="用户id" v-if="false"></el-table-column><el-table-column prop="username" label="工号" width="300"></el-table-column><el-table-column prop="name" label="姓名" width="230"></el-table-column><el-table-column prop="post" label="角色" width="280"></el-table-column><el-table-column prop="manage" label="操作"><template slot-scope="scope"><el-button@click="open_RankUser(scope.$index + (currentPage - 1) * pageSize + 1)"type="text"size="small"style="font-weight: 400;font-size: 15px">设置</el-button></template></el-table-column></el-table><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPage"layout="total,jumper,prev, pager,next":total="tableData.length"style="margin-top: 10px":page-size="pageSize"></el-pagination></div><!--子组件：设置角色弹窗 --><RankUserv-show="RankUser"@close_RankUser="close_RankUser"@refresh_User="refresh_User":is-show="RankUser"></RankUser><div class="hidebox" v-show="RankUser"></div></div>
</template><script scoped>
import axios from "axios";
import RankUser from "./RankUser";
import { getDate } from "../../TimeFormat";
export default {props: {isShow: Boolean},watch: {isShow(newValue, oldValue) {if (newValue == true) this.refresh_User();}},components: {RankUser},data() {return {header: "false",tableData: [],searchContent: "",//子组件是否显示RankUser: false,//分页currentPage: parseInt("1"), // 当前页码total: "", // 总条数pageSize: parseInt("6") // 每页的数据条数};},methods: {search(content) {if (content == "") {this.refresh_User();} else {axios.get("https://baixx.site/api/all_user?name=" + content, {headers: {token: sessionStorage.getItem("token")}}).then(res => {let userList = [];for (let item of res.data.content) {let tmp = {id: "",name: "",username: "",post: ""};tmp.id = item.id;tmp.name = item.name;tmp.username = item.username;let post = item.post;if (post == 3) {tmp.post = "处长";} else if (post == 1) {tmp.post = "审计员";} else if (post == 2) {tmp.post = "科长";} else {tmp.post = "管理员";}if (tmp.post == "管理员") userList.push(tmp);}this.tableData = userList;console.log(this.tableData);});}},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;},//设置table中每一行的class，达到条纹背景的效果tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 === 0) {return "white";} else if (rowIndex % 2 === 1) {return "dark";}return "white";},open_RankUser(index) {this.RankUser = true;sessionStorage.setItem("id", this.tableData[index - 1].id);sessionStorage.setItem("username", this.tableData[index - 1].username);sessionStorage.setItem("name", this.tableData[index - 1].name);},close_RankUser() {this.RankUser = false;},refresh_User() {axios.get("https://baixx.site/api/all_user", {headers: {token: sessionStorage.getItem("token")}}).then(res => {let userList = [];for (let item of res.data.content) {let tmp = {id: "",name: "",username: "",post: ""};tmp.id = item.id;tmp.name = item.name;tmp.username = item.username;let post = item.post;if (post == 3) {tmp.post = "处长";} else if (post == 1) {tmp.post = "审计员";} else if (post == 2) {tmp.post = "科长";} else {tmp.post = "管理员";}if (tmp.post != "管理员") userList.push(tmp);}this.tableData = userList;});}}
};
</script><style scoped>
.Muser {margin-top: -5px;margin-left: 20px;padding-top: 10px;top: 20px;left: 20px;height: 505px;width: 1050px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 4px;
}
.hidebox {position: absolute;left: 0px;top: 0px;background-color: #000;margin: 0;padding: 0;width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/height: 100%;filter: alpha(opacity = 60); /*设置透明度为60%*/opacity: 0.6; /*非IE浏览器下设置透明度为60%*/z-index: 20;
}/*去掉el-table里的所有边框*/
/deep/ .el-table td,
.el-table th {border: none;
}/*奇偶相间背景色*/
/*scope里要加上/deep/ */
/deep/ .el-table .white {background-color: white;
}
/deep/ .el-table .dark {background-color: #f6f1f1;
}
</style>2.2 设置用户权限 RankUser.vue
<template><div class="RankUser"><div style="margin-top: 0px;margin-bottom: 10px"><label style="margin-left:0px;font-size: 20px;font-weight: 700;">设置用户角色</label><el-buttontype="text"@click="close"size="small"style="float: right;margin-right: 5px;margin-top: -7px;background-color: transparent;"><i class="el-icon-close" style="color: #666666;font-size: 20px"></i></el-button></div><div style="margin-top: 15px"></div><el-form><el-form-item label="工号"><el-input disabled v-model="id"></el-input></el-form-item><el-form-item label="姓名"><el-input disabled v-model="name"></el-input></el-form-item><el-form-item label="角色"><el-selectv-model="character"style="width: 100%"@change="handleChange"><el-option label="审计员" value="1"></el-option><el-option label="科长" value="2"></el-option><el-option label="处长" value="3"></el-option> </el-select></el-form-item></el-form><div style="text-align: center;margin-top: 65px"><el-button type="primary" @click="set()" style="margin-top: 0px;">提交设置</el-button></div></div>
</template><script>
import axios from "axios";export default {props: {isShow: Boolean},data() {return {//table中的属性id: "",username: "",name: "",post: "1",character: "1"};},watch: {//打开设置角色时获取当前user的id和nameisShow(newValue, oldValue) {if (newValue == true) {this.id = sessionStorage.getItem("id");this.username = sessionStorage.getItem("username");this.name = sessionStorage.getItem("name");}}},methods: {handleChange(v) {this.post = v;if (v == "1") {this.character = "审计员";} else if (v == "3") {this.character = "处长";} else if (v == "2") {this.character = "科长";}},close() {this.$emit("close_RankUser", "");this.character = "审计员";},set() {let formData = new FormData();formData.append("user_id", this.id);formData.append("post", this.post);axios.post("https://baixx.site/api/auth", formData, {headers: {token: sessionStorage.getItem("token")}}).then(res => {this.$message.success("设置成功!");this.$emit("refresh_Template");this.close();});}}
};
</script><style scoped>
.RankUser {height: 450px;width: 500px;margin: auto;padding: 10px;padding-top: 20px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);z-index: 30;background-color: white;border-radius: 4px;
}/deep/ .el-form-item__label {margin-left: 5px;font-size: 15px;font-weight: 400;color: #666;
}
</style>2.3 文件模板 MTemplate.vue
<template><div class="MTemplate"><div style="height: 50px;"><el-buttontype="primary"style="margin-left: 20px;"size="small"@click="open_TemplateUpload"><i class="el-icon-circle-plus"></i>上传文件模板</el-button><el-inputtype="text"placeholder="请输入内容"size="small"show-word-limit@keyup.enter.native="search(searchContent)"v-model="searchContent"style="width: 250px;margin-left: 600px"></el-input><el-button type="primary" size="small" @click="search(searchContent)"><i class="el-icon-search"></i></el-button></div><div><el-table:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"height="410px":show-header="false":row-class-name="tableRowClassName"style="width: 1030px;margin-left: 10px;color: black;font-weight: 400;font-size: 15px"><el-table-columnprop="name"label="文件名称"width="750"style="left: 100px"></el-table-column><el-table-column v-if="false" prop="id" label="文件id"></el-table-column><el-table-column prop="uploadDate" sortable label="日期" width="150"></el-table-column><el-table-column prop="manage" label="操作"><template slot-scope="scope"><el-button@click="download(scope.$index + 1)"type="text"size="small"style="font-weight: 400;font-size: 15px">下载</el-button><el-button@click="cancel(scope.$index + 1)"type="text"size="small"style="font-weight: 400;font-size: 15px">删除</el-button></template></el-table-column></el-table><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPage"layout="total,jumper,prev, pager,next":total="tableData.length"style="margin-top: 10px":page-size="pageSize"></el-pagination></div><TemplateUploadv-show="TemplateUpload"@close_TemplateUpload="close_TemplateUpload"@refresh_Template="refresh_Template"></TemplateUpload><div class="hidebox" v-show="TemplateUpload"></div></div>
</template><script scoped>
import axios from "axios";
import TemplateUpload from "./TemplateUpload";
import { getExactTime } from "../../TimeFormat";
import { getDate } from "../../TimeFormat";export default {props: {isShow: Boolean},watch: {isShow(newValue, oldValue) {if (newValue == true) this.refresh_Template();}},components: {TemplateUpload},data() {return {header: "false",tableData: [],searchContent: "",//子组件是否显示TemplateUpload: false,//分页currentPage: parseInt("1"), // 当前页码total: "", // 总条数pageSize: parseInt("7") // 每页的数据条数};},methods: {search(content) {if (content == "") {this.refresh_Template();} else {axios.get("https://baixx.site/api/template_byname/?name=" + content, {headers: {token: sessionStorage.getItem("token")}}).then(res => {let TemplateList = [];for (let item of res.data.content) {let tmp = {name: "",id: "",uploadDate: ""};tmp.name = item.name;tmp.id = item.id;tmp.uploadDate = getDate(item.uploadDate);TemplateList.push(tmp);}// console.log(affairList);this.tableData = TemplateList;});}},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;},tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 === 0) {return "white";} else if (rowIndex % 2 === 1) {return "dark";}return "white";},open_TemplateUpload() {this.TemplateUpload = true;},close_TemplateUpload() {this.TemplateUpload = false;},download(index) {let fileId = this.tableData[index - 1].id;// window.open("https://baixx.site/api/download/" + fileId, "_blank");let link = document.createElement("a");link.style.display = "none";link.href = "https://baixx.site/api/download/" + fileId;// link.download = filename;document.body.appendChild(link);link.click();},cancel(index) {let fileId = this.tableData[index - 1].id;axios.delete("https://baixx.site/api/template/" + fileId, {headers: {token: sessionStorage.getItem("token")}}).then(res => {this.$message.success("删除成功!");this.refresh_Template();});},refresh_Template() {axios.get("https://baixx.site/api/template", {headers: {token: sessionStorage.getItem("token")}}).then(res => {let TemplateList = [];for (let item of res.data.content) {let tmp = {name: "",id: "",uploadDate: ""};tmp.name = item.name;tmp.id = item.id;tmp.uploadDate = getDate(item.uploadDate);TemplateList.push(tmp);}// console.log(affairList);this.tableData = TemplateList;});}}
};
</script><style scoped>
.MTemplate {margin-top: -5px;margin-left: 20px;padding-top: 10px;top: 20px;left: 20px;height: 505px;width: 1050px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 4px;
}
.hidebox {position: absolute;left: 0px;top: 0px;background-color: #000;margin: 0;padding: 0;width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/height: 100%;filter: alpha(opacity = 60); /*设置透明度为60%*/opacity: 0.6; /*非IE浏览器下设置透明度为60%*/z-index: 20;
}
/*去掉el-table里的所有边框*/
/deep/ .el-table td,
.el-table th {border: none;
}
a {text-decoration: none;color: black;margin-left: 30px;
}
a:hover {color: red;
}
/*scope里要加上/deep/ */
/deep/ .el-table .white {background-color: white;
}
/deep/ .el-table .dark {background-color: #f6f1f1;
}
</style>2.4文件模板上传 TemplateUpload.vue
<template><div class="TemPlateUpload"><div style="margin-top: 0px;margin-bottom: 10px"><labelstyle="margin-left:0px;font-size: 20px;font-weight: 700;margin-left: 10px">上传文件模板</label><el-buttontype="text"@click="close"size="small"style="float: right;margin-right: 5px;margin-top:-7px;background-color: transparent;"><i class="el-icon-close" style="color: #666666;font-size: 20px"></i></el-button></div><div><el-uploadref="upload"action="/":file-list="fileList":auto-upload="false":on-change="handleChange":on-remove="handleRemove"accept=".doc,.docx,.pdf"style="height: 320px;width: 100%;overflow-y:auto;margin-left: 10px"><el-button size="small" type="primary">点击上传</el-button><divslot="tip"class="el-upload__tip"style="float: right;margin-right: 0px;font-size: 10px;font-weight: lighter;color: #a40002"><!-- (选择好报告草稿上传后不可修改)--></div></el-upload></div><div style="text-align: center"><el-buttontype="primary"@click="TemplateUpload()"style="margin-top: 0px;">上传模板</el-button></div></div>
</template><script>
import axios from "axios";export default {data() {return {fileList: []};},methods: {//选中文件后判断文件类型，将正确文件加入fileList中等待上传handleChange(file) {// console.log(this.fileList);var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);const extension = testmsg === "docx";if (testmsg != "docx" && testmsg != "doc" && testmsg != "pdf") {this.$message({message: "上传文件只能是.doc/.docx/.pdf格式!",type: "warning"});} else {this.fileList.push(file);}},handleRemove(file) {this.fileList = this.fileList.filter(one => file.name !== one.name);},close() {this.$emit("close_TemplateUpload", "");this.fileList = [];},TemplateUpload() {if (this.fileList.length != 0) {this.$message.success("上传成功!");// alert("上传成功!");let formData = new FormData();this.fileList.forEach(file => {let newFile = file.raw;formData.append("files", newFile);});axios.post("https://baixx.site/api/template", formData, {headers: { token: sessionStorage.getItem("token") }}).then(res => {this.$emit("refresh_Template");this.close();});} else {this.$message.error("请选择上传的模板文件");// alert(his.fileList.length);}}}
};
</script><style scoped>
.TemPlateUpload {height: 400px;width: 500px;margin: auto;padding: 10px;padding-top: 20px;position: absolute;top: 0;left: 0;right: 0;bottom: 0;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);z-index: 30;background-color: white;border-radius: 4px;
}
</style>2.5数据分析 MDataAnalyze.vue
<template><div class="DataAnalyze"><div style="height: 120px;width:100%;margin-top:20px;padding-bottom: 20px"><div style="display: inline-block"><div class="box_bottom" style="left: 250px"><div class="box_title"><span>总事务</span></div><div class="box_data"><span>{{ count_all_affair }}</span></div></div><div class="box_top" style="background-color: #67C23A;left: 250px"><i class=" el-icon-files" style="display:block;line-height: 80px"></i></div></div><div style="display: inline-block"><div class="box_bottom" style="left: 450px"><div class="box_title"><span>全程跟踪</span></div><div class="box_data"><span>{{ count_all_quancheng_affair }}</span></div></div><div class="box_top" style="background-color: #E6A23C;left: 450px"><i class=" el-icon-edit" style="display:block;line-height: 80px"></i></div></div><div style="display: inline-block"><div class="box_bottom" style="left: 650px"><div class="box_title"><span>报销</span></div><div class="box_data"><span>{{ count_all_baoxiao_affair }}</span></div></div><div class="box_top" style="background-color: #409EFF;left: 650px"><i class=" el-icon-bell" style="display:block;line-height: 80px"></i></div></div><div style="display: inline-block"><div class="box_bottom" style="left: 850px"><div class="box_title"><span>已完成</span></div><div class="box_data"><span>{{ count_all_finished_affair }}</span></div></div><div class="box_top" style="background-color: #F56C6C;left: 850px"><iclass=" el-icon-document-checked"style="display:block;line-height: 80px"></i></div></div><div style="display: inline-block"><div class="box_bottom" style="left: 1050px"><div class="box_title"><span>未完成</span></div><div class="box_data"><span>{{ count_all_waiting_affair }}</span></div></div><div class="box_top" style="background-color: #909399;left: 1050px"><iclass=" el-icon-document-delete"style="display:block;line-height: 80px"></i></div></div></div><div style="height: 335px;width: 1030px;overflow-y:auto "><div id="type" class="Garaph" style="margin-left: 8px"></div><div id="state" class="Garaph" style="margin-left: 8px"></div><div id="finished" class="Garaph" style="margin-left: 8px"></div><div id="time"></div></div></div>
</template><script scoped>
import { getExactTime } from "../../TimeFormat";
import { getDate } from "../../TimeFormat";import axios from "axios";
export default {components: {},data() {return {header: "false",//统计数据//总事务数count_all_affair: "",//全程跟踪审计项目count_all_quancheng_affair: "",//报销审计项目count_all_baoxiao_affair: "",//已完成项目count_all_finished_affair: "",//未完成项目count_all_waiting_affair: "",//提交资料状态项目count_all_tijiao_affair: "",//审批中状态项目count_all_shenpizhong_affair: "",//审批失败状态项目count_all_failed_affair: "",//所有审计员审计实务统计信息auditorList: [],//mychart全局对象myChart1: "",myChart2: "",myChart3: "",myChart4: ""};},props: {isShow: Boolean},watch: {isShow(newValue, oldValue) {if (newValue == true) {this.refresh_DataAnalyze();}}},methods: {setGaraph() {this.getTypeGaraph(); //事务类型饼图this.getStateGaraph(); //事务状态饼图this.getFinishedGaraph(); //已完成、未完成饼图this.getTimeGaraph();},refresh_DataAnalyze() {axios.get("https://baixx.site/api/draw_info", {headers: {token: sessionStorage.getItem("token")}}).then(res => {//定义临时变量，用于统计//总事务数let count_all_affair = 0;//全程跟踪审计项目let count_all_quancheng_affair = 0;//报销审计项目let count_all_baoxiao_affair = 0;//已完成项目let count_all_finished_affair = 0;//未完成项目let count_all_waiting_affair = 0;//提交资料状态项目let count_all_tijiao_affair = 0;//审批中状态项目let count_all_shenpizhong_affair = 0;//审批失败状态项目let count_all_failed_affair = 0;//初始化统计所有审计员审计事务的变量let auditorList = [];let n = 0;//-----------遍历所有审计员---------------for (let item of res.data.content) {//当前审计员的名字let auditorName = item.user.name;let post = item.user.post;//初始化每个审计员的统计事务类型信息let count_person_all_affair = 0;//全程跟踪审计项目let count_person_quancheng_affair = 0;//报销审计项目let count_person_baoxiao_affair = 0;//已完成项目let count_person_finished_affair = 0;//未完成项目let count_person_waiting_affair = 0;//初始化auditor对象let auditor = {auditorName: "",总事务: "",全程跟踪: "",报销: "",已完成: "",未完成: ""};//审计员进入循环if (post == 1) {n++;//---------------遍历该审计员的所有事务---------------for (let affair of item.affairList) {//统计所有事务信息let type = affair.kind === 20 ? "报销审计" : "全程跟踪审计";let state = affair.state;//事务具体状态if (state === 10) {state = "提交资料中";count_all_tijiao_affair++;} else if (state === 11) {state = "审批中";count_all_shenpizhong_affair++;} else if (state === 12) {state = "审批失败";count_all_failed_affair++;} else if (state === 13) {state = "审批结束";}//总事务数加1count_all_affair++;count_person_all_affair++;//事务类型if (type == "报销审计") {count_all_baoxiao_affair++;count_person_baoxiao_affair++;} else {count_all_quancheng_affair++;count_person_quancheng_affair++;}//是否完成if (state == "审批结束") {count_all_finished_affair++;count_person_finished_affair++;} else {count_all_waiting_affair++;count_person_waiting_affair++;}}auditor.auditorName = auditorName;auditor.总事务 = count_person_all_affair;auditor.全程跟踪 = count_person_quancheng_affair;auditor.报销 = count_person_baoxiao_affair;auditor.已完成 = count_person_finished_affair;auditor.未完成 = count_person_waiting_affair;auditorList.push(auditor);}}this.auditorList = auditorList;//头部五个统计信息赋值//统计数据this.count_all_affair = count_all_affair;//全程跟踪审计项目this.count_all_quancheng_affair = count_all_quancheng_affair;//报销审计项目this.count_all_baoxiao_affair = count_all_baoxiao_affair;//已完成项目this.count_all_finished_affair = count_all_finished_affair;//未完成项目this.count_all_waiting_affair = count_all_waiting_affair;//提交资料状态项目this.count_all_tijiao_affair = count_all_tijiao_affair;//审批中状态项目this.count_all_shenpizhong_affair = count_all_shenpizhong_affair;//审批失败状态项目this.count_all_failed_affair = count_all_failed_affair;//加载图表this.setGaraph();});},getTimeGaraph() {//直接引用进来使用var echarts = require("echarts");if (this.myChart1 != null &&this.myChart1 != "" &&this.myChart1 != undefined) {this.myChart1.dispose();}// 基于准备好的dom，获取main节点init初始化echarts实例this.myChart1 = echarts.init(document.getElementById("time"));// 指定图表的配置项和数据var option;option = {legend: {},tooltip: {},color: ["#67C23A", "#E6A23C", "#409EFF", "#F56C6C", "#909399"],dataset: {dimensions: ["auditorName","总事务","全程跟踪","报销","已完成","未完成"],source: this.auditorList},xAxis: { type: "category" },yAxis: {},// Declare several bar series, each will be mapped// to a column of dataset.source by default.series: [{ type: "bar" },{ type: "bar" },{ type: "bar" },{ type: "bar" },{ type: "bar" }]};// 使用刚指定的配置项和数据显示图表。this.myChart1.setOption(option);},getTypeGaraph() {var echarts = require("echarts");// 基于准备好的dom，初始化echarts实例if (this.myChart2 != null &&this.myChart2 != "" &&this.myChart2 != undefined) {this.myChart2.dispose();}this.myChart2 = echarts.init(document.getElementById("type"));// 指定图表的配置项和数据var option = {//这里的颜色是显示在部分扇形里的，依次调用颜色color: ["#E6A23C","#409EFF","#ffaa00","#c2c2c2","#ff55ff","#ffff00","#ca8622","#aaaaff","#aaff00","#aa0000","#c4ccd3"],title: {text: "审计项目类型情况",x: "center",textStyle: {color: "#666",fontSize: 20}},legend: {orient: "vertical",// left: "left",bottom: "bottom",data: ["全程跟踪审计", "报销审计"] //名称},tooltip: {},series: [{// name: '营收',type: "pie", //饼状视图radius: "70%",data: [{value: this.count_all_quancheng_affair,name: "全程跟踪审计"},{value: this.count_all_baoxiao_affair,name: "报销审计"}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}},label: {position: "inside", //如果需要文字显示在图形里面则设置normal: {show: true,formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)position: "inner"}}}]};// 使用刚指定的配置项和数据显示图表。this.myChart2.setOption(option);},getStateGaraph() {var echarts = require("echarts");if (this.myChart3 != null &&this.myChart3 != "" &&this.myChart3 != undefined) {this.myChart3.dispose();}// 基于准备好的dom，初始化echarts实例this.myChart3 = echarts.init(document.getElementById("state"));// 指定图表的配置项和数据var option = {//这里的颜色是显示在部分扇形里的，依次调用颜色color: ["#9e0909", "#67C23A", "#191d1a", "#F56C6C"],title: {text: "审计项目具体状态情况",x: "center",textStyle: {color: "#666",fontSize: "20"}},legend: {orient: "vertical",// left: "left",bottom: "bottom",data: ["提交资料中", "审批中", "审批失败", "审批结束"] //名称},tooltip: {},series: [{// name: '营收',type: "pie", //饼状视图radius: "70%",data: [{value: this.count_all_tijiao_affair,name: "提交资料中"},{value: this.count_all_shenpizhong_affair,name: "审批中"},{value: this.count_all_failed_affair,name: "审批失败"},{value: this.count_all_finished_affair,name: "审批结束"}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}},label: {// position: "inside", //如果需要文字显示在图形里面则设置normal: {show: true,formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)position: "inner"}}}]};// 使用刚指定的配置项和数据显示图表。this.myChart3.setOption(option);},getFinishedGaraph() {var echarts = require("echarts");if (this.myChart4 != null &&this.myChart4 != "" &&this.myChart4 != undefined) {this.myChart4.dispose();}// 基于准备好的dom，初始化echarts实例this.myChart4 = echarts.init(document.getElementById("finished"));// 指定图表的配置项和数据var option = {//这里的颜色是显示在部分扇形里的，依次调用颜色color: ["#F56C6C", "#909399"],title: {text: "审计项目具体状态情况",x: "center",textStyle: {color: "#666",fontSize: "20"}},legend: {orient: "vertical",// left: "left",bottom: "bottom",data: ["已完成", "未完成"] //名称},tooltip: {},series: [{// name: '营收',type: "pie", //饼状视图radius: "70%",data: [{value: this.count_all_finished_affair,name: "已完成"},{value: this.count_all_waiting_affair,name: "未完成"}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)"}},label: {// position: "inside", //如果需要文字显示在图形里面则设置normal: {show: true,formatter: "{b}: {c}({d}%)", //自定义显示格式(b:name, c:value, d:百分比)position: "inner"}}}]};// 使用刚指定的配置项和数据显示图表。this.myChart4.setOption(option);}}
};
</script><style scoped>
.DataAnalyze {/*background-color: #ededed;*/margin-top: -5px;margin-left: 20px;padding-top: 10px;top: 20px;left: 20px;height: 505px;width: 1050px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 4px;/*overflow-y: auto;*/
}
.box_bottom {margin-top: -15px;position: absolute;width: 170px;height: 110px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 10px;z-index: 1;
}
.box_top {font-size: 40px;text-align: center;color: white;margin-top: -20px;position: absolute;width: 80px;height: 80px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 10px;z-index: 2;
}
.box_title {clear: both;position: relative;margin-top: 10px;float: left;left: 85px;font-weight: 700;font-size: 20px;color: #666;
}
.box_data {clear: both;position: relative;margin-top: 15px;float: left;left: 100px;font-weight: 500;font-size: 20px;color: #666;
}
.Garaph {height: 325px;width: 330px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 10px;display: inline-block;margin-top: 3px;
}
#time {margin-top: 55px;margin-left: 10px;margin-bottom: 5px;height: 325px;width: 1010px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 10px;
}
/*去掉el-table里的所有边框*/
/deep/ .el-table td,
.el-table th {border: none;
}
a {text-decoration: none;color: black;margin-left: 30px;
}
a:hover {color: red;
}
/*scope里要加上/deep/ */
/deep/ .el-table .white {background-color: white;
}
/deep/ .el-table .dark {background-color: #f6f1f1;
}
</style>2.6 柜子信息 MCupBoard.vue
<template><div class="MCupBoard"><div style="height: 50px;"><el-inputtype="text"placeholder="请输入内容"size="small"v-model="searchContent"@keyup.enter.native="search(searchContent)"style="width: 250px;margin-left: 740.5px"></el-input><el-button type="primary" size="small" @click="search(searchContent)"><i class="el-icon-search"></i></el-button></div><div><el-table:data="fileList.slice((currentPage - 1) * pageSize, currentPage * pageSize)"height="410px":row-class-name="tableRowClassName"style="width: 1030px;margin-left: 10px;color: black;font-weight: 400;font-size: 15px"><el-table-column prop="index" label="序号" type="index" width="100"><template slot-scope="scope"><span>{{ scope.$index + (currentPage - 1) * pageSize + 1 }}</span></template></el-table-column><el-table-column prop="fileName" label="文件名" width="500"></el-table-column><el-table-column prop="date" label="日期" width="280"></el-table-column><el-table-column prop="boardNumber" label="柜号"> </el-table-column></el-table><el-paginationbackground@current-change="handleCurrentChange":current-page="currentPage"layout="total,jumper,prev, pager,next":total="fileList.length"style="margin-top: 10px":page-size="pageSize"></el-pagination></div></div>
</template><script scoped>
import axios from "axios";
import { getDate } from "../../TimeFormat";export default {props: {isShow: Boolean},watch: {isShow(newValue, oldValue) {if (newValue == true) this.refresh_CupBoard();}},data() {return {header: "false",fileList: [],searchContent: "",//分页currentPage: parseInt("1"), // 当前页码total: "", // 总条数pageSize: parseInt("6") // 每页的数据条数};},methods: {search(content) {if (content == "") {this.refresh_CupBoard();} else {axios.get("https://baixx.site/api/cupboard/status/?name=" + content, {headers: {token: sessionStorage.getItem("token")}}).then(res => {let fileList = [];for (let item of res.data.content) {let tmp = {fileName: "",date: "",boardNumber: ""};tmp.fileName = item.name;tmp.date = getDate(item.uploadDate);tmp.boardNumber = item.storageId;fileList.push(tmp);}this.fileList = fileList;});}},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;},//设置table中每一行的class，达到条纹背景的效果tableRowClassName({ row, rowIndex }) {if (rowIndex % 2 === 0) {return "white";} else if (rowIndex % 2 === 1) {return "dark";}return "white";},refresh_CupBoard() {axios.get("https://baixx.site/api/cupboard/status", {headers: {token: sessionStorage.getItem("token")}}).then(res => {let fileList = [];for (let item of res.data.content) {let tmp = {fileName: "",date: "",boardNumber: ""};tmp.fileName = item.name;tmp.date = getDate(item.uploadDate);tmp.boardNumber = item.storageId;fileList.push(tmp);}this.fileList = fileList;});}}
};
</script><style scoped>
.MCupBoard {margin-top: -5px;margin-left: 20px;padding-top: 10px;top: 20px;left: 20px;height: 505px;width: 1050px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);border-radius: 4px;
}
.hidebox {position: absolute;left: 0px;top: 0px;background-color: #000;margin: 0;padding: 0;width: 100%; /*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/height: 100%;filter: alpha(opacity = 60); /*设置透明度为60%*/opacity: 0.6; /*非IE浏览器下设置透明度为60%*/z-index: 2;
}/*去掉el-table里的所有边框*/
/deep/ .el-table td,
.el-table th {border: none;
}/*奇偶相间背景色*/
/*scope里要加上/deep/ */
/deep/ .el-table .white {background-color: white;
}
/deep/ .el-table .dark {background-color: #f6f1f1;
}
</style>管理员界面展示
1. 用户管理
用户管理模块呈现了当前的所有用户，可以对普通用户的角色进行修改。
2. 文件模板
文件模板模块中管理员可以对文件模板进行上传、下载、删除操作，在右上角可以根据文件名进行模糊搜索。
3. 数据分析
数据分析模块呈现了了对所有审计员审计项目的统计信息，如总项目数、已完成、未完成项目数等，并且统计了具体每个审计员的审计项目情况。
4. 柜子信息
柜子信息模块呈现了存放于储物柜中的所有文件信息的储存信息，在右上角可以对文件名进行模糊搜索。
山东大学项目实训设计系统（四）管理员端相关推荐
- 山东大学项目实训——地图圈系统——微信小程序（16）
地图圈系统--微信小程序(16) 一.社区功能 二.项目代码 三.效果展示 一.社区功能 这次项目实训的社区功能是一个很大的模块,包括显示用户发布的文字及图片.用户选择的地点.发布的时间.点赞.评论等 ...
- 山东大学项目实训——6月29日
总结项目实训近两天的工作. 首先在第一天上午,参加项目实训开幕仪式,了解实训相关规定和内容.然后与李学庆老师见面,由他像我们讲解项目内容,介绍项目需求. 同时我主动提出担任项目组长. 通过与李学庆老师 ...
- 山东大学项目实训——地图圈系统——微信小程序（5）
地图圈系统--微信小程序(5) 一.腾讯位置服务路线规划api 二.结果响应实例 三.项目代码 四.效果展示 一.腾讯位置服务路线规划api 提供路线规划能力. 1.驾车(driving):支持结合实 ...
- 山东大学项目实训——地图圈系统——微信小程序（18）
地图圈系统--微信小程序(18) 一.轨迹记录功能 二.项目代码 三.效果展示 一.轨迹记录功能 轨迹记录功能的实现思路相对简单,设置一个定时器,每隔1s获取一下当前位置,将当前的经纬度坐标加入到数组 ...
- 山东大学项目实训——地图圈系统——微信小程序（17）
地图圈系统--微信小程序(17) 一.社区附加功能 二.项目代码 三.效果展示 一.社区附加功能 在上次社区功能的基础上,我增加了几个附加功能,首先点击用户头像可以看到此用户的用户信息,然后点击查看动 ...
- 山东大学项目实训（四）—— 微信小程序扫描web端二维码实现web端登录
效果 点击登录后,显示二维码→打开"探古"(本项目)微信小程序,扫描二维码确认登录→web端登录成功 主要流程 因为本人主要负责web前端的开发,所以本文仅介绍web前端的实现方法 ...
- 山东大学项目实训-地图圈系统-APP（2）
文章目录 安卓开发中的常见控件 1.EditText---输入文本 2.TextView 3.Button 4.CheckBox---复选框 5.RadioButton---单选按钮 6.Progre ...
- 山东大学项目实训——简易微信小游戏（一）
一.项目背景 微信小程序接触真实用户快,对用户反馈快速体现,是一个非常好的实践平台.同时就行业背景来看,人们对于无需安装打开即玩的休闲类小游戏的需求依然存在. 二.工作内容 开发绳套奶牛.大鱼吃小鱼. ...
- 山东大学项目实训开发日志——基于vue+springboot的医院耗材管理系统(2)
因为我主要负责前端的内容,因此本专栏主要记录前端页面的一些设计. 首先是前端逻辑的整理,按照一般流程,耗材的管理系统应该有两级库,即中心库和各个科室库.角色应当有管理员,中心库库管,科室库库管,供货商 ...
- 山东大学项目实训小组一——基于深度学习的AI视频剪辑器“易剪”
技术要点:图像处理 计算机视觉 深度学习 多媒体前端 一.项目研究背景: 随着短视频热潮的兴起,越来越多的人投入精力到了视频剪辑视频制作之中.然而利用现有的视频剪辑工具,剪辑一段视频是非常麻烦的,尤其 ...
最新文章
- java orm 工具_GitHub - donnie4w/jdao: jdao是一个java的轻量级orm工具包
- 基于多种转换语义的图数据库查询
- php 怎么将a 转成65,详细阐述PHP环境下如何将gbk编码转成utf8格式
- 中国聚氨酯胶粘剂行业现状研究分析及市场前景预测报告（2022年）
- c语言程序可以单独编译,c语言中的函数可不可以单独进行编译？_后端开发
- android中的 listview,Android中ListView的初步认识（一）
- 图解 SpringCloud 体系！
- [zz]c++可变参数函数使用
- 华为历届笔试面试题整理大全
- 计算机术语bisoin,[焦仔推荐]菜鸟起飞！让你清楚认识电脑BIOS(经典知识性文章)...
- 马上过年了，还在为没抢到回家的车票天天犯愁吗？这些好用的抢票神器赶紧用起来吧！...
- 调用百度地图或是高德地图直接导航
- 如何解决oracle中文乱码问题,oracle中解决中文乱码问题
- 输入文字后不会自动变长的下划线如何制作
- 成都榆熙：拼多多商家都想要提高客单价，但是怎么去提高呢？
- 利用局域网将电脑上的文件快速下载到手机上
- 【转】BAT机器学习面试1000题系列（1~50）
- HSCTF-部分writeup
- 2022 年红队工具和模拟工具包
- 为什么上班只是坐着，一天下来还是觉得好累？