|
|
@@ -1,5 +1,8 @@
|
|
|
<template>
|
|
|
<div class="home-container">
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 快捷菜单 -->
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :span="24">
|
|
|
<el-card>
|
|
|
@@ -7,14 +10,17 @@
|
|
|
<panel-group />
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 待办事项 -->
|
|
|
<el-col :xs="24" :sm="12" :md="13" :lg="10">
|
|
|
<el-card class="card-group">
|
|
|
<p class="card-title">待办事项</p>
|
|
|
<el-row :gutter="20">
|
|
|
<el-col :xs="24" :sm="24" :md="12" :lg="12" v-for="(v,i) in dataList" :key="i">
|
|
|
- <div class="card-panel" >
|
|
|
+ <div class="card-panel">
|
|
|
<div class="card-panel-icon-wrapper icon-people">
|
|
|
- <svg-icon icon-class="peoples" class-name="card-panel-icon" />
|
|
|
+ <svg-icon icon-class="example" class-name="card-panel-icon" />
|
|
|
<div class="card-icon-text">
|
|
|
{{v.taskTypeText}}
|
|
|
</div>
|
|
|
@@ -29,15 +35,33 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</el-card>
|
|
|
+ </el-col>
|
|
|
|
|
|
|
|
|
- </el-col>
|
|
|
+
|
|
|
+ <!-- 其他 -->
|
|
|
<el-col :xs="24" :sm="12" :md="11" :lg="14">
|
|
|
<el-card class="chart-wrapper">
|
|
|
<p class="card-title">其他</p>
|
|
|
<el-tabs type="border-card">
|
|
|
- <el-tab-pane label="通知公告">通知公告</el-tab-pane>
|
|
|
- <el-tab-pane label="知识库">知识库</el-tab-pane>
|
|
|
+ <el-tab-pane label="通知公告">
|
|
|
+ <div class="tab-panel">
|
|
|
+ <div class="msg-item" v-for="(v,i) in msgsList" :key="v.id">
|
|
|
+ <span>{{v.title}}</span>
|
|
|
+ <span>{{v.publishTime}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="知识库">
|
|
|
+ <div class="tab-panel">
|
|
|
+ <div class="file-item" v-for="(v,i) in fileList" :key="i">
|
|
|
+ <a :href="imageUrl(v.url)" target="_blank">
|
|
|
+ <i>{{v.name}}</i>
|
|
|
+ <span>{{v.createTime}}</span>
|
|
|
+ </a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
@@ -50,7 +74,9 @@
|
|
|
<script>
|
|
|
import PanelGroup from './dashboard/PanelGroup'
|
|
|
import CountTo from 'vue-count-to'
|
|
|
-import {homeData} from '../api/login'
|
|
|
+import {homeData,fileList} from '@/api/login'
|
|
|
+import {imageUrl} from "@/utils/ruoyi";
|
|
|
+import dayjs from 'dayjs'
|
|
|
export default {
|
|
|
name: 'Index',
|
|
|
components: {
|
|
|
@@ -60,15 +86,31 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
dataList:[],
|
|
|
+ fileList:[],
|
|
|
+ msgsList:[]
|
|
|
}
|
|
|
},
|
|
|
mounted(){
|
|
|
this.getData();
|
|
|
},
|
|
|
methods: {
|
|
|
+ imageUrl,
|
|
|
getData(){
|
|
|
homeData().then(res=>{
|
|
|
this.dataList = res.data;
|
|
|
+ });
|
|
|
+ fileList().then(res=>{
|
|
|
+ let {index1,index2} = res.data;
|
|
|
+ if(index1){
|
|
|
+ this.msgsList = index1;
|
|
|
+ }
|
|
|
+ if(!index2)return;
|
|
|
+ this.fileList = index2.map(v=>{
|
|
|
+ return JSON.parse(v)
|
|
|
+ });
|
|
|
+ this.fileList.forEach(v=>{
|
|
|
+ v.createTime = dayjs(v.createTime).format('YYYY-DD-MM')
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -84,6 +126,9 @@ export default {
|
|
|
padding-bottom: 10px;
|
|
|
}
|
|
|
}
|
|
|
+ .el-tabs{
|
|
|
+ box-shadow: none;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -103,6 +148,46 @@ export default {
|
|
|
margin: 0;
|
|
|
}
|
|
|
}
|
|
|
+.tab-panel{
|
|
|
+ height: 390px;
|
|
|
+ overflow: auto;
|
|
|
+}
|
|
|
+.msg-item{
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color:#1ea8e9;
|
|
|
+ line-height: 39px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >span{
|
|
|
+ overflow: hidden;
|
|
|
+ white-space:nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: start;
|
|
|
+ }
|
|
|
+}
|
|
|
+.file-item{
|
|
|
+ font-size: 15px;
|
|
|
+ padding: 0 10px;
|
|
|
+ color:#1ea8e9;
|
|
|
+ text-decoration:underline;
|
|
|
+ line-height: 39px;
|
|
|
+ >a{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ >i{
|
|
|
+ width: 70%;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space:nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ text-align: start;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &:hover{
|
|
|
+ background-color: #1ea8e9;
|
|
|
+ color:#fff;
|
|
|
+ }
|
|
|
+}
|
|
|
.card-group {
|
|
|
margin-top: 20px;
|
|
|
.card-panel {
|