|
|
@@ -14,48 +14,41 @@
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
- <div class="w100">
|
|
|
+ <div v-show="active === 0"
|
|
|
+ class="w100">
|
|
|
<el-row class="flex mt12"
|
|
|
:gutter="12">
|
|
|
<el-col :span="12">
|
|
|
<el-card>
|
|
|
- <div slot="header" class="header">
|
|
|
+ <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>
|
|
|
+ <li v-for="v in instrList"
|
|
|
+ :key="v.id">
|
|
|
<header>
|
|
|
- <p>人类血液成分检测仪</p>
|
|
|
- <el-tag type="primary"
|
|
|
- size="mini">状态有效</el-tag>
|
|
|
+ <p>{{ v.instName }}</p>
|
|
|
+ <el-tag v-if="v.instStatus == '10'"
|
|
|
+ type="primary"
|
|
|
+ size="mini">正常</el-tag>
|
|
|
+ <el-tag v-else-if="v.instStatus == '20'"
|
|
|
+ type="warning"
|
|
|
+ size="mini">故障</el-tag>
|
|
|
+ <el-tag v-else-if="v.instStatus == '30'"
|
|
|
+ type="danger"
|
|
|
+ size="mini">报废</el-tag>
|
|
|
</header>
|
|
|
- <p>剩余次数:3次 累计使用:3次</p>
|
|
|
- <p>下次预约时间:2月1日</p>
|
|
|
+ <p>型号:{{ v.instNameEn }}</p>
|
|
|
+ <p>仪器负责人:{{ v.instHeadName }}</p>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</el-card>
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card header="通知公告">
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>通知公告</h4>
|
|
|
</div>
|
|
|
<div class="link-list">
|
|
|
@@ -76,7 +69,8 @@
|
|
|
:gutter="12">
|
|
|
<el-col :span="12">
|
|
|
<el-card>
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>科研平台</h4>
|
|
|
</div>
|
|
|
<ul class="platform-list">
|
|
|
@@ -87,7 +81,7 @@
|
|
|
<span>单价:¥100/小时</span>
|
|
|
</header>
|
|
|
<p>位置:7栋6层-分子生物平台中心-12号终端</p>
|
|
|
- <p>有效时间:1月1日 12:00 -- 1月15日 12:00</p>
|
|
|
+ <p>有效时间:1月1日 12:00 -- 1月15日 12:00</p>
|
|
|
</div>
|
|
|
<div class="btn">
|
|
|
<header>
|
|
|
@@ -104,7 +98,7 @@
|
|
|
<span>单价:¥100/小时</span>
|
|
|
</header>
|
|
|
<p>位置:7栋6层-分子生物平台中心-12号终端</p>
|
|
|
- <p>有效时间:1月1日 12:00 -- 1月15日 12:00</p>
|
|
|
+ <p>有效时间:1月1日 12:00 -- 1月15日 12:00</p>
|
|
|
</div>
|
|
|
<div class="btn">
|
|
|
<header>
|
|
|
@@ -117,7 +111,8 @@
|
|
|
</ul>
|
|
|
</el-card>
|
|
|
<el-card class="mt12">
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>笼位管理(共3个)</h4>
|
|
|
</div>
|
|
|
<ul class="cage-list">
|
|
|
@@ -153,11 +148,13 @@
|
|
|
</el-col>
|
|
|
<el-col :span="12">
|
|
|
<el-card class="calendar">
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>日程安排</h4>
|
|
|
</div>
|
|
|
<FullCalendar class="fullCalendar"
|
|
|
- ref="fullCalendar" :options="calendarOptions" />
|
|
|
+ ref="fullCalendar"
|
|
|
+ :options="calendarOptions" />
|
|
|
<ul>
|
|
|
<li>仪器:需要进行第二期临床实验使用仪器</li>
|
|
|
<li>平台:需要使用平台查找相应的案例</li>
|
|
|
@@ -166,7 +163,8 @@
|
|
|
</ul>
|
|
|
</el-card>
|
|
|
<el-card class="mt12 cost">
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>费用统计</h4>
|
|
|
</div>
|
|
|
<div class="chart-container">
|
|
|
@@ -187,10 +185,11 @@
|
|
|
:gutter="12">
|
|
|
<el-col :span="24">
|
|
|
<el-card>
|
|
|
- <div slot="header" class="header">
|
|
|
+ <div slot="header"
|
|
|
+ class="header">
|
|
|
<h4>技术服务</h4>
|
|
|
</div>
|
|
|
- <p>技术服务 - No.123456 - 李老师</p>
|
|
|
+ <p>技术服务 - No.123456 - 李老师</p>
|
|
|
<ul>
|
|
|
<li>11-20:委托发起</li>
|
|
|
<li>11-21:项目确定</li>
|
|
|
@@ -200,7 +199,7 @@
|
|
|
<li>费用结算</li>
|
|
|
<li>结果上传</li>
|
|
|
</ul>
|
|
|
- <p>技术服务 - No.123456 - 李老师</p>
|
|
|
+ <p>技术服务 - No.123456 - 李老师</p>
|
|
|
<ul>
|
|
|
<li>11-20:委托发起</li>
|
|
|
<li>11-21:项目确定</li>
|
|
|
@@ -214,6 +213,124 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</div>
|
|
|
+ <div v-show="active === 1"
|
|
|
+ class="w100">
|
|
|
+ <el-card>
|
|
|
+ <div class="toolbar-wrap">
|
|
|
+ <div class="switch-date">
|
|
|
+ <div class="btn day"
|
|
|
+ :class="curSelectedDate == 'd' ? 'actived' : ''"
|
|
|
+ @click="selectDate('d')">日</div>
|
|
|
+ <div class="btn week"
|
|
|
+ :class="curSelectedDate == 'w' ? 'actived' : ''"
|
|
|
+ @click="selectDate('w')">周</div>
|
|
|
+ <div class="btn month"
|
|
|
+ :class="curSelectedDate == 'm' ? 'actived' : ''"
|
|
|
+ @click="selectDate('m')">月</div>
|
|
|
+ </div>
|
|
|
+ <div class="date-wrap">
|
|
|
+ <div class="prev"
|
|
|
+ @click="handlePrev">
|
|
|
+ <el-button icon="el-icon-arrow-left"
|
|
|
+ size="small"
|
|
|
+ circle />
|
|
|
+ </div>
|
|
|
+ <div class="date">
|
|
|
+ <el-popover :width="200"
|
|
|
+ placement="top-start"
|
|
|
+ trigger="click">
|
|
|
+ <div slot="reference">
|
|
|
+ <span class="time">{{ curTime }}</span>
|
|
|
+ </div>
|
|
|
+ <el-date-picker @change="getAppointList"
|
|
|
+ style="width: 100%"
|
|
|
+ v-model="curTime"
|
|
|
+ type="date"
|
|
|
+ placeholder="选择日期"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :clearable="false" />
|
|
|
+ </el-popover>
|
|
|
+ <span class="week">{{ WEEKS[moment(curTime).day()] }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="next"
|
|
|
+ @click="handleNext">
|
|
|
+ <el-button icon="el-icon-arrow-right"
|
|
|
+ size="small"
|
|
|
+ circle />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="table-wrap">
|
|
|
+ <el-table :data="appointData"
|
|
|
+ border
|
|
|
+ height="500"
|
|
|
+ style="width: 962px">
|
|
|
+ <el-table-column type="index"
|
|
|
+ width="50"
|
|
|
+ align="center">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="instName"
|
|
|
+ label="仪器名称"
|
|
|
+ min-width="160" />
|
|
|
+ <el-table-column prop="projectName"
|
|
|
+ label="课题组/服务"
|
|
|
+ min-width="160">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span v-if="row.projectName">{{ row.projectName }}</span>
|
|
|
+ <span v-else>{{ row.serviceName }}</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="startTime"
|
|
|
+ label="开始时间"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">{{ parseTime(row.startTime, '{y}-{m}-{d}') }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="endTime"
|
|
|
+ label="结束时间"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">{{ parseTime(row.endTime, '{y}-{m}-{d}') }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="userName"
|
|
|
+ label="预约人"
|
|
|
+ width="140" />
|
|
|
+ <el-table-column prop="userContact"
|
|
|
+ label="联系方式"
|
|
|
+ width="160" />
|
|
|
+ <el-table-column prop="appointStatus"
|
|
|
+ label="预约状态"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">{{ setStatus(row.appointStatus) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="appointStatus"
|
|
|
+ label="违约情况"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">{{ getBreachTypes(row) }}</template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="breachScore"
|
|
|
+ label="扣分明细"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <span>{{ row.breachScore }}分</span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作"
|
|
|
+ fixed="right"
|
|
|
+ width="160">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="primary"
|
|
|
+ v-if="row.appointStatus == '10'"
|
|
|
+ @click="editAppoint(row)"
|
|
|
+ text>编辑</el-button>
|
|
|
+ <el-button type="danger"
|
|
|
+ v-if="showCancelBtn(row)"
|
|
|
+ @click="cancelAppoint(row)"
|
|
|
+ text>取消</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </el-card>
|
|
|
+ </div>
|
|
|
</el-container>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -224,10 +341,12 @@ import Banner from "../components/Banner";
|
|
|
import LeftTabs from "@/components/LeftTabs";
|
|
|
import RightContent from "@/components/RightContent";
|
|
|
import * as echarts from "echarts";
|
|
|
-import FullCalendar from '@fullcalendar/vue'
|
|
|
-import dayGridPlugin from '@fullcalendar/daygrid'
|
|
|
-import interactionPlugin from '@fullcalendar/interaction'
|
|
|
+import FullCalendar from "@fullcalendar/vue";
|
|
|
+import dayGridPlugin from "@fullcalendar/daygrid";
|
|
|
+import interactionPlugin from "@fullcalendar/interaction";
|
|
|
import { getNoticeList } from "@/api/login";
|
|
|
+import { getInstrList, getInstrListByUser, userCancelAppoint, cancelAppoint } from "@/api/instr";
|
|
|
+import moment from "moment";
|
|
|
import to from "await-to-js";
|
|
|
export default {
|
|
|
name: "PersonalCenter",
|
|
|
@@ -248,7 +367,7 @@ export default {
|
|
|
},
|
|
|
{
|
|
|
label: "预约信息",
|
|
|
- }
|
|
|
+ },
|
|
|
],
|
|
|
routeList: [
|
|
|
{
|
|
|
@@ -290,15 +409,197 @@ export default {
|
|
|
events: [],
|
|
|
dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调,触发此回调,您必须加载interaction插件
|
|
|
},
|
|
|
- noticeList: []
|
|
|
+ instrList: [],
|
|
|
+ noticeList: [],
|
|
|
+ curSelectedDate: "",
|
|
|
+ curTime: "",
|
|
|
+ appointData: [],
|
|
|
+ WEEKS: [
|
|
|
+ "星期日",
|
|
|
+ "星期一",
|
|
|
+ "星期二",
|
|
|
+ "星期三",
|
|
|
+ "星期四",
|
|
|
+ "星期五",
|
|
|
+ "星期六",
|
|
|
+ ],
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
this.tabSelect(this.options[0], 0);
|
|
|
+ this.curTime = this.getToday();
|
|
|
this.initChart();
|
|
|
- this.getNotice()
|
|
|
+ this.getNotice();
|
|
|
+ this.getInstr();
|
|
|
},
|
|
|
methods: {
|
|
|
+ moment,
|
|
|
+ // 獲取當前日期
|
|
|
+ getToday() {
|
|
|
+ return moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getYesterday() {
|
|
|
+ this.curTime = moment(
|
|
|
+ moment(this.curTime).add(-1, "days").startOf("day").valueOf()
|
|
|
+ ).format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getTomorrow() {
|
|
|
+ this.curTime = moment(
|
|
|
+ moment(this.curTime).add(+1, "days").startOf("day").valueOf()
|
|
|
+ ).format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getPrevWeekDays() {
|
|
|
+ this.curTime = moment(this.curTime)
|
|
|
+ .subtract(1, "week")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getNextWeekDays() {
|
|
|
+ this.curTime = moment(this.curTime).add(1, "week").format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getPrevMonthDays() {
|
|
|
+ this.curTime = moment(this.curTime)
|
|
|
+ .subtract(1, "months")
|
|
|
+ .format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getNextMonthDays() {
|
|
|
+ this.curTime = moment(this.curTime).add(1, "months").format("YYYY-MM-DD");
|
|
|
+ },
|
|
|
+ getWeekDate() {
|
|
|
+ // 获取当前周的周一0点
|
|
|
+ var startOfWeek = moment(this.curTime)
|
|
|
+ .startOf("isoWeek")
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
+
|
|
|
+ // 获取下一周的周一0点
|
|
|
+ var startOfNextWeek = moment(this.curTime)
|
|
|
+ .startOf("isoWeek")
|
|
|
+ .add(1, "weeks")
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ return [startOfWeek, startOfNextWeek];
|
|
|
+ },
|
|
|
+ getMonthDate() {
|
|
|
+ const date = moment(this.curTime);
|
|
|
+ // 获取当前月份的最后一天
|
|
|
+ return [
|
|
|
+ date.startOf("month").format("YYYY-MM-DD HH:mm:ss"),
|
|
|
+ date.endOf("month").add(1, "days").format("YYYY-MM-DD") + " 00:00:00",
|
|
|
+ ];
|
|
|
+ },
|
|
|
+ // 上一周、天、月
|
|
|
+ handlePrev() {
|
|
|
+ if (this.curSelectedDate == "d") {
|
|
|
+ this.getYesterday();
|
|
|
+ } else if (this.curSelectedDate == "w") {
|
|
|
+ this.getPrevWeekDays();
|
|
|
+ } else if (this.curSelectedDate == "m") {
|
|
|
+ this.getPrevMonthDays();
|
|
|
+ }
|
|
|
+ this.getAppointList();
|
|
|
+ },
|
|
|
+ // 下一周、天、月
|
|
|
+ handleNext() {
|
|
|
+ if (this.curSelectedDate == "d") {
|
|
|
+ this.getTomorrow();
|
|
|
+ } else if (this.curSelectedDate == "w") {
|
|
|
+ this.getNextWeekDays();
|
|
|
+ } else if (this.curSelectedDate == "m") {
|
|
|
+ this.getNextMonthDays();
|
|
|
+ }
|
|
|
+ this.getAppointList();
|
|
|
+ },
|
|
|
+ selectDate(date) {
|
|
|
+ this.curSelectedDate = date;
|
|
|
+ this.getAppointList();
|
|
|
+ },
|
|
|
+ async getAppointList() {
|
|
|
+ let startTimeStart = "";
|
|
|
+ let startTimeEnd = "";
|
|
|
+ if (this.curSelectedDate == "d") {
|
|
|
+ startTimeStart = moment(this.curTime).format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ startTimeEnd = moment(this.curTime)
|
|
|
+ .add(1, "days")
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ } else if (this.curSelectedDate == "w") {
|
|
|
+ startTimeStart = this.getWeekDate()[0];
|
|
|
+ startTimeEnd = this.getWeekDate()[1];
|
|
|
+ } else if (this.curSelectedDate == "m") {
|
|
|
+ startTimeStart = moment(this.curTime)
|
|
|
+ .startOf("month")
|
|
|
+ .format("YYYY-MM-DD HH:mm:ss");
|
|
|
+ startTimeEnd = this.getMonthDate()[1];
|
|
|
+ }
|
|
|
+ const [err, res] = await to(
|
|
|
+ getInstrListByUser({ startTimeStart, startTimeEnd })
|
|
|
+ );
|
|
|
+ if (err) return;
|
|
|
+ this.appointData = res.data.list;
|
|
|
+ },
|
|
|
+ setStatus(key) {
|
|
|
+ let str = "";
|
|
|
+ switch (key) {
|
|
|
+ case "10":
|
|
|
+ str = "待审核";
|
|
|
+ break;
|
|
|
+ case "11":
|
|
|
+ str = "已退回";
|
|
|
+ break;
|
|
|
+ case "20":
|
|
|
+ str = "已通过";
|
|
|
+ break;
|
|
|
+ case "30":
|
|
|
+ str = "已驳回";
|
|
|
+ break;
|
|
|
+ case "40":
|
|
|
+ str = "已取消";
|
|
|
+ break;
|
|
|
+ case "50":
|
|
|
+ str = "已上机";
|
|
|
+ break;
|
|
|
+ case "60":
|
|
|
+ str = "已完成";
|
|
|
+ break;
|
|
|
+ case "70":
|
|
|
+ str = "审核超时";
|
|
|
+ break;
|
|
|
+ case "80":
|
|
|
+ str = "超时取消";
|
|
|
+ break;
|
|
|
+ case "90":
|
|
|
+ str = "超时未上机";
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ return str;
|
|
|
+ },
|
|
|
+ getBreachTypes(row) {
|
|
|
+ let breachTypes = [];
|
|
|
+ if (row.isLate) breachTypes.push("迟到");
|
|
|
+ if (row.isOvertime) breachTypes.push("超时");
|
|
|
+ if (row.isLeaveEarly) breachTypes.push("早退");
|
|
|
+ if (row.isAbsence) breachTypes.push("爽约");
|
|
|
+ return breachTypes.join("、") || "-";
|
|
|
+ },
|
|
|
+ cancelAppoint(row) {
|
|
|
+ // 删除附件
|
|
|
+ this.$confirm("确认取消预约?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ const post =
|
|
|
+ row.userId == props.curUserId
|
|
|
+ ? userCancelAppoint({ id: Number(row.id) })
|
|
|
+ : cancelAppoint({ id: Number(row.id) });
|
|
|
+ const [err] = await to(post);
|
|
|
+ if (err) return;
|
|
|
+ this.$message.success("取消成功");
|
|
|
+ this.getAppointList();
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ editAppoint() {
|
|
|
+
|
|
|
+ },
|
|
|
// 选择tab
|
|
|
tabSelect(row, index) {
|
|
|
this.active = index;
|
|
|
@@ -310,6 +611,11 @@ export default {
|
|
|
if (err) return;
|
|
|
this.noticeList = res.data.list || [];
|
|
|
},
|
|
|
+ async getInstr() {
|
|
|
+ const [err, res] = await to(getInstrList({ pageSize: 4, pageNum: 1 }));
|
|
|
+ if (err) return;
|
|
|
+ this.instrList = res.data.list || [];
|
|
|
+ },
|
|
|
initChart() {
|
|
|
let chart = echarts.init(document.getElementById("chart"));
|
|
|
const options = {
|
|
|
@@ -400,7 +706,7 @@ export default {
|
|
|
chart.setOption(options);
|
|
|
},
|
|
|
handleDateClick(dateClickInfo) {
|
|
|
- console.log(dateClickInfo)
|
|
|
+ console.log(dateClickInfo);
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
@@ -429,7 +735,7 @@ export default {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
&:before {
|
|
|
- content: '';
|
|
|
+ content: "";
|
|
|
display: inline-block;
|
|
|
width: 6px;
|
|
|
height: 6px;
|
|
|
@@ -444,7 +750,7 @@ export default {
|
|
|
height: 300px;
|
|
|
}
|
|
|
}
|
|
|
- &.technical .el-card{
|
|
|
+ &.technical .el-card {
|
|
|
height: auto;
|
|
|
::v-deep .el-card__body {
|
|
|
height: auto;
|
|
|
@@ -511,7 +817,7 @@ export default {
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
.remain-time {
|
|
|
- color: #F56C6C;
|
|
|
+ color: #f56c6c;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -561,7 +867,7 @@ export default {
|
|
|
flex: 1;
|
|
|
text-align: center;
|
|
|
background-color: #d9fba5;
|
|
|
- box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
|
|
|
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
|
|
|
&:nth-child(2) {
|
|
|
background-color: #98ca49;
|
|
|
}
|
|
|
@@ -583,4 +889,55 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.toolbar-wrap {
|
|
|
+ height: 30px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ .switch-date {
|
|
|
+ width: 108px;
|
|
|
+ height: 28px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #b5c1d8;
|
|
|
+ display: flex;
|
|
|
+ padding: 4px 6px 0;
|
|
|
+ .btn {
|
|
|
+ cursor: pointer;
|
|
|
+ flex: 1;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #585858;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ &.actived {
|
|
|
+ background: #eef3fe;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #2c78ff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .date-wrap {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ :deep(.el-button--small.is-circle) {
|
|
|
+ width: 26px;
|
|
|
+ height: 26px;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ margin: 0 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #585858;
|
|
|
+ }
|
|
|
+ .week {
|
|
|
+ color: #2c78ff;
|
|
|
+ padding-left: 6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-wrap {
|
|
|
+ flex: 1;
|
|
|
+ margin: 20px 0 0;
|
|
|
+ // overflow: hidden;
|
|
|
+}
|
|
|
</style>
|