From 0375b65df483fce057dd34a59ecfa92de98061cc Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Wed, 18 Dec 2019 22:31:26 +0800
Subject: [PATCH 1/7] Add monitor mode

---
 src/renderer/api/library.api.js               |  12 +-
 src/renderer/api/mock/gitcontents.api.js      |   2 +-
 src/renderer/api/mock/library.api.js          |   2 +-
 .../components/Body/Monitor/index.vue         | 255 ++++++++++++++
 src/renderer/components/Body/Monitor/mixin.js | 316 ++++++++++++++++++
 src/renderer/components/Body/index.vue        | 149 +++++++--
 src/renderer/styles/element-ui.scss           |  10 +
 7 files changed, 710 insertions(+), 36 deletions(-)
 create mode 100644 src/renderer/components/Body/Monitor/index.vue
 create mode 100644 src/renderer/components/Body/Monitor/mixin.js

diff --git a/src/renderer/api/library.api.js b/src/renderer/api/library.api.js
index 8be1a03b..af5cf281 100644
--- a/src/renderer/api/library.api.js
+++ b/src/renderer/api/library.api.js
@@ -91,7 +91,9 @@ export default {
           })
       })
       if (responseData.data.status === 'success' && responseData.data.data.token) {
-        updateToken(responseData.data.data.token)
+        if (updateToken) {
+          updateToken(responseData.data.data.token)
+        }
         return request({
           url: urls.library.Book.url(),
           method: urls.library.Book.method,
@@ -102,11 +104,15 @@ export default {
         })
       } else {
         const message = '网络拥堵，请重新预约'
-        errorCallback(message)
+        if (errorCallback) {
+          errorCallback(message)
+        }
         return Promise.reject(Error(message))
       }
     } catch (error) {
-      errorCallback(error.message)
+      if (errorCallback) {
+        errorCallback(error.message)
+      }
       return Promise.reject(error)
     }
   },
