|
|
@@ -1,1413 +0,0 @@
|
|
|
-<template>
|
|
|
- <div class="news">
|
|
|
- <div class="center-banner">
|
|
|
- <div class="content">
|
|
|
- <div class="user">
|
|
|
- <img v-if="userInfo.avatar" :src="userInfo.avatar" />
|
|
|
- <img v-else src="../assets/img/default-avatar.png">
|
|
|
- <p>
|
|
|
- <span>Hi~{{ userInfo.nickName }}</span>
|
|
|
- <span>{{ userInfo.roleNames }}</span>
|
|
|
- <span>{{ userInfo.pgName || '未加入课题组' }}</span>
|
|
|
- </p>
|
|
|
- </div>
|
|
|
- <div class="btns">
|
|
|
- <p>安全积分：<span>100</span></p>
|
|
|
- <el-button size="medium"
|
|
|
- round>个人设置</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="common-container">
|
|
|
- <el-container>
|
|
|
- <div class="left-tabs">
|
|
|
- <h4>个人中心</h4>
|
|
|
- <ul>
|
|
|
- <li
|
|
|
- v-for="(item, index) in options"
|
|
|
- :key="index"
|
|
|
- :class="{ active: index === active }"
|
|
|
- @click="tabSelect(item, index)"
|
|
|
- >
|
|
|
- {{ item.label }}
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <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">
|
|
|
- <h4>科研仪器</h4>
|
|
|
- </div>
|
|
|
- <ul class="cage-list">
|
|
|
- <li v-for="v in instrList" :key="v.id">
|
|
|
- <header>
|
|
|
- <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>型号：{{ 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">
|
|
|
- <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-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="flex mt12" :gutter="12">
|
|
|
- <el-col :span="12">
|
|
|
- <el-card>
|
|
|
- <div slot="header" class="header">
|
|
|
- <h4>科研平台</h4>
|
|
|
- </div>
|
|
|
- <ul class="platform-list">
|
|
|
- <li>
|
|
|
- <div class="text">
|
|
|
- <header>
|
|
|
- <p>分子生物平台</p>
|
|
|
- <span>单价：¥100/小时</span>
|
|
|
- </header>
|
|
|
- <p>位置：7栋6层-分子生物平台中心-12号终端</p>
|
|
|
- <p>有效时间：1月1日 12：00 -- 1月15日 12:00</p>
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <header>
|
|
|
- <p>剩余时长</p>
|
|
|
- <p class="remain-time">2天18小时</p>
|
|
|
- </header>
|
|
|
- 小计：¥300
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <div class="text">
|
|
|
- <header>
|
|
|
- <p>分子生物平台</p>
|
|
|
- <span>单价：¥100/小时</span>
|
|
|
- </header>
|
|
|
- <p>位置：7栋6层-分子生物平台中心-12号终端</p>
|
|
|
- <p>有效时间：1月1日 12：00 -- 1月15日 12:00</p>
|
|
|
- </div>
|
|
|
- <div class="btn">
|
|
|
- <header>
|
|
|
- <p>剩余时长</p>
|
|
|
- <p class="remain-time">2天18小时</p>
|
|
|
- </header>
|
|
|
- 小计：¥300
|
|
|
- </div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-card>
|
|
|
- <el-card class="mt12">
|
|
|
- <div slot="header" class="header">
|
|
|
- <h4>笼位管理(共3个)</h4>
|
|
|
- </div>
|
|
|
- <ul class="cage-list">
|
|
|
- <li>
|
|
|
- <header>
|
|
|
- <p>实验用小鼠-3只</p>
|
|
|
- <el-tag type="primary" size="mini">正常</el-tag>
|
|
|
- </header>
|
|
|
- <p>位置：7栋6层-602室 4区12号架 8号笼</p>
|
|
|
- <p>到期时间：2月1日（剩余10天）</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <header>
|
|
|
- <p>实验用小鼠-3只-笼位申请</p>
|
|
|
- <el-tag type="warning" size="mini">待分配</el-tag>
|
|
|
- </header>
|
|
|
- <p>位置：待分配</p>
|
|
|
- <p>申请时间：2月1日</p>
|
|
|
- </li>
|
|
|
- <li>
|
|
|
- <header>
|
|
|
- <p>实验用小鼠-3只</p>
|
|
|
- <el-tag type="primary" size="mini">正常</el-tag>
|
|
|
- </header>
|
|
|
- <p>位置：7栋6层-602室 4区12号架 8号笼</p>
|
|
|
- <p>到期时间：2月1日（剩余10天）</p>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- <el-col :span="12">
|
|
|
- <el-card class="calendar">
|
|
|
- <div slot="header" class="header">
|
|
|
- <h4>日程安排</h4>
|
|
|
- </div>
|
|
|
- <FullCalendar
|
|
|
- class="fullCalendar"
|
|
|
- ref="fullCalendar"
|
|
|
- :options="calendarOptions"
|
|
|
- />
|
|
|
- <ul>
|
|
|
- <li>仪器：需要进行第二期临床实验使用仪器</li>
|
|
|
- <li>平台：需要使用平台查找相应的案例</li>
|
|
|
- <li>笼位：进行第二次动物实验</li>
|
|
|
- <li>技术：约李老师进行第三次技术咨询</li>
|
|
|
- </ul>
|
|
|
- </el-card>
|
|
|
- <el-card class="mt12 cost">
|
|
|
- <div slot="header" class="header">
|
|
|
- <h4>费用统计</h4>
|
|
|
- </div>
|
|
|
- <div class="chart-container">
|
|
|
- <div class="text">
|
|
|
- <header>课题组：人血球免疫蛋白应用研究课题组</header>
|
|
|
- <ul>
|
|
|
- <li>费用账单：6条待确认</li>
|
|
|
- <li>本月支出：¥567.89</li>
|
|
|
- <li>累计支出：¥1234.56</li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div id="chart"></div>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </el-col>
|
|
|
- </el-row>
|
|
|
- <el-row class="flex mt12 technical" :gutter="12">
|
|
|
- <el-col :span="24">
|
|
|
- <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-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: 922px"
|
|
|
- >
|
|
|
- <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} {h}:{i}") }}
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="endTime" label="结束时间" width="160">
|
|
|
- <template #default="{ row }">
|
|
|
- {{ parseTime(row.endTime, "{y}-{m}-{d} {h}:{i}") }}
|
|
|
- </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="100">
|
|
|
- <template #default="{ row }">
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- v-if="row.appointStatus == '10'"
|
|
|
- @click="handleEditAppoint(row)"
|
|
|
- text
|
|
|
- >
|
|
|
- 编辑
|
|
|
- </el-button>
|
|
|
- <el-button
|
|
|
- type="text"
|
|
|
- style="color: #f56c6c"
|
|
|
- v-if="
|
|
|
- row.appointStatus == '10' || row.appointStatus == '20'
|
|
|
- "
|
|
|
- @click="cancelAppoint(row)"
|
|
|
- text
|
|
|
- >
|
|
|
- 取消
|
|
|
- </el-button>
|
|
|
- </template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
- </div>
|
|
|
- <div class="pagination">
|
|
|
- <el-pagination
|
|
|
- background
|
|
|
- @size-change="handleSizeChange"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- :current-page="searchForm.pageNum"
|
|
|
- :page-sizes="[10, 50, 100]"
|
|
|
- :page-size="searchForm.pageSize"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- :total="total"
|
|
|
- ></el-pagination>
|
|
|
- </div>
|
|
|
- </el-card>
|
|
|
- </div>
|
|
|
- </el-container>
|
|
|
- </div>
|
|
|
-<<<<<<< Updated upstream
|
|
|
- <PersonalInfoDialog ref="personalInfoDialogRef" />
|
|
|
-=======
|
|
|
- <AppointCreate
|
|
|
- ref="appointCreateRef"
|
|
|
- @refresh="
|
|
|
- searchForm.pageNum = 1;
|
|
|
- getAppointList();
|
|
|
- "
|
|
|
- ></AppointCreate>
|
|
|
->>>>>>> Stashed changes
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-<<<<<<< Updated upstream
|
|
|
-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 { getNoticeList } from "@/api/login";
|
|
|
-import {
|
|
|
- getInstrList,
|
|
|
- getInstrListByUser,
|
|
|
- userCancelAppoint,
|
|
|
- cancelAppoint,
|
|
|
-} from "@/api/instr";
|
|
|
-import moment from "moment";
|
|
|
-import to from "await-to-js";
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import PersonalInfoDialog from "@/components/PersonalInfo";
|
|
|
-export default {
|
|
|
- name: "PersonalCenter",
|
|
|
- components: {
|
|
|
- Banner,
|
|
|
- LeftTabs,
|
|
|
- RightContent,
|
|
|
- FullCalendar,
|
|
|
- PersonalInfoDialog,
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["userInfo"]),
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- active: -1,
|
|
|
- loading: true,
|
|
|
- selectTab: {},
|
|
|
- options: [
|
|
|
- {
|
|
|
- label: "工作台",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "预约信息",
|
|
|
- },
|
|
|
- ],
|
|
|
- routeList: [
|
|
|
- {
|
|
|
- name: "首页",
|
|
|
- path: "/",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "个人中心",
|
|
|
- },
|
|
|
- ],
|
|
|
- breadList: [],
|
|
|
- calendarOptions: {
|
|
|
- height: 300,
|
|
|
- plugins: [dayGridPlugin, interactionPlugin], // 需要用哪个插件引入后放到这个数组里
|
|
|
- initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
|
|
|
- initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
|
|
|
- locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
|
|
|
- firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
|
|
|
- weekNumberCalculation: "ISO", // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
|
|
|
- buttonText: {
|
|
|
- // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
|
|
|
- today: "今天",
|
|
|
- month: "月",
|
|
|
- week: "周",
|
|
|
- day: "天",
|
|
|
- },
|
|
|
- headerToolbar: {
|
|
|
- // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
|
|
|
- right: "today prev,next",
|
|
|
- center: "title",
|
|
|
- left: "dayGridMonth,dayGridWeek,dayGridDay",
|
|
|
- },
|
|
|
- eventTimeFormat: {
|
|
|
- // 在每个事件上显示的时间的格式
|
|
|
- hour: "numeric",
|
|
|
- minute: "2-digit",
|
|
|
- hour12: false,
|
|
|
- },
|
|
|
- events: [],
|
|
|
- dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
|
|
|
- },
|
|
|
- instrList: [],
|
|
|
- noticeList: [],
|
|
|
- curSelectedDate: "",
|
|
|
- curTime: "",
|
|
|
- appointData: [],
|
|
|
- WEEKS: [
|
|
|
- "星期日",
|
|
|
- "星期一",
|
|
|
- "星期二",
|
|
|
- "星期三",
|
|
|
- "星期四",
|
|
|
- "星期五",
|
|
|
- "星期六",
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.tabSelect(this.options[0], 0);
|
|
|
- this.curTime = this.getToday();
|
|
|
- this.initChart();
|
|
|
- this.getNotice();
|
|
|
- this.getInstr();
|
|
|
- },
|
|
|
- methods: {
|
|
|
- moment,
|
|
|
- // 獲取當前日期
|
|
|
- getToday() {
|
|
|
- return moment(moment().startOf("day").valueOf()).format("YYYY-MM-DD");
|
|
|
-=======
|
|
|
- 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 { getNoticeList } from "@/api/login";
|
|
|
- import {
|
|
|
- getInstrList,
|
|
|
- getInstrListByUser,
|
|
|
- userCancelAppoint,
|
|
|
- } from "@/api/instr";
|
|
|
- import { mapGetters } from "vuex";
|
|
|
- import moment from "moment";
|
|
|
- import to from "await-to-js";
|
|
|
- import { getToken } from "@/utils/auth";
|
|
|
- import AppointCreate from "./equipment/components/appoint-create.vue";
|
|
|
- export default {
|
|
|
- name: "PersonalCenter",
|
|
|
- components: {
|
|
|
- Banner,
|
|
|
- LeftTabs,
|
|
|
- RightContent,
|
|
|
- FullCalendar,
|
|
|
- AppointCreate,
|
|
|
->>>>>>> Stashed changes
|
|
|
- },
|
|
|
-
|
|
|
-<<<<<<< Updated upstream
|
|
|
- // 获取下一周的周一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;
|
|
|
- this.selectTab = { ...row };
|
|
|
- this.breadList = [...this.routeList, { name: this.selectTab.label }];
|
|
|
- },
|
|
|
- async getNotice() {
|
|
|
- const [err, res] = await to(getNoticeList());
|
|
|
- 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 = {
|
|
|
- series: [
|
|
|
-=======
|
|
|
- data() {
|
|
|
- return {
|
|
|
- active: -1,
|
|
|
- loading: true,
|
|
|
- selectTab: {},
|
|
|
- searchForm: {
|
|
|
- pageNum: 1,
|
|
|
- pageSize: 10,
|
|
|
- },
|
|
|
- total: 0,
|
|
|
- options: [
|
|
|
->>>>>>> Stashed changes
|
|
|
- {
|
|
|
- label: "工作台",
|
|
|
- },
|
|
|
- {
|
|
|
- label: "预约信息",
|
|
|
- },
|
|
|
- ],
|
|
|
- routeList: [
|
|
|
- {
|
|
|
- name: "首页",
|
|
|
- path: "/",
|
|
|
- },
|
|
|
- {
|
|
|
- name: "个人中心",
|
|
|
- },
|
|
|
- ],
|
|
|
- breadList: [],
|
|
|
- calendarOptions: {
|
|
|
- height: 300,
|
|
|
- plugins: [dayGridPlugin, interactionPlugin], // 需要用哪个插件引入后放到这个数组里
|
|
|
- initialDate: new Date(), // 日历第一次加载时显示的初始日期。可以解析为Date的任何职包括ISO8601日期字符串，例如"2014-02-01"。
|
|
|
- initialView: "dayGridMonth", // 日历加载时的初始视图，默认值为'dayGridMonth'，可以为任何可用视图的值，如例如'dayGridWeek'，'timeGridDay'，'listWeek'
|
|
|
- locale: "zh-cn", // 设置日历的语言，中文为 “zh-cn”
|
|
|
- firstDay: "1", // 设置每周的第一天，默认值取决于当前语言环境，该值为代表星期几的数字，且值必须为整数，星期日=0
|
|
|
- weekNumberCalculation: "ISO", // 指定"ISO"结果为ISO8601周数。指定"ISO"将firstDay的默认值更改为1（Monday）
|
|
|
- buttonText: {
|
|
|
- // 文本将显示在headerToolbar / footerToolbar的按钮上。不支持HTML注入。所有特殊字符将被转义。
|
|
|
- today: "今天",
|
|
|
- month: "月",
|
|
|
- week: "周",
|
|
|
- day: "天",
|
|
|
- },
|
|
|
- headerToolbar: {
|
|
|
- // 在日历顶部定义按钮和标题。将headerToolbar选项设置为false不会显示任何标题工具栏。可以为对象提供属性start/center/end或left/center/right。这些属性包含带有逗号/空格分隔值的字符串。用逗号分隔的值将相邻显示。用空格分隔的值之间会显示一个很小的间隙。
|
|
|
- right: "today prev,next",
|
|
|
- center: "title",
|
|
|
- left: "dayGridMonth,dayGridWeek,dayGridDay",
|
|
|
- },
|
|
|
- eventTimeFormat: {
|
|
|
- // 在每个事件上显示的时间的格式
|
|
|
- hour: "numeric",
|
|
|
- minute: "2-digit",
|
|
|
- hour12: false,
|
|
|
- },
|
|
|
- events: [],
|
|
|
- dateClick: this.handleDateClick, // 当用户单击日期或时间时,触发该回调，触发此回调，您必须加载interaction插件
|
|
|
- },
|
|
|
- instrList: [],
|
|
|
- noticeList: [],
|
|
|
- curSelectedDate: "w",
|
|
|
- curTime: "",
|
|
|
- appointData: [],
|
|
|
- WEEKS: [
|
|
|
- "星期日",
|
|
|
- "星期一",
|
|
|
- "星期二",
|
|
|
- "星期三",
|
|
|
- "星期四",
|
|
|
- "星期五",
|
|
|
- "星期六",
|
|
|
- ],
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters(["userInfo"]),
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.tabSelect(this.options[0], 0);
|
|
|
- this.curTime = this.getToday();
|
|
|
- this.initChart();
|
|
|
- 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];
|
|
|
- }
|
|
|
- console.log(startTimeStart);
|
|
|
- const [err, res] = await to(
|
|
|
- getInstrListByUser({
|
|
|
- startTimeStart,
|
|
|
- startTimeEnd,
|
|
|
- ...this.searchForm,
|
|
|
- })
|
|
|
- );
|
|
|
- if (err) return;
|
|
|
- this.appointData = res.data.list;
|
|
|
- this.total = res.data.total;
|
|
|
- },
|
|
|
- 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 = userCancelAppoint({ id: Number(row.id) });
|
|
|
- const [err] = await to(post);
|
|
|
- if (err) return;
|
|
|
- this.$message.success("取消成功");
|
|
|
- this.getAppointList();
|
|
|
- })
|
|
|
- .catch(() => {});
|
|
|
- },
|
|
|
- // 编辑预约
|
|
|
- handleEditAppoint(row) {
|
|
|
- const token = getToken();
|
|
|
- if (!token) {
|
|
|
- return this.$router.push("/login");
|
|
|
- }
|
|
|
- this.$refs.appointCreateRef.openDialog(row);
|
|
|
- },
|
|
|
- // 选择tab
|
|
|
- tabSelect(row, index) {
|
|
|
- this.active = index;
|
|
|
- this.selectTab = { ...row };
|
|
|
- this.breadList = [...this.routeList, { name: this.selectTab.label }];
|
|
|
- if (index == 1) {
|
|
|
- this.getAppointList();
|
|
|
- }
|
|
|
- },
|
|
|
- async getNotice() {
|
|
|
- const [err, res] = await to(getNoticeList());
|
|
|
- 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 = {
|
|
|
- series: [
|
|
|
- {
|
|
|
- type: "gauge",
|
|
|
- startAngle: 180,
|
|
|
- endAngle: 0,
|
|
|
- center: ["50%", "75%"],
|
|
|
- radius: "90%",
|
|
|
- min: 0,
|
|
|
- max: 1,
|
|
|
- splitNumber: 8,
|
|
|
- axisLine: {
|
|
|
- lineStyle: {
|
|
|
- width: 6,
|
|
|
- color: [
|
|
|
- [0.25, "#FF6E76"],
|
|
|
- [0.5, "#FDDD60"],
|
|
|
- [0.75, "#58D9F9"],
|
|
|
- [1, "#7CFFB2"],
|
|
|
- ],
|
|
|
- },
|
|
|
- },
|
|
|
- pointer: {
|
|
|
- icon: "path://M12.8,0.7l12,40.1H0.7L12.8,0.7z",
|
|
|
- length: "12%",
|
|
|
- width: 20,
|
|
|
- offsetCenter: [0, "-60%"],
|
|
|
- itemStyle: {
|
|
|
- color: "auto",
|
|
|
- },
|
|
|
- },
|
|
|
- axisTick: {
|
|
|
- length: 12,
|
|
|
- lineStyle: {
|
|
|
- color: "auto",
|
|
|
- width: 2,
|
|
|
- },
|
|
|
- },
|
|
|
- splitLine: {
|
|
|
- length: 20,
|
|
|
- lineStyle: {
|
|
|
- color: "auto",
|
|
|
- width: 5,
|
|
|
- },
|
|
|
- },
|
|
|
- axisLabel: {
|
|
|
- color: "#464646",
|
|
|
- fontSize: 14,
|
|
|
- distance: -40,
|
|
|
- rotate: "tangential",
|
|
|
- formatter: function (value) {
|
|
|
- if (value === 0.875) {
|
|
|
- return "充足";
|
|
|
- } else if (value === 0.625) {
|
|
|
- return "可控";
|
|
|
- } else if (value === 0.375) {
|
|
|
- return "紧张";
|
|
|
- } else if (value === 0.125) {
|
|
|
- return "危险";
|
|
|
- }
|
|
|
- return "";
|
|
|
- },
|
|
|
- },
|
|
|
- title: {
|
|
|
- offsetCenter: [0, "-10%"],
|
|
|
- fontSize: 14,
|
|
|
- },
|
|
|
- detail: {
|
|
|
- fontSize: 20,
|
|
|
- offsetCenter: [0, "-35%"],
|
|
|
- valueAnimation: true,
|
|
|
- formatter: function (value) {
|
|
|
- return Math.round(value * 100) + "";
|
|
|
- },
|
|
|
- color: "inherit",
|
|
|
- },
|
|
|
- data: [
|
|
|
- {
|
|
|
- value: 0.7,
|
|
|
- name: "危险预算余额",
|
|
|
- },
|
|
|
- ],
|
|
|
- },
|
|
|
- ],
|
|
|
- };
|
|
|
- chart.setOption(options);
|
|
|
- },
|
|
|
- handleDateClick(dateClickInfo) {
|
|
|
- console.log(dateClickInfo);
|
|
|
- },
|
|
|
- handleSizeChange(val) {
|
|
|
- this.searchForm.pageSize = val;
|
|
|
- this.getAppointList();
|
|
|
- },
|
|
|
- handleCurrentChange(val) {
|
|
|
- this.searchForm.pageNum = val;
|
|
|
- this.getAppointList();
|
|
|
- },
|
|
|
- },
|
|
|
- };
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-<<<<<<< Updated upstream
|
|
|
-.center-banner {
|
|
|
- background: url(../assets/img/login-bg.png) top no-repeat;
|
|
|
- height: 240px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .content {
|
|
|
- height: 180px;
|
|
|
- width: 1200px;
|
|
|
- border-radius: 16px;
|
|
|
- background-color: rgba($color: #fff, $alpha: 0.5);
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- padding: 0 40px;
|
|
|
- .user {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- height: 100px;
|
|
|
- width: 100px;
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- p {
|
|
|
- height: 100px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- margin-left: 12px;
|
|
|
- span:nth-child(1) {
|
|
|
- font-weight: bold;
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- span:nth-child(3) {
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .btns {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- > p {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin-right: 20px;
|
|
|
- line-height: 30px;
|
|
|
- font-weight: bold;
|
|
|
- span {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: bold;
|
|
|
- color: #1d66dc;
|
|
|
- font-style: italic;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-.flex {
|
|
|
- width: 100%;
|
|
|
- flex-wrap: wrap;
|
|
|
- .el-card {
|
|
|
- flex: 0 0 calc(50% - 14px);
|
|
|
- height: 400px;
|
|
|
- ::v-deep .el-card__body {
|
|
|
- padding: 10px;
|
|
|
- height: calc(100% - 79px);
|
|
|
- }
|
|
|
- &.calendar {
|
|
|
- height: 500px;
|
|
|
- ul {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- height: 130px;
|
|
|
- li {
|
|
|
- font-size: 14px;
|
|
|
-=======
|
|
|
- .flex {
|
|
|
- width: 100%;
|
|
|
- flex-wrap: wrap;
|
|
|
- .el-card {
|
|
|
- flex: 0 0 calc(50% - 14px);
|
|
|
- height: 400px;
|
|
|
- ::v-deep .el-card__body {
|
|
|
- padding: 10px;
|
|
|
- height: calc(100% - 79px);
|
|
|
- }
|
|
|
- &.calendar {
|
|
|
- height: 500px;
|
|
|
- ul {
|
|
|
->>>>>>> Stashed changes
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- height: 130px;
|
|
|
- li {
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- &:before {
|
|
|
- content: "";
|
|
|
- display: inline-block;
|
|
|
- width: 6px;
|
|
|
- height: 6px;
|
|
|
- border-radius: 3px;
|
|
|
- background-color: #a30014;
|
|
|
- margin-right: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- &.cost {
|
|
|
- height: 300px;
|
|
|
- }
|
|
|
- }
|
|
|
- &.technical .el-card {
|
|
|
- height: auto;
|
|
|
- ::v-deep .el-card__body {
|
|
|
- height: auto;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .cage-list {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- list-style: none;
|
|
|
- li {
|
|
|
- height: 160px;
|
|
|
- width: 221px;
|
|
|
- font-size: 14px;
|
|
|
- border: 1px solid #ebeef5;
|
|
|
- border-radius: 6px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- padding: 10px;
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- &:nth-child(n + 3) {
|
|
|
- margin-top: 4px;
|
|
|
- }
|
|
|
- header {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- p {
|
|
|
- color: #1d66dc;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .platform-list {
|
|
|
- height: 100%;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- li {
|
|
|
- flex: 1;
|
|
|
- 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 {
|
|
|
- display: flex;
|
|
|
- .text {
|
|
|
- flex: 1;
|
|
|
- font-size: 14px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- header {
|
|
|
- color: #1d66dc;
|
|
|
- }
|
|
|
- ul {
|
|
|
- margin-top: 12px;
|
|
|
- flex: 1;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-around;
|
|
|
- }
|
|
|
- li {
|
|
|
- background-color: #e4b5bb;
|
|
|
- border-radius: 4px;
|
|
|
- padding: 4px 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- #chart {
|
|
|
- width: 233px;
|
|
|
- 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, 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .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;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- }
|
|
|
- .date {
|
|
|
- margin: 0 10px;
|
|
|
- font-size: 14px;
|
|
|
- color: #585858;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .week {
|
|
|
- color: #2c78ff;
|
|
|
- padding-left: 6px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .table-wrap {
|
|
|
- flex: 1;
|
|
|
- margin: 20px 0 0;
|
|
|
- // overflow: hidden;
|
|
|
- }
|
|
|
- .pagination {
|
|
|
- width: 100%;
|
|
|
- height: 50px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: flex-end;
|
|
|
- }
|
|
|
-</style>
|
liuzhenlin