调整布局
parent
291eb9f596
commit
129a0ff9e5
68
src/App.vue
68
src/App.vue
|
|
@ -6,34 +6,66 @@ import router from "@/router";
|
|||
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
},
|
||||
components: {},
|
||||
mounted() {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style lang="scss">
|
||||
#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%;
|
||||
max-height: 100%;
|
||||
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 {
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<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">-->
|
||||
<!-- <p>总人数：{{ getTotalNumber }}</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">
|
||||
<el-menu
|
||||
router
|
||||
style="height: 100%"
|
||||
style="height: 100%;display: flex;flex-direction: column;align-items: stretch;"
|
||||
:default-active="menuDefaultActive">
|
||||
<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>
|
||||
<p style="font-family: 'Segoe UI',sans-serif;font-size: 20px;font-weight: bold;color: #606266">项目<br/>管理系统</p>
|
||||
</div>
|
||||
|
|
@ -17,7 +17,10 @@
|
|||
<el-menu-item index="2" route="/project/closed">
|
||||
<span>已结项项目</span>
|
||||
</el-menu-item>
|
||||
|
||||
<el-button v-if="canCreateAccount"
|
||||
class="menu-button"
|
||||
link @click="uploadDialogVisible=true">导入账号
|
||||
</el-button>
|
||||
</el-menu>
|
||||
</el-aside>
|
||||
<el-container style="background-color: #F2F3F5">
|
||||
|
|
@ -51,12 +54,36 @@
|
|||
</el-main>
|
||||
</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>
|
||||
|
||||
<script setup>
|
||||
import LogoutButton from "../components/LogoutButton";
|
||||
|
||||
import {UploadFilled} from '@element-plus/icons'
|
||||
</script>
|
||||
<script>
|
||||
// @ is an alias to /src
|
||||
|
|
@ -64,7 +91,7 @@ import LogoutButton from "../components/LogoutButton";
|
|||
import request from "@/utils/request";
|
||||
import router from "../router";
|
||||
import {ElMessage} from "element-plus";
|
||||
|
||||
import md5 from 'blueimp-md5'
|
||||
|
||||
export default {
|
||||
name: 'Home',
|
||||
|
|
@ -72,6 +99,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
menuDefaultActive: 1,
|
||||
uploadDialogVisible: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
|
|
@ -84,15 +112,39 @@ export default {
|
|||
break
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canCreateAccount() {
|
||||
if (this.$store && this.$store.state.staff)
|
||||
return this.$store.state.staff.staffGlobalLevel === 1
|
||||
else
|
||||
return false
|
||||
},
|
||||
},
|
||||
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() {
|
||||
if(this.$store&&this.$store.state.staff)
|
||||
if (this.$store && this.$store.state.staff)
|
||||
return this.$store.state.staff.staffFullname
|
||||
else
|
||||
return ' '
|
||||
},
|
||||
getStaffUsername() {
|
||||
if(this.$store&&this.$store.state.staff)
|
||||
if (this.$store && this.$store.state.staff)
|
||||
return this.$store.state.staff.staffUsername
|
||||
else
|
||||
return ' '
|
||||
|
|
@ -101,7 +153,7 @@ export default {
|
|||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style scoped lang="scss">
|
||||
|
||||
.home {
|
||||
height: 100%;
|
||||
|
|
@ -110,5 +162,29 @@ export default {
|
|||
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>
|
||||
|
|
@ -155,7 +155,59 @@
|
|||
</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>
|
||||
<EditProjectDialog
|
||||
:dialogFormVisible="editProjectDialogVisible" :projectClasses="projectClasses"
|
||||
|
|
|
|||
Loading…
Reference in New Issue