odjbin/mosr-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat : 新增首页界面

Browse Source
This commit is contained in:
odjbin
2024-05-09 17:16:39 +08:00
parent 0e0d206cc7
commit dcc6866211
6 changed files with 301 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

481
src/views/home/index.vue
View File

@@ -1,266 +1,295 @@
<template>
<div class="home-container">
<div class="home-top">
<el-image :src="homeImage" style="width: 380px"/>
<div class="top-right">
<div>Admin，欢迎回来！</div>
</div>
</div>
<div class="home-top-right">
<el-image :src="coffee" style="height: 100px"/>
<span>科研管理平台</span>
</div>
</div>
<!-- <el-row :gutter="10" type="flex">-->
<!-- <el-col :span="6" :xs="8" :sm="16" :md="18" :lg="20" :xl="24" >-->
<!-- <div v-for="(item,index) in list" :key="index" class="block">-->
<!-- <div>{{item.title}}</div>-->
<!-- <div>-->
<!-- <el-icon><User/></el-icon>-->
<!-- <span>{{item.num}}</span>-->
<!-- </div>-->
<!-- </div>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="10">
<el-col :span="6" v-for="item in 4">1</el-col>
<!-- <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
<!-- >2<div class="grid-content ep-bg-purple-light"-->
<!-- /></el-col>-->
<!-- <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="11"-->
<!-- >3<div class="grid-content ep-bg-purple"-->
<!-- /></el-col>-->
<!-- <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="1"-->
<!-- >4<div class="grid-content ep-bg-purple-light"-->
<!-- /></el-col>-->
</el-row>
<div class="container">
<div id="bar1" ref="bar1"></div>
<div id="bar2" ref="bar2"></div>
<div id="bar3" ref="bar3"></div>
</div>
<div class="container">
<div id="pie1" ref="pie1"></div>
<div id="pie2" ref="pie2"></div>
<div id="pie3" ref="pie3"></div>
<div class="home-bg">
<el-row gutter="20">
<el-col :xs="24" :sm="16" :md="18" :lg="20" :xl="20">
<div class="left">
<h3>我的科创工作</h3>
<el-row :gutter="20" class="statistics">
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in list" :key="index">
<div class="block" :style="{background: item.color}">
<svg-icon :name="item.icon" :class-name="'home-icon'"/>
<div class="block-right">
<span>{{ item.title }}</span>
<span :style="{color: item.textColor}">{{ item.num }}<span>个</span></span>
</div>
</div>
</el-col>
</el-row>
<h4>待办 ({{ todoNum }})</h4>
<fvTable ref="tableIns" :tableConfig="tableConfig" @headBtnClick="headBtnClick"></fvTable>
</div>
</el-col>
<el-col :xs="24" :sm="8" :md="6" :lg="4" :xl="4">
<div class="right">
<div class="right-top">
<h3>欢迎回来， Sunshine</h3>
<div>科技创新项目需求征集中， 要求参见OA内部信！</div>
</div>
<!-- <div class="right-gap"></div>-->
<div class="right-down">
<div>
<h3>帮助文档</h3>
<span>查看更多</span>
</div>
<el-divider/>
<div v-for="item in helpDocList" class="help">
{{ item.title }}
</div>
</div>
</div>
</el-col>
</el-row>
</div>
</template>
<script setup>
import * as echarts from 'echarts'
import homeImage from "@/assets/home/home.png"
import coffee from "@/assets/home/coffee.png"
import {useRouter} from 'vue-router';
<script setup lang="jsx">
import 'element-plus/theme-chalk/display.css'
const router = useRouter()
const list = ref([
{
title: '在线用户量',
num: 2142
title: '待立项',
color: '#CEE8FA',
textColor: '#0043C5',
icon: 'home1',
num: 21
},
{
title: '在线用户量',
num: 2142
title: '待评审',
color: '#DCCEFA',
textColor: '#8600C5',
icon: 'home2',
num: 2
},
{
title: '在线用户量',
num: 2142
title: '待验收',
color: '#FAE6CE',
textColor: '#F47D0E',
icon: 'home3',
num: 4
},
{
title: '在线用户量',
num: 2142
title: '待归档',
color: '#CEFAD8',
textColor: '#01A089',
icon: 'home4',
num: 1
}
])
const barOption = {
title: {
text: 'World Population'
const helpDocList = ref([
{
title: '业务流程'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
{
title: '业务流程'
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
{
title: '业务流程'
},
xAxis: {
type: 'value',
boundaryGap: [0, 0.01]
},
yAxis: {
type: 'category',
data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
},
series: [
{
title: '业务流程'
}
])
const todoNum = ref(20)
const tableConfig = reactive({
columns: [
{
name: '2011',
type: 'bar',
data: [18203, 23489, 29034, 104970, 131744, 630230]
prop: 'userName',
label: '单据编号',
align: 'center',
},
{
name: '2012',
type: 'bar',
data: [19325, 23438, 31000, 121594, 134141, 681807]
}
]
};
const pieOption = {
tooltip: {
trigger: 'item'
},
legend: {
top: '5%',
left: 'center'
},
series: [
prop: 'nickName',
label: '消息主题',
align: 'center',
},
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: false,
itemStyle: {
borderRadius: 10,
borderColor: '#fff',
borderWidth: 2
},
label: {
show: false,
position: 'center'
},
emphasis: {
label: {
show: true,
fontSize: 40,
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{value: 1048, name: 'Search Engine'},
{value: 735, name: 'Direct'},
{value: 580, name: 'Email'},
{value: 484, name: 'Union Ads'},
{value: 300, name: 'Video Ads'}
]
prop: 'state',
label: '状态',
align: 'center',
currentRender: ({row, index}) => (<Tag dictType={'normal_disable'} value={row.state}/>)
},
{
prop: 'createTime',
label: '创建时间',
align: 'center',
},
{
prop: 'oper',
label: '操作',
fixed: 'right',
width: '150',
align: 'center',
currentRender: ({row, index}) => {
return (
<div>
<el-button type="primary" link onClick={() => handleEdit(row)}>查看</el-button>
<el-button type="primary" link onClick={() => handleEdit(row)}>已读</el-button>
</div>
)
}
}
]
};
const data = reactive({
barCharts: null,
pieCharts: null,
bar1: null,
bar2: null,
bar3: null,
pie1: null,
pie2: null,
pie3: null,
],
api: '',
params: {},
})
const init = () => {
data.barCharts = echarts.init(document.getElementById('bar1')).setOption(barOption)
data.barCharts = echarts.init(document.getElementById('bar2')).setOption(barOption)
data.barCharts = echarts.init(document.getElementById('bar3')).setOption(barOption)
data.pieCharts = echarts.init(document.getElementById('pie1')).setOption(pieOption)
data.pieCharts = echarts.init(document.getElementById('pie2')).setOption(pieOption)
data.pieCharts = echarts.init(document.getElementById('pie3')).setOption(pieOption)
const headBtnClick = (key) => {
switch (key) {
case 'add':
handleAdd()
break;
}
}
const redirectView = () => {
const toView = sessionStorage.getItem('toView')
console.log(toView, 'toView');
let jsonView = JSON.parse(toView)
toView ?
router.push({
path: jsonView.path,
query: {
...jsonView.query
}
}) :
null
}
onMounted(() => {
init()
redirectView()
})
window.addEventListener('resize', () => {
data.bar1 = null
data.bar2 = null
data.bar3 = null
data.pie1 = null
data.pie2 = null
data.pie3 = null
data.barCharts = null
data.pieCharts = null
init()
})
</script>
<style lang="scss" scoped>
.home-container {
display: flex;
align-items: center;
@media only screen and (max-width: 767px) {
.right {
margin-top: 10px;
}
}
.home-top {
width: 1000px;
height: 150px;
//.right-gap {
// background-color: #EFEFEF;
// width: 20px;
// //margin-right: -10px;
//}
.home-bg {
height: calc(100vh - 130px);
max-height: calc(100vh - 96px);
background-color: #EFEFEF;
position: absolute;
left: 18px;
right: 0;
overflow-x: hidden;
overflow-y: auto;
&::-webkit-scrollbar {
width: 6px;
}
// 滚动条轨道
&::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
// 小滑块
&::-webkit-scrollbar-thumb {
background: rgba(80, 81, 82, 0.29);
border-radius: 10px;
}
.left {
//flex: 0.8;
padding: 15px;
height: 100%;
border-radius: 10px;
background-color: #ffffff;
.statistics {
width: 99%;
margin-bottom: 20px;
.block {
display: flex;
align-items: center;
background-color: #e9edf2;
border-radius: 4px;
padding: 25px;
margin-top: 15px;
.block-right {
margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: center;
color: #92969a;
font-size: 17px;
> span:first-child {
color: #000000;
margin-bottom: 10px;
}
> span:last-child {
font-size: 20px;
font-weight: bold;
> span {
margin-left: 10px;
}
}
}
}
}
}
.right {
height: calc(100vh - 130px);
display: flex;
align-items: center;
padding: 10px;
background-color: #e1eaf9;
flex-direction: column;
justify-content: space-between;
.top-right {
font-size: 16px;
margin-left: 10px;
letter-spacing: 1.5px;
.right-top {
h3 {
text-align: center;
margin-bottom: 15px;
}
div {
color: #909399;
font-size: 14px;
margin: 0 20px;
letter-spacing: 1px;
line-height: 25px;
}
}
.right-top, .right-down {
flex: 0.5;
padding: 15px;
border-radius: 10px;
background-color: #ffffff;
}
.right-down {
flex: 0.48;
> div:first-child {
color: #557ad2;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: center;
h3 {
margin-left: 15px;
}
> span {
color: #927648;
font-size: 14px;
}
}
.el-divider--horizontal {
height: 3px;
background: #D9D9D9;
border: none;
}
.help {
height: 61px;
line-height: 61px;
padding-left: 15px;
&:hover {
background: #FBFBF7;
}
}
}
}
.home-top-right {
flex: 1;
display: flex;
align-items: center;
flex-direction: column;
}
}
.statistics {
//display: flex;
.block {
}
}
.container {
height: calc((100vh / 2) - 150px);
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
> div {
height: 300px;
flex: 0.9;
}
}
</style>