调整布局

main
wuyize 2022-07-12 21:48:31 +08:00
parent 291eb9f596
commit 129a0ff9e5
4 changed files with 188 additions and 28 deletions

View File

@ -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>

View File

@ -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>-->

View File

@ -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>

View File

@ -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"