调整布局
parent
291eb9f596
commit
129a0ff9e5
68
src/App.vue
68
src/App.vue
|
@ -6,34 +6,66 @@ import router from "@/router";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
components: {
|
components: {},
|
||||||
},
|
|
||||||
mounted() {
|
mounted() {
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style lang="scss">
|
||||||
#app {
|
#app {
|
||||||
height:100%;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
html{
|
|
||||||
height:100%;
|
|
||||||
max-height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
body{
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
max-height: 100%;
|
max-height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
margin:0;
|
|
||||||
padding:0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
height: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
p.p-title {
|
p.p-title {
|
||||||
font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266
|
font-family: 'Segoe UI', sans-serif;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #606266
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu {
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
|
.el-menu-item {
|
||||||
|
height: 40px;
|
||||||
|
margin: 8px 16px 0 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 40px;
|
||||||
|
|
||||||
|
i {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item:hover,
|
||||||
|
.el-menu-item:focus {
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-menu-item.is-active {
|
||||||
|
background-color: rgba(var(--el-color-primary-rgb), .1);
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div id="echartsPie" ref="echartsPie">
|
<div id="echartsPie" ref="echartsPie">
|
||||||
<div :id="id" class="echarts_box" style="width: 450px;height: 100%;"></div>
|
<div :id="id" class="echarts_box" style="width: 100%;height: 100%;"></div>
|
||||||
<!-- <div class="list_box">-->
|
<!-- <div class="list_box">-->
|
||||||
<!-- <p>总人数:{{ getTotalNumber }}</p>-->
|
<!-- <p>总人数:{{ getTotalNumber }}</p>-->
|
||||||
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}:{{ item.value }}人</p>-->
|
<!-- <p v-for="(item,index) in dataList" :key="index">{{ item.name }}:{{ item.value }}人</p>-->
|
||||||
|
|
|
@ -4,10 +4,10 @@
|
||||||
style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
|
style="display: flex;flex-direction: column;align-items: stretch;overflow: unset">
|
||||||
<el-menu
|
<el-menu
|
||||||
router
|
router
|
||||||
style="height: 100%"
|
style="height: 100%;display: flex;flex-direction: column;align-items: stretch;"
|
||||||
:default-active="menuDefaultActive">
|
:default-active="menuDefaultActive">
|
||||||
<div
|
<div
|
||||||
style="width: 100%;height: 60px;margin: 30px 0 20px 20px; display: flex; flex-direction: row; align-items: center">
|
style="width: 100%;height: 60px;margin: 30px 0 30px 20px; display: flex; flex-direction: row; align-items: center">
|
||||||
<svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
|
<svg-icon style="width: 52px;height: 52px;margin: 10px" icon-class="logo"></svg-icon>
|
||||||
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
|
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
|
||||||
</div>
|
</div>
|
||||||
|
@ -17,7 +17,10 @@
|
||||||
<el-menu-item index="2" route="/project/closed">
|
<el-menu-item index="2" route="/project/closed">
|
||||||
<span>已结项项目</span>
|
<span>已结项项目</span>
|
||||||
</el-menu-item>
|
</el-menu-item>
|
||||||
|
<el-button v-if="canCreateAccount"
|
||||||
|
class="menu-button"
|
||||||
|
link @click="uploadDialogVisible=true">导入账号
|
||||||
|
</el-button>
|
||||||
</el-menu>
|
</el-menu>
|
||||||
</el-aside>
|
</el-aside>
|
||||||
<el-container style="background-color: #F2F3F5">
|
<el-container style="background-color: #F2F3F5">
|
||||||
|
@ -51,12 +54,36 @@
|
||||||
</el-main>
|
</el-main>
|
||||||
</el-container>
|
</el-container>
|
||||||
</el-container>
|
</el-container>
|
||||||
|
<el-dialog
|
||||||
|
:model-value="uploadDialogVisible"
|
||||||
|
title="导入账号"
|
||||||
|
width="500px"
|
||||||
|
@closed="uploadDialogVisible=false"
|
||||||
|
>
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
drag
|
||||||
|
:multiple="false"
|
||||||
|
:http-request="customUpload"
|
||||||
|
>
|
||||||
|
<el-icon class="el-icon--upload">
|
||||||
|
<upload-filled/>
|
||||||
|
</el-icon>
|
||||||
|
<div class="el-upload__text">
|
||||||
|
拖动文件至此或<em>点击上传</em>
|
||||||
|
</div>
|
||||||
|
<template #tip>
|
||||||
|
<div class="el-upload__tip">
|
||||||
|
<el-link href="https://element.eleme.io" type="primary">下载模板</el-link>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-upload>
|
||||||
|
</el-dialog>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import LogoutButton from "../components/LogoutButton";
|
import LogoutButton from "../components/LogoutButton";
|
||||||
|
import {UploadFilled} from '@element-plus/icons'
|
||||||
</script>
|
</script>
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
|
@ -64,7 +91,7 @@ import LogoutButton from "../components/LogoutButton";
|
||||||
import request from "@/utils/request";
|
import request from "@/utils/request";
|
||||||
import router from "../router";
|
import router from "../router";
|
||||||
import {ElMessage} from "element-plus";
|
import {ElMessage} from "element-plus";
|
||||||
|
import md5 from 'blueimp-md5'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
|
@ -72,6 +99,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menuDefaultActive: 1,
|
menuDefaultActive: 1,
|
||||||
|
uploadDialogVisible: false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
@ -84,15 +112,39 @@ export default {
|
||||||
break
|
break
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
canCreateAccount() {
|
||||||
|
if (this.$store && this.$store.state.staff)
|
||||||
|
return this.$store.state.staff.staffGlobalLevel === 1
|
||||||
|
else
|
||||||
|
return false
|
||||||
|
},
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
customUpload(options) {
|
||||||
|
let param = new FormData()
|
||||||
|
param.append('fileDigest', md5(options.file))
|
||||||
|
param.append('uploadFile', options.file)
|
||||||
|
request({
|
||||||
|
url: '/staff/import',
|
||||||
|
data: param,
|
||||||
|
method: 'post',
|
||||||
|
onUploadProgress: progressEvent => {
|
||||||
|
progressEvent.percent = progressEvent.loaded / progressEvent.total * 100 | 0
|
||||||
|
options.onProgress(progressEvent)
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
console.log(res.data);
|
||||||
|
})
|
||||||
|
},
|
||||||
getStaffFullname() {
|
getStaffFullname() {
|
||||||
if(this.$store&&this.$store.state.staff)
|
if (this.$store && this.$store.state.staff)
|
||||||
return this.$store.state.staff.staffFullname
|
return this.$store.state.staff.staffFullname
|
||||||
else
|
else
|
||||||
return ' '
|
return ' '
|
||||||
},
|
},
|
||||||
getStaffUsername() {
|
getStaffUsername() {
|
||||||
if(this.$store&&this.$store.state.staff)
|
if (this.$store && this.$store.state.staff)
|
||||||
return this.$store.state.staff.staffUsername
|
return this.$store.state.staff.staffUsername
|
||||||
else
|
else
|
||||||
return ' '
|
return ' '
|
||||||
|
@ -101,7 +153,7 @@ export default {
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
|
|
||||||
.home {
|
.home {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
@ -110,5 +162,29 @@ export default {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-button {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-start;
|
||||||
|
height: 40px !important;
|
||||||
|
margin: 8px 16px 0 16px;
|
||||||
|
border-radius: 10px;
|
||||||
|
line-height: 40px;
|
||||||
|
padding: 18px !important;
|
||||||
|
color: var(--el-menu-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button.is-link:hover {
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
}
|
||||||
|
.menu-button.is-link:focus {
|
||||||
|
color: var(--el-menu-text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-button.is-active {
|
||||||
|
background-color: rgba(var(--el-color-primary-rgb), .1);
|
||||||
|
color: var(--el-color-primary);
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
|
@ -155,7 +155,59 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div style="height: 300px;margin: 0 30px 30px 30px;
|
||||||
|
display: flex;flex-direction: row;justify-content: space-between">
|
||||||
|
<div style="width: 32%; height: 100%;display: flex;flex-direction: column">
|
||||||
|
<p class="p-title" style="margin-left: 10px">工作项完成趋势</p>
|
||||||
|
<div style="flex:1;margin-top: 30px;padding: 20px;
|
||||||
|
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px; ">
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="p-subtitle">状态</p>
|
||||||
|
<div>
|
||||||
|
<div v-if="project.completed === false">
|
||||||
|
<el-tag>进行中</el-tag>
|
||||||
|
</div>
|
||||||
|
<div v-if="project.completed === true">
|
||||||
|
<el-tag type="info">已结项</el-tag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="p-subtitle">项目经理</p>
|
||||||
|
<p>{{ projectCreatorName }}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="p-subtitle">开始时间</p>
|
||||||
|
<p>{{ formatDate(project.projectCreatedTime) }}</p>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<p class="p-subtitle">结束时间</p>
|
||||||
|
<p>{{ formatDate(project.projectClosedDate) }}</p>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row>
|
||||||
|
<el-col :span="24">
|
||||||
|
<p class="p-subtitle">进度</p>
|
||||||
|
<el-progress
|
||||||
|
:status="(totalNum!==0&&completeNum===totalNum) ? 'success' : ''"
|
||||||
|
:percentage="totalNum===0?0:Math.round(completeNum*100/totalNum)"/>
|
||||||
|
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div style="flex: 1;margin-left: 30px;height: 100%;display: flex;flex-direction: column">
|
||||||
|
<p class="p-title" style="margin-left: 10px">工作项统计</p>
|
||||||
|
<div style="flex:1;margin-top: 30px;padding: 20px;
|
||||||
|
display: flex;flex-direction: column; justify-content: space-between;background-color: white; border-radius: 10px;">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<EditProjectDialog
|
<EditProjectDialog
|
||||||
:dialogFormVisible="editProjectDialogVisible" :projectClasses="projectClasses"
|
:dialogFormVisible="editProjectDialogVisible" :projectClasses="projectClasses"
|
||||||
|
|
Loading…
Reference in New Issue