diff --git a/src/renderer/api/mock/gitcontents.api.js b/src/renderer/api/mock/gitcontents.api.js
index ccb155b7..5d830d08 100644
--- a/src/renderer/api/mock/gitcontents.api.js
+++ b/src/renderer/api/mock/gitcontents.api.js
@@ -91,7 +91,7 @@ export default {
     return {
       'status': 'success',
       'code': 0,
-      'locked': true,
+      'locked': false,
       'message': '正在测试，停止使用',
       'time': '禁用时间：一天'
     }
diff --git a/src/renderer/api/mock/library.api.js b/src/renderer/api/mock/library.api.js
index 8332585e..c57aed33 100644
--- a/src/renderer/api/mock/library.api.js
+++ b/src/renderer/api/mock/library.api.js
@@ -20,7 +20,7 @@ export default {
   Book: config => {
     console.log('Mock: ' + config.url)
     var num = Math.random()
-    if (num > 0.05) {
+    if (num > 0.5) {
       return {'status': 'fail', 'data': null, 'message': '预约失败，请尽快选择其他时段或座位', 'code': '1'}
     } else {
       return {'status': 'success', 'data': {'id': 3442608, 'receipt': '0175-608-1', 'onDate': '2018 年 07 月 23 日', 'begin': '21 : 30', 'end': '22 : 30', 'location': '信息馆2层东区东自然科学区，座位号009', 'checkedIn': false}, 'message': '', 'code': '0'}
diff --git a/src/renderer/components/Body/Monitor/index.vue b/src/renderer/components/Body/Monitor/index.vue
new file mode 100644
index 00000000..211976ed
--- /dev/null
+++ b/src/renderer/components/Body/Monitor/index.vue
@@ -0,0 +1,255 @@
+<template>
+  <div class="dialog">
+    <div class="warp-content">
+      <el-form
+        status-icon
+        label-width="40px"
+        class="flex-row">
+        <span class="form-item title">
+          监控器
+        </span>
+        <div class="date-info">
+          <span class="date">
+            <el-tag v-if="date" type="warning">{{date}}</el-tag>
+          </span>
+          <span class="time">
+            <el-tag v-if="beginTime.length > 0" type="success">{{beginTime[0].label}}</el-tag>
+            <span class="text">-</span>
+            <el-tag v-if="endTime.length > 0" type="success">{{endTime[0].label}}</el-tag>
+          </span>
+        </div>
+        <div class="room-info">
+          <span class="room">
+            <el-tag v-if="room.length > 0" class="tag">{{room[0][1]}}</el-tag>
+          </span>
+          <span class="options">
+            <el-tag v-if="battery" type="success">电源(已选)</el-tag>
+            <el-tag v-else type="info">电源(未选)</el-tag>
+            <el-tag v-if="window" type="warning">靠窗(已选)</el-tag>
+            <el-tag v-else type="info">靠窗(未选)</el-tag>
+          </span>
+        </div>
+        <el-form-item label="监控间隔(毫秒)" label-width="auto" class="form-item">
+          <el-input-number
+            v-model="interval"
+            controls-position="right"
+            :disabled="isWorking"
+            :min="1000"
+            :max="10000"
+            @change="warnIntervalTooLow()">
+          </el-input-number>
+        </el-form-item>
+        <el-form-item label="监控时长(分钟)" label-width="auto" class="form-item">
+          <el-input-number
+            v-model="last"
+            controls-position="right"
+            :disabled="isWorking"
+            :min="1"
+            :max="360">
+          </el-input-number>
+        </el-form-item>
+        <div class="form-item" style="text-align: center;">
+          <el-button
+            :disabled="isWorking"
+            type="primary"
+            :class="isWorking ? 'button-disabled' : 'save-button'"
+            :icon="isWorking ? 'el-icon-loading' : null"
+            :style="isWorking ? 'width: 100px;':'width: 80px;'"
+            @click="okBtnClicked()">
+            {{okBtnText}}
+          </el-button>
+          <el-button
+            type="primary"
+            class="cancel-button"
+            @click="cancelBtnClicked()">
+            {{cancelBtnText}}
+          </el-button>
+        </div>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'monitor-form',
+  props: {
+    room: {
+      type: Array,
+      require: true
+    },
+    date: {
+      type: String,
+      require: true
+    },
+    beginTime: {
+      type: Array,
+      require: true
+    },
+    endTime: {
+      type: Array,
+      require: true
+    },
+    battery: {
+      type: Boolean,
+      require: true
+    },
+    window: {
+      type: Boolean,
+      require: true
+    },
+    okBtnText: {
+      type: String,
+      require: true
+    },
+    cancelBtnText: {
+      type: String,
+      require: true
+    },
+    workingStatus: {
+      type: String,
+      require: true
+    },
+    isWorking: {
+      type: Boolean,
+      require: true
+    }
+  },
+  data () {
+    return {
+      interval: 1500,
+      last: 60,
+      intervalTooLowWarned: false
+    }
+  },
+  methods: {
+    okBtnClicked () {
+      this.$emit('btnClick', {
+        btn: 'ok',
+        data: {
+          interval: this.interval,
+          last: this.last
+        }
+      })
+    },
+    cancelBtnClicked () {
+      this.$emit('btnClick', {
+        btn: 'cancel'
+      })
+    },
+    warnIntervalTooLow () {
+      if (!this.intervalTooLowWarned) {
+        if (this.interval < 1500) {
+          this.$message({
+            type: 'warning',
+            duration: '0',
+            showClose: true,
+            message: '敬告：监控间隔过低可能会被后台识别，有封号风险'
+          })
+        }
+        this.intervalTooLowWarned = true
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/styles/index.scss';
+$warp-width: 280px;
+$warp-height: 300px;
+$warp-padding: 0px;
+.dialog {
+  z-index: 15;
+  padding: $warp-padding;
+  background: $bg-color-2;
+  border-radius: 6px;
+  position: fixed;
+  width: $warp-width;
+  height: $warp-height;
+  top: $layout-header-h + ($layout-height - $layout-header-h - $layout-footer-h - $warp-height) / 2;
+  left: ($layout-width - $warp-width)/2 - $warp-padding;
+	box-shadow: 0 0px 14px black;
+  .warp-content {
+    width: 100%;
+    height: 100%;
+    border-radius: 4px;
+    text-align: center;
+    .title {
+      display: block;
+      color: $text-color;
+      font-size: $text-size-large + 4;
+    }
+    .date-info {
+      margin: 6px 17px 10px 17px;
+      display: flex;
+      justify-content: flex-start;
+      cursor: default !important;
+      .text {
+        color: $text-color
+      }
+      .time {
+        .text {
+          color: $text-color
+        }
+      }
+      .date {
+        margin-left: 14px;
+        width: 100px;
+      }
+    }
+    .room-info {
+      margin-bottom: 6px;
+      cursor: default !important;
+      .room {
+        .tag {
+          padding-left: 10px;
+          padding-right: 10px;
+          width: 96px;
+          max-width: 96px;
+        }
+      }
+    }
+    .form-item {
+      margin: 10px 17px;
+      border: none!important;
+      .save-button {
+        margin: 10px 8px;
+        width: 80px;
+        color: $text-color;
+        background: $primary-button-background-blur!important;
+        border-color: $primary-color!important;
+        &:hover {
+          background: $primary-button-background-hover!important;
+        }
+        &:active {
+          background: $primary-button-background-click!important;
+        }
+      }
+      .cancel-button {
+        margin: 10px 8px;
+        width: 80px;
+        color: $text-color;
+        background: $cancel-button-background-blur!important;
+        border-color: $cancel-button-border!important;
+        &:hover {
+          background: $cancel-button-background-hover!important;
+        }
+        &:active {
+          background: $cancel-button-background-click!important;
+        }
+      }
+      .button-disabled {
+        margin: 10px 8px;
+        width: 80px;
+        color: $text-color;
+        background: $disabled-button-background-blur!important;
+        border-color: $disabled-button-border!important;
+      }
+    }
+  }
+}
+span {
+  cursor: default!important;
+}
+</style>
diff --git a/src/renderer/components/Body/Monitor/mixin.js b/src/renderer/components/Body/Monitor/mixin.js
new file mode 100644
index 00000000..2ac50c65
--- /dev/null
+++ b/src/renderer/components/Body/Monitor/mixin.js
@@ -0,0 +1,316 @@
+import libraryRestApi from '@/api/library.api'
+import usageApi from '@/api/usage.api'
+
+const monitorStatuses = {
+  unstart: 'unstart', // 未开始
+  starting: 'starting', // 正在启动
+  checking: 'checking', // 检测中
+  checkFailed: 'checkingFailed', // 检测失败
+  checkSuccessfulYes: 'checkSuccessfulYes', // 检测成功，有空位
+  checkSuccessfulNo: 'checkSuccessfulNo', // 检测成功，无空位
+  grabingSeat: 'grabingSeat', // 正在抢座
+  grabFailed: 'grabFailed', // 抢座失败
+  grabSuccessful: 'grabSuccessful', // 抢座成功,
+  fatalError: 'fatalError' // 遇到无法继续监控的错误
+}
+
+const emptyMessage = '无具体信息'
+
+var monitor = {
+  data () {
+    return {
+      stopMonitorFlag: false,
+      monitorIntervalTimer: null,
+      monitorLastTimer: null,
+      monitorStatus: monitorStatuses.unstart,
+      lastErrorTime: (new Date()).getTime()
+    }
+  },
+  // watch: {
+  //   monitorStatus () {
+  //     console.log('monitorStatus', this.monitorStatus)
+  //   }
+  // },
+  computed: {
+    monitorOkBtntext () {
+      switch (this.monitorStatus) {
+        case monitorStatuses.unstart:
+          return '启动'
+        case monitorStatuses.starting:
+          return '正在启动'
+        case monitorStatuses.checking:
+          return '正在检测'
+        case monitorStatuses.checkFailed:
+          return '本次出错'
+        case monitorStatuses.checkSuccessfulYes:
+          return `${this.seatsForMonitorGrab.length} 座可约`
+        case monitorStatuses.checkSuccessfulNo:
+          return '暂无空位'
+        case monitorStatuses.grabingSeat:
+          return '正在预约'
+        case monitorStatuses.grabFailed:
+          return '预约失败'
+        case monitorStatuses.grabSuccessful:
+          return '预约成功'
+        case monitorStatuses.fatalError:
+          return '暂停监控'
+        default:
+          return '出现 bug'
+      }
+    },
+    monitorCancelBtntext () {
+      switch (this.monitorStatus) {
+        case monitorStatuses.unstart:
+          return '退出'
+        case monitorStatuses.starting:
+        case monitorStatuses.checking:
+        case monitorStatuses.checkFailed:
+        case monitorStatuses.checkSuccessfulYes:
+        case monitorStatuses.checkSuccessfulNo:
+        case monitorStatuses.grabingSeat:
+        case monitorStatuses.grabFailed:
+        case monitorStatuses.grabSuccessful:
+        case monitorStatuses.fatalError:
+          return '停止'
+        default:
+          return '出现 bug'
+      }
+    },
+    isMonitorWorking () {
+      switch (this.monitorStatus) {
+        case monitorStatuses.unstart:
+          return false
+        case monitorStatuses.starting:
+        case monitorStatuses.checking:
+        case monitorStatuses.checkFailed:
+        case monitorStatuses.checkSuccessfulYes:
+        case monitorStatuses.checkSuccessfulNo:
+        case monitorStatuses.grabingSeat:
+        case monitorStatuses.grabFailed:
+        case monitorStatuses.grabSuccessful:
+        case monitorStatuses.fatalError:
+          return true
+        default:
+          return true
+      }
+    },
+    checkingAvailable () {
+      switch (this.monitorStatus) {
+        case monitorStatuses.unstart:
+        case monitorStatuses.checkSuccessfulYes:
+        case monitorStatuses.grabingSeat:
+        case monitorStatuses.grabSuccessful:
+        case monitorStatuses.fatalError:
+          return false
+        case monitorStatuses.starting:
+        case monitorStatuses.checking:
+        case monitorStatuses.checkFailed:
+        case monitorStatuses.checkSuccessfulNo:
+        case monitorStatuses.grabFailed:
+        default:
+          return true
+      }
+    },
+    seatsForMonitorGrab () {
+      return this.seatsForSelect.filter(seat => {
+        return this.seatsForSelectIsAvailable.includes(seat.id)
+      })
+    }
+  },
+  methods: {
+    async startMonitor (interval, last) {
+      this.resetMonitor()
+      this.stopMonitorFlag = false
+      this.updateMonitorStatus(monitorStatuses.starting)
+      if (await this.validateBeforeStart()) {
+        this.$message({
+          type: 'success',
+          duration: '800',
+          message: '监控器已启动'
+        })
+        this.monitorIntervalTimer = setInterval(this.monitorIntervalTimerCB, interval)
+        this.monitorLastTimer = setTimeout(this.lastTimeArrivedCB, last * 60000)
+      } else {
+        this.stopMonitor()
+      }
+    },
+    stopMonitor () {
+      this.stopMonitorFlag = true
+      this.resetMonitor()
+    },
+    resetMonitor () {
+      this.updateMonitorStatus(monitorStatuses.unstart)
+      if (this.monitorIntervalTimer) {
+        clearInterval(this.monitorIntervalTimer)
+        this.monitorIntervalTimer = null
+      }
+      if (this.monitorLastTimer) {
+        clearTimeout(this.monitorLastTimer)
+        this.monitorLastTimer = null
+      }
+    },
+    async validateBeforeStart () {
+      try {
+        var { data } = await libraryRestApi.History(1, 50, this.userToken)
+        if (data.status === 'success') {
+          var reservations = data.data.reservations
+          for (var i = 0; i < reservations.length; i++) {
+            // 已有座位
+            if (reservations[i].stat === 'RESERVE' ||
+              reservations[i].stat === 'CHECK_IN' ||
+              reservations[i].stat === 'AWAY') {
+              this.$message({
+                type: 'error',
+                duration: 0,
+                showClose: true,
+                message: '启动失败：当前有已预约或未释放的座位，请在预约历史界面查看'
+              })
+              return false
+            }
+          }
+          return true
+        } else {
+          this.$message({
+            type: 'error',
+            duration: 0,
+            showClose: true,
+            message: '启动失败：检查预约历史信息失败，请尝试重新启动监视器'
+          })
+          return false
+        }
+      } catch (e) {
+        this.$message({
+          type: 'error',
+          duration: 0,
+          showClose: true,
+          message: '启动失败：检查预约历史信息出现错误，请尝试重新启动监视器' + e.message
+        })
+        return false
+      }
+    },
+    monitorIntervalTimerCB () {
+      if (this.stopMonitorFlag) {
+        return
+      }
+      if (this.checkingAvailable) {
+        this.updateMonitorStatus(monitorStatuses.checking)
+        this.updateSeatsStatus(this.monitorSuccessCB, this.monitorFailCB)
+      }
+    },
+    lastTimeArrivedCB () {
+      if (this.stopMonitorFlag) {
+        return
+      }
+      this.resetMonitor()
+    },
+    monitorSuccessCB (seatIds) {
+      // seatIds 和 this.seatsForSelectIsAvailable 相同
+      // this.seatsForMonitorGrab 是 this.seatsForSelectIsAvailable 的计算属性
+      if (this.stopMonitorFlag) {
+        return
+      }
+      if (this.seatsForMonitorGrab.length > 0) {
+        this.updateMonitorStatus(monitorStatuses.checkSuccessfulYes)
+        this.monitorGrabSeat(this.seatsForMonitorGrab[0].id)
+      } else {
+        this.updateMonitorStatus(monitorStatuses.checkSuccessfulNo)
+      }
+    },
+    monitorFailCB (e) {
+      if (this.stopMonitorFlag) {
+        return
+      }
+      this.updateMonitorStatus(monitorStatuses.checkFailed)
+      this.showMonitorError(e.message)
+    },
+    showMonitorError (message) {
+      if (this.stopMonitorFlag) {
+        return
+      }
+      // 间隔五秒的错误才显示
+      var currentTime = (new Date()).getTime()
+      if (currentTime - this.lastErrorTime > 5000) {
+        this.lastErrorTime = currentTime
+        this.showError(message)
+      }
+    },
+    filterMonitorSeatsByWindowAndCharge (availableSeatIds) {
+      // 检查是否有电源和是否靠窗(this.seatsForSelect 已经过电源和靠窗筛选)
+      return this.seatsForSelect.filter(seat => {
+        return availableSeatIds.includes(seat.id)
+      })
+    },
+    monitorGrabSeat (seatId) {
+      if (this.stopMonitorFlag) {
+        return
+      }
+      libraryRestApi.Book(1, 2, this.form.beginTime, this.form.endTime, seatId, this.form.date, this.userAccount, this.userPasswd, this.updateToken).then((response) => {
+        if (response.data.status === 'success') {
+          this.updateMonitorStatus(monitorStatuses.grabSuccessful)
+          this.stopMonitor()
+          this.$notify({
+            title: '预约成功',
+            type: 'success',
+            dangerouslyUseHTMLString: true,
+            message: '<el-card shadow="never" style="line-height: 30px;">ID：' + response.data.data.id +
+              '<br/>凭证：' + response.data.data.receipt +
+              '<br/>日期：' + response.data.data.onDate +
+              '<br/>时间：' + response.data.data.begin + ' - ' + response.data.data.end +
+              '<br/>位置：' + response.data.data.location + '</el-card>',
+            duration: 0
+          })
+          this.windowsNotification(`预约成功 ${response.data.data.onDate} - ${response.data.data.begin} - ${response.data.data.end}`, `位置：${response.data.data.location}`)
+          usageApi.grabState(this.userAccount, true, 20)
+        } else {
+          if (response.data.code === 12 || response.data.code === '12') {
+            // 登录失败: 用户名或密码不正确
+            this.$message({
+              type: 'error',
+              duration: 0,
+              showClose: true,
+              message: response.data.message ? response.data.message : emptyMessage
+            })
+            this.updateMonitorStatus(monitorStatuses.fatalError)
+            this.stopMonitor()
+            this.windowsNotification('监控被迫暂停', response.data.message ? response.data.message : emptyMessage)
+            usageApi.grabState(this.userAccount, false, 21, response.data.message)
+          } else {
+            // 其他
+            this.updateMonitorStatus(monitorStatuses.grabFailed)
+            this.showMonitorError(response.data.message ? response.data.message : emptyMessage)
+          }
+        }
+      }).catch((error) => {
+        this.updateMonitorStatus(monitorStatuses.grabFailed)
+        this.showMonitorError(`预约出现异常：${error.message}`)
+      })
+    },
+    updateMonitorStatus (status) {
+      if (this.stopMonitorFlag) {
+        this.monitorStatus = monitorStatuses.unstart
+      } else {
+        this.monitorStatus = status
+      }
+    },
+    monitorFormBtnClicked (event) {
+      if (event.btn === 'ok') {
+        this.startMonitor(event.data.interval, event.data.last)
+      } else if (event.btn === 'cancel') {
+        if (this.isMonitorWorking) {
+          this.$message({
+            type: 'info',
+            duration: '1200',
+            message: '已停止监控器'
+          })
+          this.stopMonitor()
+        } else {
+          this.monitorActive = false
+        }
+      } else {
+        this.showMonitorError('组件通信有误')
+      }
+    }
+  }
+}
+
+export default monitor
diff --git a/src/renderer/components/Body/index.vue b/src/renderer/components/Body/index.vue
index a124a407..c6605763 100644
--- a/src/renderer/components/Body/index.vue
+++ b/src/renderer/components/Body/index.vue
@@ -31,17 +31,29 @@
           </el-select>
         </el-form-item>
         <el-form-item label="位置" :inline="true" style="flex-col">
-          <el-select v-model="form.seatNum" :placeholder="seatsForSelectIsAvailable?(seatsForSelectIsAvailable.length + ' 座可约'):'座位号'"
+          <el-select v-model="form.seatNum" :placeholder="seatsForSelectIsAvailable!==null?(`共 ${seatsForSelectIsAvailable.length} 座可约`):'数据加载中...'"
             :no-data-text="seatSelectNoDataMessage"
             class="num">
-            <el-option v-for="n in seatsForSelect.length" :key="n-1" :label="seatsForSelect[n-1].name" :value="seatsForSelect[n-1].id">
-              <span class="seat-option-left" :style="{color: getSeatColor(seatsForSelect[n-1].id)}">{{ seatsForSelect[n-1].name }}</span>
-              <span class="seat-option-right">
-                <svg class="seat-flag" :class="{'seat-flag-computer':seatsForSelect[n-1].computer}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M750.81728 870.23616 273.18272 870.23616c-18.80064 0-34.11968 34.11968-34.11968 34.11968l0 34.11968 545.87392 0 0-34.11968C784.93696 885.5552 769.61792 870.23616 750.81728 870.23616z"></path><path d="M853.17632 85.52448 170.82368 85.52448c-56.50432 0-102.35904 45.85472-102.35904 102.35904l0 477.65504c0 56.50432 45.85472 102.35904 102.35904 102.35904l238.81728 0 0 34.11968c0 18.80064 15.31904 34.11968 34.11968 34.11968l136.47872 0c18.80064 0 34.11968-17.59232 34.11968-34.11968 0-7.12704 0-20.84864 0-34.11968l238.81728 0c56.50432 0 102.35904-45.83424 102.35904-102.35904L955.53536 187.88352C955.53536 131.3792 909.68064 85.52448 853.17632 85.52448zM170.82368 631.41888c-18.80064 0-34.11968-15.31904-34.11968-34.11968L136.704 187.88352c0-18.80064 15.31904-34.11968 34.11968-34.11968l682.35264 0c18.80064 0 34.11968 15.31904 34.11968 34.11968l0 409.41568c0 18.80064-15.31904 34.11968-34.11968 34.11968L170.82368 631.41888zM853.13536 735.0272c-19.49696 0-35.30752-15.83104-35.30752-35.38944 0-19.51744 15.83104-35.38944 35.30752-35.38944 19.5584 0 35.38944 15.85152 35.38944 35.38944C888.5248 719.19616 872.69376 735.0272 853.13536 735.0272z"></path></svg>
-                <svg class="seat-flag" :class="{'seat-flag-power':seatsForSelect[n-1].power}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 313.585 313.585" style="enable-background:new 0 0 313.585 313.585;" xml:space="preserve"><g><path d="M260.287,69.487c3.541,0,6.427,2.879,6.427,6.427v26.511v12.854h12.854h14.737c3.541,0,6.427,2.879,6.427,6.427v70.168 c0,3.541-2.886,6.427-6.427,6.427h-14.737h-12.854v12.854v26.511c0,3.541-2.886,6.427-6.427,6.427H19.281 c-3.554,0-6.427-2.886-6.427-6.427V75.914c0-3.548,2.873-6.427,6.427-6.427H260.287 M260.287,56.633H19.281 C8.631,56.633,0,65.271,0,75.914v161.757c0,10.636,8.631,19.281,19.281,19.281h241.006c10.636,0,19.281-8.644,19.281-19.281V211.16 h14.737c10.636,0,19.28-8.644,19.28-19.281v-70.175c0-10.643-8.644-19.281-19.28-19.281h-14.737V75.914 C279.567,65.271,270.93,56.633,260.287,56.633L260.287,56.633z M44.454,99.475H78.69v114.616H44.454 C44.454,214.091,44.454,99.475,44.454,99.475z M96.422,99.475h34.236v114.616H96.422V99.475z M148.376,99.475h34.236v114.629 h-34.236V99.475z"/></g></svg>
-                <svg class="seat-flag" :class="{'seat-flag-window':seatsForSelect[n-1].window}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.34 511.34" style="enable-background:new 0 0 511.34 511.34;" xml:space="preserve"><g><path d="M497.78,326.334l-51.395-70.808l51.395-70.804c1.711-2.475,2.088-5.232,1.14-8.276c-0.767-2.859-2.669-4.762-5.712-5.712 l-83.363-27.408V55.959c0-3.044-1.242-5.519-3.721-7.421c-2.85-1.902-5.615-2.284-8.274-1.143l-83.367,26.836L263.092,3.427 C261.378,1.143,258.905,0,255.667,0c-3.234,0-5.708,1.146-7.422,3.427l-51.394,70.805l-83.368-26.836 c-2.662-1.142-5.424-0.76-8.28,1.143c-2.474,1.903-3.711,4.377-3.711,7.421v87.366l-83.367,27.408 c-3.044,0.953-4.947,2.856-5.708,5.712c-0.95,3.044-0.571,5.802,1.143,8.276l51.391,70.804L13.56,326.334 c-1.714,2.282-2.093,5.041-1.143,8.278c0.76,2.847,2.664,4.753,5.708,5.712l83.367,27.407v87.364c0,3.043,1.237,5.521,3.711,7.423 c2.856,1.903,5.618,2.283,8.28,1.144l83.368-26.837l51.394,70.805c1.902,2.471,4.377,3.71,7.422,3.71s5.522-1.239,7.424-3.71 l51.391-70.805l83.371,26.837c2.659,1.143,5.421,0.76,8.271-1.144c2.479-1.902,3.721-4.38,3.721-7.423v-87.364l83.363-27.407 c3.043-0.955,4.945-2.861,5.712-5.712C499.875,331.375,499.491,328.616,497.78,326.334z M407.134,319.339 c-8.661,20.27-20.365,37.78-35.114,52.534c-14.753,14.749-32.261,26.456-52.534,35.118c-20.266,8.657-41.541,12.99-63.811,12.99 c-22.27,0-43.537-4.333-63.81-12.99c-20.27-8.665-37.782-20.369-52.532-35.118c-14.75-14.754-26.455-32.265-35.117-52.534 c-8.66-20.272-12.99-41.541-12.99-63.813c0-22.27,4.331-43.537,12.99-63.81c8.658-20.27,20.367-37.781,35.117-52.534 c14.753-14.749,32.262-26.457,52.532-35.115c20.27-8.663,41.54-12.99,63.81-12.99c22.266,0,43.545,4.327,63.811,12.99 c20.273,8.658,37.781,20.366,52.534,35.115c14.749,14.753,26.453,32.264,35.114,52.534c8.658,20.273,12.991,41.543,12.991,63.81 C420.125,277.798,415.789,299.066,407.134,319.339z"/></g></svg>
-              </span>
-            </el-option>
+            <el-option-group :key="'seat-group-1'" label="可选功能">
+              <el-option :key="'seat-group-1-0'" :value="-1" label="监控模式">
+                <span class="seat-option-left" style="color: #e6e6e6">监控</span>
+                <span class="seat-option-right">
+                  <svg class="seat-flag" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M750.81728 870.23616 273.18272 870.23616c-18.80064 0-34.11968 34.11968-34.11968 34.11968l0 34.11968 545.87392 0 0-34.11968C784.93696 885.5552 769.61792 870.23616 750.81728 870.23616z"></path><path d="M853.17632 85.52448 170.82368 85.52448c-56.50432 0-102.35904 45.85472-102.35904 102.35904l0 477.65504c0 56.50432 45.85472 102.35904 102.35904 102.35904l238.81728 0 0 34.11968c0 18.80064 15.31904 34.11968 34.11968 34.11968l136.47872 0c18.80064 0 34.11968-17.59232 34.11968-34.11968 0-7.12704 0-20.84864 0-34.11968l238.81728 0c56.50432 0 102.35904-45.83424 102.35904-102.35904L955.53536 187.88352C955.53536 131.3792 909.68064 85.52448 853.17632 85.52448zM170.82368 631.41888c-18.80064 0-34.11968-15.31904-34.11968-34.11968L136.704 187.88352c0-18.80064 15.31904-34.11968 34.11968-34.11968l682.35264 0c18.80064 0 34.11968 15.31904 34.11968 34.11968l0 409.41568c0 18.80064-15.31904 34.11968-34.11968 34.11968L170.82368 631.41888zM853.13536 735.0272c-19.49696 0-35.30752-15.83104-35.30752-35.38944 0-19.51744 15.83104-35.38944 35.30752-35.38944 19.5584 0 35.38944 15.85152 35.38944 35.38944C888.5248 719.19616 872.69376 735.0272 853.13536 735.0272z"></path></svg>
+                  <svg class="seat-flag" :class="{'seat-flag-power':form.battery}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 313.585 313.585" style="enable-background:new 0 0 313.585 313.585;" xml:space="preserve"><g><path d="M260.287,69.487c3.541,0,6.427,2.879,6.427,6.427v26.511v12.854h12.854h14.737c3.541,0,6.427,2.879,6.427,6.427v70.168 c0,3.541-2.886,6.427-6.427,6.427h-14.737h-12.854v12.854v26.511c0,3.541-2.886,6.427-6.427,6.427H19.281 c-3.554,0-6.427-2.886-6.427-6.427V75.914c0-3.548,2.873-6.427,6.427-6.427H260.287 M260.287,56.633H19.281 C8.631,56.633,0,65.271,0,75.914v161.757c0,10.636,8.631,19.281,19.281,19.281h241.006c10.636,0,19.281-8.644,19.281-19.281V211.16 h14.737c10.636,0,19.28-8.644,19.28-19.281v-70.175c0-10.643-8.644-19.281-19.28-19.281h-14.737V75.914 C279.567,65.271,270.93,56.633,260.287,56.633L260.287,56.633z M44.454,99.475H78.69v114.616H44.454 C44.454,214.091,44.454,99.475,44.454,99.475z M96.422,99.475h34.236v114.616H96.422V99.475z M148.376,99.475h34.236v114.629 h-34.236V99.475z"/></g></svg>
+                  <svg class="seat-flag" :class="{'seat-flag-window':form.sun}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.34 511.34" style="enable-background:new 0 0 511.34 511.34;" xml:space="preserve"><g><path d="M497.78,326.334l-51.395-70.808l51.395-70.804c1.711-2.475,2.088-5.232,1.14-8.276c-0.767-2.859-2.669-4.762-5.712-5.712 l-83.363-27.408V55.959c0-3.044-1.242-5.519-3.721-7.421c-2.85-1.902-5.615-2.284-8.274-1.143l-83.367,26.836L263.092,3.427 C261.378,1.143,258.905,0,255.667,0c-3.234,0-5.708,1.146-7.422,3.427l-51.394,70.805l-83.368-26.836 c-2.662-1.142-5.424-0.76-8.28,1.143c-2.474,1.903-3.711,4.377-3.711,7.421v87.366l-83.367,27.408 c-3.044,0.953-4.947,2.856-5.708,5.712c-0.95,3.044-0.571,5.802,1.143,8.276l51.391,70.804L13.56,326.334 c-1.714,2.282-2.093,5.041-1.143,8.278c0.76,2.847,2.664,4.753,5.708,5.712l83.367,27.407v87.364c0,3.043,1.237,5.521,3.711,7.423 c2.856,1.903,5.618,2.283,8.28,1.144l83.368-26.837l51.394,70.805c1.902,2.471,4.377,3.71,7.422,3.71s5.522-1.239,7.424-3.71 l51.391-70.805l83.371,26.837c2.659,1.143,5.421,0.76,8.271-1.144c2.479-1.902,3.721-4.38,3.721-7.423v-87.364l83.363-27.407 c3.043-0.955,4.945-2.861,5.712-5.712C499.875,331.375,499.491,328.616,497.78,326.334z M407.134,319.339 c-8.661,20.27-20.365,37.78-35.114,52.534c-14.753,14.749-32.261,26.456-52.534,35.118c-20.266,8.657-41.541,12.99-63.811,12.99 c-22.27,0-43.537-4.333-63.81-12.99c-20.27-8.665-37.782-20.369-52.532-35.118c-14.75-14.754-26.455-32.265-35.117-52.534 c-8.66-20.272-12.99-41.541-12.99-63.813c0-22.27,4.331-43.537,12.99-63.81c8.658-20.27,20.367-37.781,35.117-52.534 c14.753-14.749,32.262-26.457,52.532-35.115c20.27-8.663,41.54-12.99,63.81-12.99c22.266,0,43.545,4.327,63.811,12.99 c20.273,8.658,37.781,20.366,52.534,35.115c14.749,14.753,26.453,32.264,35.114,52.534c8.658,20.273,12.991,41.543,12.991,63.81 C420.125,277.798,415.789,299.066,407.134,319.339z"/></g></svg>
+                </span>
+              </el-option>
+            </el-option-group>
+            <el-option-group :key="'seat-group-2'" :label="seatsForSelectIsAvailable!==null ? ('共 ' + seatsForSelectIsAvailable.length + ' 座可约') : '数据加载中...'">
+              <el-option v-for="n in seatsForSelect.length" :key="n-1" :label="seatsForSelect[n-1].name" :value="seatsForSelect[n-1].id">
+                <span class="seat-option-left" :style="{color: getSeatColor(seatsForSelect[n-1].id)}">{{ seatsForSelect[n-1].name }}</span>
+                <span class="seat-option-right">
+                  <svg class="seat-flag" :class="{'seat-flag-computer':seatsForSelect[n-1].computer}" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M750.81728 870.23616 273.18272 870.23616c-18.80064 0-34.11968 34.11968-34.11968 34.11968l0 34.11968 545.87392 0 0-34.11968C784.93696 885.5552 769.61792 870.23616 750.81728 870.23616z"></path><path d="M853.17632 85.52448 170.82368 85.52448c-56.50432 0-102.35904 45.85472-102.35904 102.35904l0 477.65504c0 56.50432 45.85472 102.35904 102.35904 102.35904l238.81728 0 0 34.11968c0 18.80064 15.31904 34.11968 34.11968 34.11968l136.47872 0c18.80064 0 34.11968-17.59232 34.11968-34.11968 0-7.12704 0-20.84864 0-34.11968l238.81728 0c56.50432 0 102.35904-45.83424 102.35904-102.35904L955.53536 187.88352C955.53536 131.3792 909.68064 85.52448 853.17632 85.52448zM170.82368 631.41888c-18.80064 0-34.11968-15.31904-34.11968-34.11968L136.704 187.88352c0-18.80064 15.31904-34.11968 34.11968-34.11968l682.35264 0c18.80064 0 34.11968 15.31904 34.11968 34.11968l0 409.41568c0 18.80064-15.31904 34.11968-34.11968 34.11968L170.82368 631.41888zM853.13536 735.0272c-19.49696 0-35.30752-15.83104-35.30752-35.38944 0-19.51744 15.83104-35.38944 35.30752-35.38944 19.5584 0 35.38944 15.85152 35.38944 35.38944C888.5248 719.19616 872.69376 735.0272 853.13536 735.0272z"></path></svg>
+                  <svg class="seat-flag" :class="{'seat-flag-power':seatsForSelect[n-1].power}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 313.585 313.585" style="enable-background:new 0 0 313.585 313.585;" xml:space="preserve"><g><path d="M260.287,69.487c3.541,0,6.427,2.879,6.427,6.427v26.511v12.854h12.854h14.737c3.541,0,6.427,2.879,6.427,6.427v70.168 c0,3.541-2.886,6.427-6.427,6.427h-14.737h-12.854v12.854v26.511c0,3.541-2.886,6.427-6.427,6.427H19.281 c-3.554,0-6.427-2.886-6.427-6.427V75.914c0-3.548,2.873-6.427,6.427-6.427H260.287 M260.287,56.633H19.281 C8.631,56.633,0,65.271,0,75.914v161.757c0,10.636,8.631,19.281,19.281,19.281h241.006c10.636,0,19.281-8.644,19.281-19.281V211.16 h14.737c10.636,0,19.28-8.644,19.28-19.281v-70.175c0-10.643-8.644-19.281-19.28-19.281h-14.737V75.914 C279.567,65.271,270.93,56.633,260.287,56.633L260.287,56.633z M44.454,99.475H78.69v114.616H44.454 C44.454,214.091,44.454,99.475,44.454,99.475z M96.422,99.475h34.236v114.616H96.422V99.475z M148.376,99.475h34.236v114.629 h-34.236V99.475z"/></g></svg>
+                  <svg class="seat-flag" :class="{'seat-flag-window':seatsForSelect[n-1].window}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.34 511.34" style="enable-background:new 0 0 511.34 511.34;" xml:space="preserve"><g><path d="M497.78,326.334l-51.395-70.808l51.395-70.804c1.711-2.475,2.088-5.232,1.14-8.276c-0.767-2.859-2.669-4.762-5.712-5.712 l-83.363-27.408V55.959c0-3.044-1.242-5.519-3.721-7.421c-2.85-1.902-5.615-2.284-8.274-1.143l-83.367,26.836L263.092,3.427 C261.378,1.143,258.905,0,255.667,0c-3.234,0-5.708,1.146-7.422,3.427l-51.394,70.805l-83.368-26.836 c-2.662-1.142-5.424-0.76-8.28,1.143c-2.474,1.903-3.711,4.377-3.711,7.421v87.366l-83.367,27.408 c-3.044,0.953-4.947,2.856-5.708,5.712c-0.95,3.044-0.571,5.802,1.143,8.276l51.391,70.804L13.56,326.334 c-1.714,2.282-2.093,5.041-1.143,8.278c0.76,2.847,2.664,4.753,5.708,5.712l83.367,27.407v87.364c0,3.043,1.237,5.521,3.711,7.423 c2.856,1.903,5.618,2.283,8.28,1.144l83.368-26.837l51.394,70.805c1.902,2.471,4.377,3.71,7.422,3.71s5.522-1.239,7.424-3.71 l51.391-70.805l83.371,26.837c2.659,1.143,5.421,0.76,8.271-1.144c2.479-1.902,3.721-4.38,3.721-7.423v-87.364l83.363-27.407 c3.043-0.955,4.945-2.861,5.712-5.712C499.875,331.375,499.491,328.616,497.78,326.334z M407.134,319.339 c-8.661,20.27-20.365,37.78-35.114,52.534c-14.753,14.749-32.261,26.456-52.534,35.118c-20.266,8.657-41.541,12.99-63.811,12.99 c-22.27,0-43.537-4.333-63.81-12.99c-20.27-8.665-37.782-20.369-52.532-35.118c-14.75-14.754-26.455-32.265-35.117-52.534 c-8.66-20.272-12.99-41.541-12.99-63.813c0-22.27,4.331-43.537,12.99-63.81c8.658-20.27,20.367-37.781,35.117-52.534 c14.753-14.749,32.262-26.457,52.532-35.115c20.27-8.663,41.54-12.99,63.81-12.99c22.266,0,43.545,4.327,63.811,12.99 c20.273,8.658,37.781,20.366,52.534,35.115c14.749,14.753,26.453,32.264,35.114,52.534c8.658,20.273,12.991,41.543,12.991,63.81 C420.125,277.798,415.789,299.066,407.134,319.339z"/></g></svg>
+                </span>
+              </el-option>
+            </el-option-group>
           </el-select>
           <el-button class="toggle-button" @click="sunButtonClicked()">
             <svg class="icon" :class="form.sun?'sun-checked':'sun-unchecked'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 511.34 511.34" style="enable-background:new 0 0 511.34 511.34;" xml:space="preserve"><g><path d="M497.78,326.334l-51.395-70.808l51.395-70.804c1.711-2.475,2.088-5.232,1.14-8.276c-0.767-2.859-2.669-4.762-5.712-5.712 l-83.363-27.408V55.959c0-3.044-1.242-5.519-3.721-7.421c-2.85-1.902-5.615-2.284-8.274-1.143l-83.367,26.836L263.092,3.427 C261.378,1.143,258.905,0,255.667,0c-3.234,0-5.708,1.146-7.422,3.427l-51.394,70.805l-83.368-26.836 c-2.662-1.142-5.424-0.76-8.28,1.143c-2.474,1.903-3.711,4.377-3.711,7.421v87.366l-83.367,27.408 c-3.044,0.953-4.947,2.856-5.708,5.712c-0.95,3.044-0.571,5.802,1.143,8.276l51.391,70.804L13.56,326.334 c-1.714,2.282-2.093,5.041-1.143,8.278c0.76,2.847,2.664,4.753,5.708,5.712l83.367,27.407v87.364c0,3.043,1.237,5.521,3.711,7.423 c2.856,1.903,5.618,2.283,8.28,1.144l83.368-26.837l51.394,70.805c1.902,2.471,4.377,3.71,7.422,3.71s5.522-1.239,7.424-3.71 l51.391-70.805l83.371,26.837c2.659,1.143,5.421,0.76,8.271-1.144c2.479-1.902,3.721-4.38,3.721-7.423v-87.364l83.363-27.407 c3.043-0.955,4.945-2.861,5.712-5.712C499.875,331.375,499.491,328.616,497.78,326.334z M407.134,319.339 c-8.661,20.27-20.365,37.78-35.114,52.534c-14.753,14.749-32.261,26.456-52.534,35.118c-20.266,8.657-41.541,12.99-63.811,12.99 c-22.27,0-43.537-4.333-63.81-12.99c-20.27-8.665-37.782-20.369-52.532-35.118c-14.75-14.754-26.455-32.265-35.117-52.534 c-8.66-20.272-12.99-41.541-12.99-63.813c0-22.27,4.331-43.537,12.99-63.81c8.658-20.27,20.367-37.781,35.117-52.534 c14.753-14.749,32.262-26.457,52.532-35.115c20.27-8.663,41.54-12.99,63.81-12.99c22.266,0,43.545,4.327,63.811,12.99 c20.273,8.658,37.781,20.366,52.534,35.115c14.749,14.753,26.453,32.264,35.114,52.534c8.658,20.273,12.991,41.543,12.991,63.81 C420.125,277.798,415.789,299.066,407.134,319.339z"/></g></svg>
@@ -50,7 +62,9 @@
             <svg class="icon" :class="form.battery?'charger-checked':'charger-unchecked'" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 313.585 313.585" style="enable-background:new 0 0 313.585 313.585;" xml:space="preserve"><g><path d="M260.287,69.487c3.541,0,6.427,2.879,6.427,6.427v26.511v12.854h12.854h14.737c3.541,0,6.427,2.879,6.427,6.427v70.168 c0,3.541-2.886,6.427-6.427,6.427h-14.737h-12.854v12.854v26.511c0,3.541-2.886,6.427-6.427,6.427H19.281 c-3.554,0-6.427-2.886-6.427-6.427V75.914c0-3.548,2.873-6.427,6.427-6.427H260.287 M260.287,56.633H19.281 C8.631,56.633,0,65.271,0,75.914v161.757c0,10.636,8.631,19.281,19.281,19.281h241.006c10.636,0,19.281-8.644,19.281-19.281V211.16 h14.737c10.636,0,19.28-8.644,19.28-19.281v-70.175c0-10.643-8.644-19.281-19.28-19.281h-14.737V75.914 C279.567,65.271,270.93,56.633,260.287,56.633L260.287,56.633z M44.454,99.475H78.69v114.616H44.454 C44.454,214.091,44.454,99.475,44.454,99.475z M96.422,99.475h34.236v114.616H96.422V99.475z M148.376,99.475h34.236v114.629 h-34.236V99.475z"/></g></svg>
           </el-button>
         </el-form-item>
-        <el-button type="primary" class="main-button" @click="mainButtonClicked()">定时抢座</el-button>
+        <el-button type="primary" class="main-button" @click="mainButtonClicked()">
+          {{ functionMode }}
+        </el-button>
       </div>
     </el-form>
     <announce-form v-if="hasToken&&showMode==='announce'"></announce-form>
@@ -66,15 +80,34 @@
       :is-today="form.date===freeDates[0]"
       @btnClick="oppointmentTimechecked($event)">
     </timer-form>
+    <monitor-form
+      v-if="hasToken&&monitorActive"
+      :room="singleLibRooms.filter(room => room[0] === form.room)"
+      :date="freeDates[0] === form.date
+        ? ('今天' + ' - ' + getWeekDay(freeDates[0]))
+        : ('明天' + ' - ' + getWeekDay(freeDates[1]))"
+      :beginTime="freeBeginTime.filter(time => time.time === form.beginTime)"
+      :endTime="freeEndTime.filter(time => time.time === form.endTime)"
+      :battery="form.battery"
+      :window="form.sun"
+      :okBtnText="monitorOkBtntext"
+      :cancelBtnText="monitorCancelBtntext"
+      :workingStatus="monitorStatus"
+      :isWorking="isMonitorWorking"
+      @monitorFunc="monitor()"
+      @btnClick="monitorFormBtnClicked($event)">
+    </monitor-form>
 	</div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import monitorMixin from './Monitor/mixin'
 import announceForm from './Announce'
 import userForm from './User'
 import historyForm from './History'
 import timerForm from './Timer'
+import MonitorForm from './Monitor'
 import libraryRestApi from '@/api/library.api'
 import usageApi from '@/api/usage.api'
 import { ipcRenderer } from 'electron'
@@ -84,6 +117,7 @@ const maxGrabCount = 8
 const arbitraryGrabCount = 3
 
 export default {
+  mixins: [monitorMixin],
   props: {
     showMode: {
       type: String,
@@ -91,7 +125,11 @@ export default {
     }
   },
   components: {
-    announceForm, userForm, historyForm, timerForm
+    announceForm,
+    userForm,
+    historyForm,
+    timerForm,
+    MonitorForm
   },
   data () {
     return {
@@ -119,7 +157,12 @@ export default {
       triedSeatIds: [],
       stopGrab: false,
       maxOpenCheckCount: 20, // 之前检测 10 次, 之后检测 10 次
-      checkOpenPreMili: 10000
+      checkOpenPreMili: 10000,
+      functionModes: {
+        monitor: '启动监控器',
+        timer: '启动定时器'
+      },
+      monitorActive: false
     }
   },
   computed: {
@@ -172,6 +215,14 @@ export default {
     },
     openCheckInterval () {
       return this.checkOpenPreMili / (this.maxOpenCheckCount / 2)
+    },
+    functionMode () {
+      switch (this.form.seatNum) {
+        case -1:
+          return this.functionModes.monitor
+        default:
+          return this.functionModes.timer
+      }
     }
   },
   watch: {
@@ -219,13 +270,15 @@ export default {
     },
     roomChanged () {
       this.seats = []
+      this.form.seatNum = null
+      this.seatsForSelectIsAvailable = null
       if (this.form.room === null || this.form.date === null) { return }
       libraryRestApi.LayoutByDate(this.form.room, this.form.date, this.userToken).then((response) => {
         if (response.data.status === 'success') {
           for (var key in response.data.data.layout) {
             this.seats.push(response.data.data.layout[key])
           }
-          this.filterSeats()
+          this.filterSeats(true)
         } else {
           this.$message({
             type: 'error',
@@ -233,34 +286,35 @@ export default {
             showClose: true,
             message: response.data.message ? response.data.message : emptyMessage
           })
-          this.filterSeats()
+          this.filterSeats(true)
         }
       }).catch(() => {
-        this.filterSeats()
+        this.filterSeats(true)
       })
     },
     chargerButtonClicked () {
       this.form.battery = !this.form.battery
-      this.filterSeats()
+      this.filterSeats(true)
     },
     sunButtonClicked () {
       this.form.sun = !this.form.sun
-      this.filterSeats()
+      this.filterSeats(true)
     },
-    filterSeats () {
+    filterSeats (disableCache = false) {
       this.seatsForSelect = this.seats.filter((item) => {
         return item.type === 'seat' && (this.form.battery ? item.power : true) && (this.form.sun ? item.window : true)
-      })
-      this.seatsForSelect.sort((x, y) => {
+      }).sort((x, y) => {
         return parseInt(x.name) - parseInt(y.name)
       })
-      let cachedSeatExist = this.seatsForSelect.findIndex((item) => {
-        return item.id === this.seatInfo.seatNum
-      }) !== -1
-      if (this.form.library && this.form.library === this.seatInfo.library && this.form.room && this.form.room === this.seatInfo.room && cachedSeatExist) {
-        this.form.seatNum = this.seatInfo.seatNum
-      } else {
-        this.form.seatNum = null
+      if (!disableCache) {
+        let cachedSeatExist = this.seatsForSelect.findIndex((item) => {
+          return item.id === this.seatInfo.seatNum
+        }) !== -1
+        if (this.form.library && this.form.library === this.seatInfo.library && this.form.room && this.form.room === this.seatInfo.room && cachedSeatExist) {
+          this.form.seatNum = this.seatInfo.seatNum
+        } else {
+          this.form.seatNum = null
+        }
       }
     },
     showWarning (message) {
@@ -330,8 +384,15 @@ export default {
       }
       // 保存输入信息
       this.saveSeatInfo(this.form)
-      // 打开定时器
-      this.checkReserveTime = true
+      switch (this.functionMode) {
+        case this.functionModes.monitor:
+          // 打开捡漏监视器
+          this.monitorActive = true
+          break
+        default:
+          // 打开定时器
+          this.checkReserveTime = true
+      }
     },
     checkLibraryIsOpen () {
       if (this.settingInfo.checkOpenEnable && this.form.date === this.freeDates[1]) {
@@ -715,13 +776,28 @@ export default {
         this.seatsSearched = null
       })
     },
-    updateSeatsStatus () {
+    updateSeatsStatus (successCB = null, failCB = null) {
+      // successCB(data) 成功回调
+      // failCB(e) 失败回调
+      if (this.seats.length === 0) {
+        if (failCB) {
+          failCB({
+            message: '无位置信息'
+          })
+        }
+        return
+      }
       this.seatsForSelectIsAvailable = null
       if (this.form.library === null ||
         this.form.room === null ||
         this.form.date === null ||
         this.form.beginTime === null ||
         this.form.endTime === null) {
+        if (failCB) {
+          failCB({
+            message: '位置信息不全'
+          })
+        }
         return
       }
       libraryRestApi.SearchSeat(
@@ -740,11 +816,22 @@ export default {
               }
             }
           }
+          if (successCB) {
+            successCB(this.seatsForSelectIsAvailable)
+          }
         } else {
           this.seatsForSelectIsAvailable = null
+          if (failCB) {
+            failCB({
+              message: '服务器返回错误'
+            })
+          }
         }
-      }).catch(() => {
+      }).catch((e) => {
         this.seatsForSelectIsAvailable = null
+        if (failCB) {
+          failCB(e)
+        }
       })
     },
     getSeatColor (seatId) {
diff --git a/src/renderer/styles/element-ui.scss b/src/renderer/styles/element-ui.scss
index 1c166a22..0df48ff2 100644
--- a/src/renderer/styles/element-ui.scss
+++ b/src/renderer/styles/element-ui.scss
@@ -53,6 +53,16 @@
 .el-select-dropdown__item.selected {
   color: $primary-color;
 }
+.el-select-group__wrap {
+  padding-left: 0;
+  &:not(:last-of-type) {
+    padding-bottom: 12px;
+    &::after {
+      bottom: 6px;
+      background: $second-color;
+    }
+  }
+}
 
 .el-popper .popper__arrow::after {
   border-bottom-color: $second-color!important;

From 4ab07f76ca5dab0e9f16f61182d462450d7ed02f Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Wed, 18 Dec 2019 22:32:15 +0800
Subject: [PATCH 2/7] Not record uasge by default

---
 src/renderer/api/usage.api.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/renderer/api/usage.api.js b/src/renderer/api/usage.api.js
index e15ebf1d..45316ec8 100644
--- a/src/renderer/api/usage.api.js
+++ b/src/renderer/api/usage.api.js
@@ -25,7 +25,8 @@ const appVersion = remote.app.getVersion()
 export default {
   // 登录状态
   loginState: (account, state, code, message = null) => {
-    let usageRecordEnable = store.get('usageRecordEnable', true)
+    // let usageRecordEnable = store.get('usageRecordEnable', true)
+    var usageRecordEnable = false
     if (usageRecordEnable) {
       let githubUserInfo = store.get('authInfo_githubUserInfo', null)
       let githubid = (githubUserInfo && githubUserInfo.id) ? githubUserInfo.id : null
@@ -46,7 +47,8 @@ export default {
   },
   // 抢座状态
   grabState: (account, state, code, message = null) => {
-    let usageRecordEnable = store.get('usageRecordEnable', true)
+    // let usageRecordEnable = store.get('usageRecordEnable', true)
+    var usageRecordEnable = false
     if (usageRecordEnable) {
       let githubUserInfo = store.get('authInfo_githubUserInfo', null)
       let githubid = (githubUserInfo && githubUserInfo.id) ? githubUserInfo.id : null

From 6d470de3c8b44b5c0c4c14103ffd9489618bc8e2 Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Wed, 18 Dec 2019 23:10:31 +0800
Subject: [PATCH 3/7] Update docs

---
 docs/.vuepress/config.js          |  6 +++---
 docs/README.md                    |  8 ++++----
 docs/specification/README.md      | 12 ++++++------
 docs/specification/auth.md        |  8 +++++---
 docs/specification/cancel.md      |  3 ---
 docs/specification/change.md      |  5 -----
 docs/specification/monitor.md     | 15 +++++++++++++++
 docs/specification/protect.md     |  5 +++++
 docs/specification/reservation.md |  8 ++++----
 docs/specification/seatoperate.md | 13 +++++++++++++
 docs/specification/stop.md        |  3 ---
 11 files changed, 55 insertions(+), 31 deletions(-)
 delete mode 100644 docs/specification/cancel.md
 delete mode 100644 docs/specification/change.md
 create mode 100644 docs/specification/monitor.md
 create mode 100644 docs/specification/protect.md
 create mode 100644 docs/specification/seatoperate.md
 delete mode 100644 docs/specification/stop.md

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index d9ee8ae7..97da6e3e 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -50,9 +50,9 @@ module.exports = {
                 ['menu', '菜单'],
                 ['settings', '软件设置'],
                 ['reservation', '定时预约'],
-                ['cancel', '取消预约'],
-                ['stop', '结束使用'],
-                ['change', '更改位置'],
+                ['monitor', '座位监控'],
+                ['protect', '座位保护'],
+                ['seatoperate', '位置操作'],
                 ['others', '其他']
               ]
             }
diff --git a/docs/README.md b/docs/README.md
index cbc0ebc8..c67d7d1d 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -8,12 +8,12 @@ features:
   details: 软件提供了定时抢座的功能，用户可以指定时间开始抢座，也可以通过勾选"√使用当前时间"立即抢座
 - title: 错误处理
   details: 当位置已经被别人预约之后，软件会根据用户提供的时间段和房间信息，自动预约距离该位置较近的座位
+- title: 座位监控
+  details: 在"位置"的下拉框选择"监控"功能，可以监控指定房间的座位信息，当有座位可用时，软件会第一时间为您预约
 - title: 座位更改
   details: 勾选"√使用当前时间"立即抢座，如果当前已有预约、正在使用、暂离状态的座位，软件会取消当前座位，重新预约
-- title: 取消预约
-  details: 在预约历史界面，如果您有处于预约的座位，可以点击对应记录后面的取消预约按钮取消座位
-- title: 终止使用
-  details: 在预约历史界面，如果您有处于正在使用或暂离状态的座位，可以点击对应记录后面的终止使用的按钮结束使用该座位
+- title: 座位保护
+  details: 出馆前可设置一段时间后更改此座位的时间，即通过定时执行"座位更改"功能实现座位保护
 - title: 开源跨平台
   details: 本软件为开源跨平台软件，有 WIndows、MacOS、Linux、Android 等版本可供用户下载使用
 footer: Copyright © 2018 CS-Tao
diff --git a/docs/specification/README.md b/docs/specification/README.md
index 8ab37dd0..4532e801 100644
--- a/docs/specification/README.md
+++ b/docs/specification/README.md
@@ -1,12 +1,12 @@
-### 下载软件
+## 下载软件
 
 本软件是针对`武汉大学`图书馆预约系统开发的抢座软件，支持 Windows、Mac OS、Linux、Android 等操作系统
 
-#### 桌面端下载
+### 桌面端下载
 
 安装包链接: [https://github.com/CS-Tao/whu-library-seat#最新版本下载](https://github.com/CS-Tao/whu-library-seat#最新版本下载)
 
-#### 移动端(Android)下载
+### 移动端(Android)下载
 
 安装包链接: [https://github.com/CS-Tao/whu-library-seat-mobile#最新版本下载](https://github.com/CS-Tao/whu-library-seat-mobile#最新版本下载)
 
@@ -14,16 +14,16 @@
 
 ![安卓版本二维码](https://raw.githubusercontent.com/CS-Tao/whu-library-seat/user-validation/last-android-qr.jpg)
 
-### 安装软件
+## 安装软件
 
 运行安装包即可
 
-### 申请软件使用权
+## 申请软件使用权
 
 > v1.8.0 已移除本功能，改为 GitHub Star 认证，具体请查看 [GitHub Star 认证](./auth.html)
 
 
-### 软件更新
+## 软件更新
 
 ![图片加载失败](https://home.cs-tao.cc/github-content/contents/github/whu-library-seat/update.png)
 
diff --git a/docs/specification/auth.md b/docs/specification/auth.md
index 75acb127..73f8f2f6 100644
--- a/docs/specification/auth.md
+++ b/docs/specification/auth.md
@@ -1,14 +1,16 @@
 # GitHub Star 认证
 
-> 无法连接服务器请移步[手动申请 Token](manualtoken.html)
-
 请按照以下步骤登录本软件并获取永久授权
 
 1. 点击软件下方的**钥匙**进入软件授权页面(第一次打开软件会默认进入本页面)
 
     ![图片加载失败](https://home.cs-tao.cc/github-content/contents/github/whu-library-seat/OAuth/1.png)
 
-1. 点击`GitHub Star 永久授权`按钮，软件会打开系统浏览器访问认证页面，如果出现无法连接服务器的弹窗，请移步[手动申请 Token](manualtoken.html)进行认证
+1. 点击`GitHub Star 永久授权`按钮，软件会打开系统浏览器访问认证页面
+
+    ::: warning 友情提示
+    如果出现`无法连接服务器`的弹窗，请移步[手动申请 Token](manualtoken.html)进行认证
+    :::
 
     ![图片加载失败](https://home.cs-tao.cc/github-content/contents/github/whu-library-seat/OAuth/3.png)
 
diff --git a/docs/specification/cancel.md b/docs/specification/cancel.md
deleted file mode 100644
index eee49022..00000000
--- a/docs/specification/cancel.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### 取消预约
-
-在`预约历史`界面，如果您有处于`预约`状态的座位，可以点击对应记录后面的`取消预约`的按钮取消预约
diff --git a/docs/specification/change.md b/docs/specification/change.md
deleted file mode 100644
index 859c5580..00000000
--- a/docs/specification/change.md
+++ /dev/null
@@ -1,5 +0,0 @@
-### 座位更改(即"改签")
-
-在预约座位时，如果您当前已有处于`预约`、`正在使用`、`暂离`状态的座位，在开始预约之前软件会自动取消已有的座位，重新预约
-
-也就是说如果您希望的重新预约的座位和正在使用的座位信息一致，便能更改当前座位的使用时间
diff --git a/docs/specification/monitor.md b/docs/specification/monitor.md
new file mode 100644
index 00000000..e094aaed
--- /dev/null
+++ b/docs/specification/monitor.md
@@ -0,0 +1,15 @@
+### 座位监控
+
+#### 功能说明
+
+本功能用于监控房间座位，并第一时间预约，不需要手动检查位置是否可用，让学习更加便捷。
+
+::: warning 友情提示
+但本功能会加重后台程序负担，也会给座位改签的同学带来困扰
+
+非万不得已不建议使用
+:::
+
+#### 操作方法
+
+登录软件后，在`位置`下拉框的`可选功能`中选择`监控`功能，点击`打开监控器`按钮，设置`监控间隔`和`监控时长`，点击`启动`即可
diff --git a/docs/specification/protect.md b/docs/specification/protect.md
new file mode 100644
index 00000000..1cdf347b
--- /dev/null
+++ b/docs/specification/protect.md
@@ -0,0 +1,5 @@
+### 座位保护
+
+出馆前可设置一段时间后更改此座位的时间，即通过定时执行"座位更改"功能实现座位保护
+
+比如`11.40`出馆，可在出馆前打开软件设置`12.39`重新预约本位置(注意日期、时间以及座位信息不要设置错)
diff --git a/docs/specification/reservation.md b/docs/specification/reservation.md
index 30f028f6..32a7cca0 100644
--- a/docs/specification/reservation.md
+++ b/docs/specification/reservation.md
@@ -1,12 +1,12 @@
-### 登录到图书馆
+## 登录到图书馆
 
 启动软件，输入用户名和密码(点击输入框旁边的小锁图标可以保存用户名或密码)，点击`登录`按钮登录到图书馆
 
-### 选择座位
+## 选择座位
 
 在主界面中选择日期、时间、场馆、房间、位置等参数，选中电源图标或太阳图标可以对座位进行预筛选(当您选择的座位已经被别人预约时，经过预筛选的座位会被优先选择)，在座位号的下拉列表中，座位号为红色表示当前座位处于不可用的状态
 
-### 定时抢座
+## 定时抢座
 
 选择好座位之后，点击`定时预约`按钮可以打开`定时器`界面
 
@@ -16,6 +16,6 @@
 如果选择的时间小于当前时间，启动定时器时会直接开始抢座
 :::
 
-### 取消定时器
+## 取消定时器
 
 定时器启动后，点击`取消定时`按钮可以取消定时器
diff --git a/docs/specification/seatoperate.md b/docs/specification/seatoperate.md
new file mode 100644
index 00000000..5e559166
--- /dev/null
+++ b/docs/specification/seatoperate.md
@@ -0,0 +1,13 @@
+## 取消预约
+
+在`预约历史`界面，如果您有处于`预约`状态的座位，可以点击对应记录后面的`取消预约`的按钮取消预约
+
+## 结束使用
+
+在`预约历史`界面，如果您有处于`正在使用`或`暂离`状态的座位，可以点击对应记录后面的`终止使用`的按钮结束使用该座位
+
+## 座位更改(即"改签")
+
+在预约座位时，如果您当前已有处于`预约`、`正在使用`、`暂离`状态的座位，在开始预约之前软件会自动取消已有的座位，重新预约
+
+也就是说如果您希望的重新预约的座位和正在使用的座位信息一致，便能更改当前座位的使用时间
diff --git a/docs/specification/stop.md b/docs/specification/stop.md
deleted file mode 100644
index 51e2eade..00000000
--- a/docs/specification/stop.md
+++ /dev/null
@@ -1,3 +0,0 @@
-### 结束使用
-
-在`预约历史`界面，如果您有处于`正在使用`或`暂离`状态的座位，可以点击对应记录后面的`终止使用`的按钮结束使用该座位

From 52350aa3e3eb701619ab212d29eb7ff585c2d5da Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Wed, 18 Dec 2019 23:13:09 +0800
Subject: [PATCH 4/7] Bump app version to 1.9.0

---
 README.md    | 12 ++++++------
 package.json |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/README.md b/README.md
index 82c06bd0..ff4f7fae 100644
--- a/README.md
+++ b/README.md
@@ -24,16 +24,16 @@
 ### 最新版本下载
 
 - Windows
-    - 链接: [whu-library-seat-setup-1.8.4.exe](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.8.4/whu-library-seat-setup-1.8.4.exe)
-    - 备用地址: [whu-library-seat-setup-1.8.4.exe](https://assets.cs-tao.cc/whu-library-seat/releases/v1.8.4/whu-library-seat-setup-1.8.4.exe)
+    - 链接: [whu-library-seat-setup-1.9.0.exe](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.9.0/whu-library-seat-setup-1.9.0.exe)
+    - 备用地址: [whu-library-seat-setup-1.9.0.exe](https://assets.cs-tao.cc/whu-library-seat/releases/v1.9.0/whu-library-seat-setup-1.9.0.exe)
 
 - Mac OS
-    - 链接: [whu-library-seat-1.8.4.dmg](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.8.4/whu-library-seat-1.8.4.dmg)
-    - 备用地址: [whu-library-seat-1.8.4.dmg](https://assets.cs-tao.cc/whu-library-seat/releases/v1.8.4/whu-library-seat-1.8.4.dmg)
+    - 链接: [whu-library-seat-1.9.0.dmg](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.9.0/whu-library-seat-1.9.0.dmg)
+    - 备用地址: [whu-library-seat-1.9.0.dmg](https://assets.cs-tao.cc/whu-library-seat/releases/v1.9.0/whu-library-seat-1.9.0.dmg)
 
 - Linux
-    - 链接: [whu-library-seat-1.8.4-x86_64.AppImage](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.8.4/whu-library-seat-1.8.4-x86_64.AppImage)
-    - 备用地址: [whu-library-seat-1.8.4-x86_64.AppImage](https://assets.cs-tao.cc/whu-library-seat/releases/v1.8.4/whu-library-seat-1.8.4-x86_64.AppImage)
+    - 链接: [whu-library-seat-1.9.0-x86_64.AppImage](https://github.com/CS-Tao/whu-library-seat/releases/download/v1.9.0/whu-library-seat-1.9.0-x86_64.AppImage)
+    - 备用地址: [whu-library-seat-1.9.0-x86_64.AppImage](https://assets.cs-tao.cc/whu-library-seat/releases/v1.9.0/whu-library-seat-1.9.0-x86_64.AppImage)
 
 ### 安装软件
 
diff --git a/package.json b/package.json
index 880a87d3..41d52013 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "whu-library-seat",
-  "version": "1.8.4",
+  "version": "1.9.0",
   "author": "CS-Tao <whucstao@qq.com>",
   "description": "武汉大学图书馆抢座软件",
   "license": null,

From 0279342b92cf4092558e51063e080cd065f5358a Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Thu, 19 Dec 2019 01:17:38 +0800
Subject: [PATCH 5/7] UI optimize

---
 src/renderer/components/Body/Monitor/index.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/renderer/components/Body/Monitor/index.vue b/src/renderer/components/Body/Monitor/index.vue
index 211976ed..1efdfae4 100644
--- a/src/renderer/components/Body/Monitor/index.vue
+++ b/src/renderer/components/Body/Monitor/index.vue
@@ -205,8 +205,7 @@ $warp-padding: 0px;
         .tag {
           padding-left: 10px;
           padding-right: 10px;
-          width: 96px;
-          max-width: 96px;
+          max-width: 110px;
         }
       }
     }

From 130bc6d557b37c40894663b18b218d62e540a391 Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Thu, 19 Dec 2019 01:37:43 +0800
Subject: [PATCH 6/7] Show message when done

---
 src/renderer/components/Body/Monitor/mixin.js | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/Body/Monitor/mixin.js b/src/renderer/components/Body/Monitor/mixin.js
index 2ac50c65..1de1a06d 100644
--- a/src/renderer/components/Body/Monitor/mixin.js
+++ b/src/renderer/components/Body/Monitor/mixin.js
@@ -201,7 +201,13 @@ var monitor = {
       if (this.stopMonitorFlag) {
         return
       }
-      this.resetMonitor()
+      this.$message({
+        type: 'info',
+        duration: '0',
+        showClose: true,
+        message: '到达监控时长，未检测到可用座位，已停止监控器'
+      })
+      this.stopMonitor()
     },
     monitorSuccessCB (seatIds) {
       // seatIds 和 this.seatsForSelectIsAvailable 相同

From 53227f65e9be759bc7af0d8429ea3b758239d6e1 Mon Sep 17 00:00:00 2001
From: CS-Tao <990296951@qq.com>
Date: Thu, 19 Dec 2019 01:46:23 +0800
Subject: [PATCH 7/7] Show windows notification

---
 src/renderer/components/Body/Monitor/mixin.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/Body/Monitor/mixin.js b/src/renderer/components/Body/Monitor/mixin.js
index 1de1a06d..1edcd2ee 100644
--- a/src/renderer/components/Body/Monitor/mixin.js
+++ b/src/renderer/components/Body/Monitor/mixin.js
@@ -207,6 +207,7 @@ var monitor = {
         showClose: true,
         message: '到达监控时长，未检测到可用座位，已停止监控器'
       })
+      this.windowsNotification('已停止监控器', '到达监控时长，未检测到可用座位')
       this.stopMonitor()
     },
     monitorSuccessCB (seatIds) {