labsop_website/src/views/PersonalCenter.vue

<template>
  <div class="news">
    <Banner :img="require('@/assets/img/news.png')" />
    <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 class="w100">
          <el-row class="flex mt12"
                  :gutter="12">
            <el-col :span="12">
              <el-card header="科研仪器">

              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card header="通知公告">

              </el-card>
            </el-col>
          </el-row>
          <el-row class="flex mt12"
                  :gutter="12">
            <el-col :span="12">
              <el-card header="科研平台">
                <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>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>2天18小时</p>
                      </header>
                      小计：¥300
                    </div>
                  </li>
                </ul>
              </el-card>
              <el-card header="笼位管理(共3个)"
                       class="mt12">
                <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 header="日程安排"
                       class="calendar">
                <FullCalendar class="fullCalendar"
                              ref="fullCalendar" :options="calendarOptions" />
                <ul>
                  <li>仪器：需要进行第二期临床实验使用仪器</li>
                  <li>平台：需要使用平台查找相应的案例</li>
                  <li>笼位：进行第二次动物实验</li>
                  <li>技术：约李老师进行第三次技术咨询</li>
                </ul>
              </el-card>
              <el-card header="费用统计"
                       class="mt12 cost">
                <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"
                  :gutter="12">
            <el-col :span="24">
              <el-card header="日程安排">

              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-container>
    </div>
  </div>
</template>

<script>
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'
export default {
  name: "PersonalCenter",
  components: {
    Banner,
    LeftTabs,
    RightContent,
    FullCalendar,
  },
  data() {
    return {
      active: -1,
      loading: true,
      selectTab: {},
      options: [
        {
          label: "工作台",
        },
        {
          label: "预约信息",
        },
        {
          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插件
      },
    };
  },
  mounted() {
    this.tabSelect(this.options[0], 0);
    this.initChart();
  },
  methods: {
    // 选择tab
    tabSelect(row, index) {
      this.active = index;
      this.selectTab = { ...row };
      this.breadList = [...this.routeList, { name: this.selectTab.label }];
    },
    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)
    },
  },
};
</script>

<style lang="scss" scoped>
.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;
          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;
    }
  }
}
.cage-list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  li {
    height: 138px;
    width: 198px;
    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;
  }
}
.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;
  }
}
</style>