|
@@ -18,20 +18,67 @@
|
|
|
<el-row class="flex mt12"
|
|
<el-row class="flex mt12"
|
|
|
:gutter="12">
|
|
:gutter="12">
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
- <el-card header="科研仪器">
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <el-card>
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>科研仪器</h4>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <ul class="cage-list">
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <header>
|
|
|
|
|
+ <p>人类血液成分检测仪</p>
|
|
|
|
|
+ <el-tag type="primary"
|
|
|
|
|
+ size="mini">状态有效</el-tag>
|
|
|
|
|
+ </header>
|
|
|
|
|
+ <p>剩余次数:3次 累计使用:3次</p>
|
|
|
|
|
+ <p>下次预约时间:2月1日</p>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <header>
|
|
|
|
|
+ <p>人类血液成分检测仪</p>
|
|
|
|
|
+ <el-tag type="primary"
|
|
|
|
|
+ size="mini">状态有效</el-tag>
|
|
|
|
|
+ </header>
|
|
|
|
|
+ <p>剩余次数:3次 累计使用:3次</p>
|
|
|
|
|
+ <p>下次预约时间:2月1日</p>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ <li>
|
|
|
|
|
+ <header>
|
|
|
|
|
+ <p>人类血液成分检测仪</p>
|
|
|
|
|
+ <el-tag type="primary"
|
|
|
|
|
+ size="mini">状态有效</el-tag>
|
|
|
|
|
+ </header>
|
|
|
|
|
+ <p>剩余次数:3次 累计使用:3次</p>
|
|
|
|
|
+ <p>下次预约时间:2月1日</p>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
<el-card header="通知公告">
|
|
<el-card header="通知公告">
|
|
|
-
|
|
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>通知公告</h4>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="link-list">
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li v-for="item in noticeList"
|
|
|
|
|
+ :key="item.id">
|
|
|
|
|
+ <div>
|
|
|
|
|
+ {{ item.noticeTitle }}
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <span>{{ item.noticeTime.split(' ')[0] }}</span>
|
|
|
|
|
+ </li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ </div>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
<el-row class="flex mt12"
|
|
<el-row class="flex mt12"
|
|
|
:gutter="12">
|
|
:gutter="12">
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
- <el-card header="科研平台">
|
|
|
|
|
|
|
+ <el-card>
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>科研平台</h4>
|
|
|
|
|
+ </div>
|
|
|
<ul class="platform-list">
|
|
<ul class="platform-list">
|
|
|
<li>
|
|
<li>
|
|
|
<div class="text">
|
|
<div class="text">
|
|
@@ -45,7 +92,7 @@
|
|
|
<div class="btn">
|
|
<div class="btn">
|
|
|
<header>
|
|
<header>
|
|
|
<p>剩余时长</p>
|
|
<p>剩余时长</p>
|
|
|
- <p>2天18小时</p>
|
|
|
|
|
|
|
+ <p class="remain-time">2天18小时</p>
|
|
|
</header>
|
|
</header>
|
|
|
小计:¥300
|
|
小计:¥300
|
|
|
</div>
|
|
</div>
|
|
@@ -62,15 +109,17 @@
|
|
|
<div class="btn">
|
|
<div class="btn">
|
|
|
<header>
|
|
<header>
|
|
|
<p>剩余时长</p>
|
|
<p>剩余时长</p>
|
|
|
- <p>2天18小时</p>
|
|
|
|
|
|
|
+ <p class="remain-time">2天18小时</p>
|
|
|
</header>
|
|
</header>
|
|
|
小计:¥300
|
|
小计:¥300
|
|
|
</div>
|
|
</div>
|
|
|
</li>
|
|
</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
- <el-card header="笼位管理(共3个)"
|
|
|
|
|
- class="mt12">
|
|
|
|
|
|
|
+ <el-card class="mt12">
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>笼位管理(共3个)</h4>
|
|
|
|
|
+ </div>
|
|
|
<ul class="cage-list">
|
|
<ul class="cage-list">
|
|
|
<li>
|
|
<li>
|
|
|
<header>
|
|
<header>
|
|
@@ -103,8 +152,10 @@
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
<el-col :span="12">
|
|
|
- <el-card header="日程安排"
|
|
|
|
|
- class="calendar">
|
|
|
|
|
|
|
+ <el-card class="calendar">
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>日程安排</h4>
|
|
|
|
|
+ </div>
|
|
|
<FullCalendar class="fullCalendar"
|
|
<FullCalendar class="fullCalendar"
|
|
|
ref="fullCalendar" :options="calendarOptions" />
|
|
ref="fullCalendar" :options="calendarOptions" />
|
|
|
<ul>
|
|
<ul>
|
|
@@ -114,8 +165,10 @@
|
|
|
<li>技术:约李老师进行第三次技术咨询</li>
|
|
<li>技术:约李老师进行第三次技术咨询</li>
|
|
|
</ul>
|
|
</ul>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
- <el-card header="费用统计"
|
|
|
|
|
- class="mt12 cost">
|
|
|
|
|
|
|
+ <el-card class="mt12 cost">
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>费用统计</h4>
|
|
|
|
|
+ </div>
|
|
|
<div class="chart-container">
|
|
<div class="chart-container">
|
|
|
<div class="text">
|
|
<div class="text">
|
|
|
<header>课题组:人血球免疫蛋白应用研究课题组</header>
|
|
<header>课题组:人血球免疫蛋白应用研究课题组</header>
|
|
@@ -130,11 +183,33 @@
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
|
- <el-row class="flex mt12"
|
|
|
|
|
|
|
+ <el-row class="flex mt12 technical"
|
|
|
:gutter="12">
|
|
:gutter="12">
|
|
|
<el-col :span="24">
|
|
<el-col :span="24">
|
|
|
- <el-card header="日程安排">
|
|
|
|
|
-
|
|
|
|
|
|
|
+ <el-card>
|
|
|
|
|
+ <div slot="header" class="header">
|
|
|
|
|
+ <h4>技术服务</h4>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <p>技术服务 - No.123456 - 李老师</p>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>11-20:委托发起</li>
|
|
|
|
|
+ <li>11-21:项目确定</li>
|
|
|
|
|
+ <li>11-23:项目开始</li>
|
|
|
|
|
+ <li>11-23:阶段性结果</li>
|
|
|
|
|
+ <li>当前:结尾验收</li>
|
|
|
|
|
+ <li>费用结算</li>
|
|
|
|
|
+ <li>结果上传</li>
|
|
|
|
|
+ </ul>
|
|
|
|
|
+ <p>技术服务 - No.123456 - 李老师</p>
|
|
|
|
|
+ <ul>
|
|
|
|
|
+ <li>11-20:委托发起</li>
|
|
|
|
|
+ <li>11-21:项目确定</li>
|
|
|
|
|
+ <li>11-23:项目开始</li>
|
|
|
|
|
+ <li>11-23:阶段性结果</li>
|
|
|
|
|
+ <li>当前:结尾验收</li>
|
|
|
|
|
+ <li>费用结算</li>
|
|
|
|
|
+ <li>结果上传</li>
|
|
|
|
|
+ </ul>
|
|
|
</el-card>
|
|
</el-card>
|
|
|
</el-col>
|
|
</el-col>
|
|
|
</el-row>
|
|
</el-row>
|
|
@@ -152,6 +227,8 @@ import * as echarts from "echarts";
|
|
|
import FullCalendar from '@fullcalendar/vue'
|
|
import FullCalendar from '@fullcalendar/vue'
|
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
import interactionPlugin from '@fullcalendar/interaction'
|
|
|
|
|
+import { getNoticeList } from "@/api/login";
|
|
|
|
|
+import to from "await-to-js";
|
|
|
export default {
|
|
export default {
|
|
|
name: "PersonalCenter",
|
|
name: "PersonalCenter",
|
|
|
components: {
|
|
components: {
|
|
@@ -171,13 +248,7 @@ export default {
|
|
|
},
|
|
},
|
|
|
{
|
|
{
|
|
|
label: "预约信息",
|
|
label: "预约信息",
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: "通知模块",
|
|
|
|
|
- },
|
|
|
|
|
- {
|
|
|
|
|
- label: "财务中心",
|
|
|
|
|
- },
|
|
|
|
|
|
|
+ }
|
|
|
],
|
|
],
|
|
|
routeList: [
|
|
routeList: [
|
|
|
{
|
|
{
|
|
@@ -219,11 +290,13 @@ export default {
|
|
|
events: [],
|
|
events: [],
|
|
|
dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调,触发此回调,您必须加载interaction插件
|
|
dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调,触发此回调,您必须加载interaction插件
|
|
|
},
|
|
},
|
|
|
|
|
+ noticeList: []
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
mounted() {
|
|
mounted() {
|
|
|
this.tabSelect(this.options[0], 0);
|
|
this.tabSelect(this.options[0], 0);
|
|
|
this.initChart();
|
|
this.initChart();
|
|
|
|
|
+ this.getNotice()
|
|
|
},
|
|
},
|
|
|
methods: {
|
|
methods: {
|
|
|
// 选择tab
|
|
// 选择tab
|
|
@@ -232,6 +305,11 @@ export default {
|
|
|
this.selectTab = { ...row };
|
|
this.selectTab = { ...row };
|
|
|
this.breadList = [...this.routeList, { name: this.selectTab.label }];
|
|
this.breadList = [...this.routeList, { name: this.selectTab.label }];
|
|
|
},
|
|
},
|
|
|
|
|
+ async getNotice() {
|
|
|
|
|
+ const [err, res] = await to(getNoticeList());
|
|
|
|
|
+ if (err) return;
|
|
|
|
|
+ this.noticeList = res.data.list || [];
|
|
|
|
|
+ },
|
|
|
initChart() {
|
|
initChart() {
|
|
|
let chart = echarts.init(document.getElementById("chart"));
|
|
let chart = echarts.init(document.getElementById("chart"));
|
|
|
const options = {
|
|
const options = {
|
|
@@ -366,14 +444,20 @@ export default {
|
|
|
height: 300px;
|
|
height: 300px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+ &.technical .el-card{
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ ::v-deep .el-card__body {
|
|
|
|
|
+ height: auto;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
.cage-list {
|
|
.cage-list {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
flex-wrap: wrap;
|
|
|
list-style: none;
|
|
list-style: none;
|
|
|
li {
|
|
li {
|
|
|
- height: 138px;
|
|
|
|
|
- width: 198px;
|
|
|
|
|
|
|
+ height: 160px;
|
|
|
|
|
+ width: 221px;
|
|
|
font-size: 14px;
|
|
font-size: 14px;
|
|
|
border: 1px solid #ebeef5;
|
|
border: 1px solid #ebeef5;
|
|
|
border-radius: 6px;
|
|
border-radius: 6px;
|
|
@@ -403,6 +487,33 @@ export default {
|
|
|
li {
|
|
li {
|
|
|
flex: 1;
|
|
flex: 1;
|
|
|
display: flex;
|
|
display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ margin: 12px;
|
|
|
|
|
+ border-radius: 8px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
|
|
+ .text {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ padding: 12px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .btn {
|
|
|
|
|
+ width: 120px;
|
|
|
|
|
+ height: 100%;
|
|
|
|
|
+ color: #fff;
|
|
|
|
|
+ font-size: 20px;
|
|
|
|
|
+ background-color: #73b9b9;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ flex-direction: column;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: space-around;
|
|
|
|
|
+ header {
|
|
|
|
|
+ font-size: 14px;
|
|
|
|
|
+ }
|
|
|
|
|
+ .remain-time {
|
|
|
|
|
+ color: #F56C6C;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
.chart-container {
|
|
.chart-container {
|
|
@@ -433,4 +544,43 @@ export default {
|
|
|
height: 220px;
|
|
height: 220px;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
|
|
+.technical {
|
|
|
|
|
+ p {
|
|
|
|
|
+ font-size: 16px;
|
|
|
|
|
+ height: 24px;
|
|
|
|
|
+ line-height: 24px;
|
|
|
|
|
+ }
|
|
|
|
|
+ ul {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ height: 50px;
|
|
|
|
|
+ line-height: 50px;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ margin: 20px 0;
|
|
|
|
|
+ li {
|
|
|
|
|
+ flex: 1;
|
|
|
|
|
+ text-align: center;
|
|
|
|
|
+ background-color: #d9fba5;
|
|
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
|
|
|
+ &:nth-child(2) {
|
|
|
|
|
+ background-color: #98ca49;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:nth-child(3) {
|
|
|
|
|
+ background-color: #a4dffa;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:nth-child(4) {
|
|
|
|
|
+ background-color: #48bff4;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:nth-child(5) {
|
|
|
|
|
+ background-color: #b6b6f1;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:nth-child(6) {
|
|
|
|
|
+ background-color: #ebcda7;
|
|
|
|
|
+ }
|
|
|
|
|
+ &:nth-child(7) {
|
|
|
|
|
+ background-color: #f2a4ad;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
</style>
|
|
</style>
|