labsop_experiment_android/pages/home/index.vue

<template>
  <view @click="resetTimer">
    <img
      v-if="screenSaveFlag"
      class="screen-save-box"
      src="static/images/screen-saver.png"
      alt=""
    />
    <view v-else>
      <view class="container-lab">
        <!-- 头部 -->
        <view class="header">
          <img src="static/images/header.png" class="header-img" alt="" />
          <view class="hleft" @click="toSettingPage"></view>
          <view class="hcenter"></view>
          <view class="hright" v-if="isOnlineInfo" @click="handleGetOff">
            <img src="static/images/cancel.png" alt="" />
          </view>
        </view>
        <!-- END -->
        <view class="container">
          <!-- 设备头 -->
          <view class="deviceInfo">
            <view
              class="deviceInfoTitle"
              style="justify-content: space-between"
            >
              <view class="instr-info">
                <img src="static/images/icon-instr.png" class="comImg" alt="" />
                <view class="title">设备信息</view>
              </view>
              <view class="handle-instr-wrap">
                <view class="handle-instr open-btn" @click="openInstr">
                  打开设备
                </view>
                <view class="handle-instr close-btn" @click="closeInstr">
                  关闭设备
                </view>
              </view>
            </view>
            <!-- 内容 -->
            <ul class="deviecDetail">
              <li>
                <view class="devicelab">日期:</view>
                <view class="title-info" id="clock">{{ curTime }}</view>
              </li>
              <li>
                <view class="devicelab">设备名称:</view>
                <view class="title-info">{{ instrInfo.instName }}</view>
              </li>
              <li>
                <view class="devicelab">设备编号:</view>
                <view class="title-info">
                  {{ instrInfo.instCode }} {{ terminal }}
                </view>
              </li>
              <li>
                <view class="devicelab tongji">使用统计:</view>
              </li>
              <!-- 本周 -->
              <li>
                <view class="devicelab" style="font-weight: 700">本周</view>
              </li>
              <li>
                <view class="devicelab">使用次数</view>
                <view class="title-info">{{ instrInfo.useCountWeek }}次</view>
              </li>
              <li
                style="
                  display: flex;
                  justify-content: space-between;
                  justify-content: center;
                "
              >
                <view class="devicelab">使用时长</view>
                <view class="frequency">
                  <!-- <view class="line">
                <view id="wheek_rate" class="realline"></view>
              </view> -->
                  <p class="num">{{ instrInfo.useTimeWeek }}小时</p>
                </view>
              </li>

              <!-- 本月 -->
              <li>
                <view class="devicelab" style="font-weight: 700">本月</view>
              </li>
              <li>
                <view class="devicelab">使用次数</view>
                <view class="title-info">{{ instrInfo.useCountMonth }}次</view>
              </li>
              <li
                style="
                  display: flex;
                  justify-content: space-between;
                  justify-content: center;
                "
              >
                <view class="devicelab">使用时长</view>

                <view class="frequency">
                  <!-- <view class="line">
                <view id="month_rate" class="realline"></view>
              </view> -->

                  <p class="num">{{ instrInfo.useTimeMonth }}小时</p>
                </view>
              </li>
            </ul>
            <!-- 底部统计 -->
            <!-- <view class="footer">
          <view class="tItem">
            <p class="tItemTitle">统计</p>
            <p class="tItemNum">22</p>
          </view>
          <view class="tItem">
            <p class="tItemTitle">数据量</p>
            <p class="tItemNum">33</p>
          </view>
        </view> -->
          </view>
          <!-- 设备右侧 -->
          <view class="deviceRight">
            <view class="deviceTop">
              <!-- 实验人员 -->
              <view class="deviceInfo laboratoryBox" v-if="isOnlineInfo">
                <view class="deviceInfoTitle">
                  <img
                    src="static/images/icon-user.png"
                    class="comImg"
                    alt=""
                  />
                  <view class="title">实验员</view>
                </view>
                <!-- 详情 信息 -->
                <view class="deviceInfoTop">
                  <view class="imgBox">
                    <img
                      :src="completionImgPath(isOnlineInfo.avatar)"
                      alt="加载失败"
                    />
                  </view>
                  <ul class="laboratoryDetail">
                    <li>
                      <view class="laboratoryLab">姓名:</view>
                      <view class="title">{{ isOnlineInfo.userName }}</view>
                    </li>
                    <li>
                      <view class="laboratoryLab">课题组:</view>
                      <view class="title">{{ isOnlineInfo.projectName }}</view>
                    </li>
                    <li>
                      <view class="laboratoryLab">电话:</view>
                      <view class="title">{{ isOnlineInfo.userContact }}</view>
                    </li>
                  </ul>
                </view>
                <view class="laboratory">
                  <view class="tItem">
                    <p class="tItemTitle">预约开始时间</p>
                    <p class="tItemNum">{{ isOnlineInfo.startTime }}</p>
                  </view>
                  <view class="tItem">
                    <p class="tItemTitle">预约结束时间</p>
                    <p class="tItemNum">{{ isOnlineInfo.endTime }}</p>
                  </view>
                  <view class="tItem">
                    <p class="tItemTitle">实际开始时间</p>
                    <p class="tItemNum">
                      {{ isOnlineInfo.usedRecord.startTime }}
                    </p>
                  </view>
                  <view class="tItem">
                    <p class="tItemTitle">实验时长</p>
                    <p id="jishi_time" class="tItemNum">{{ formattedTime }}</p>
                  </view>
                </view>
              </view>
              <!-- 实验人员 -->
              <view class="deviceInfo laboratoryBox" v-else>
                <view class="deviceInfoTitle">
                  <img
                    src="static/images/icon-user.png"
                    class="comImg"
                    alt=""
                  />
                  <view class="title">实验员尚未登录</view>
                </view>
                <!-- 未登录 -->
                <view class="nologin" @click="openFaceCheck">
                  <view class="nologinImgBox">
                    <img src="static/images/login.png" alt="" />
                  </view>
                </view>
              </view>

              <!-- 下一个预约 -->
              <view class="deviceInfo nextOrder">
                <view class="deviceInfoTitle">
                  <img
                    src="static/images/icon-appoint.png"
                    class="comImg"
                    alt=""
                  />
                  <view class="title">下一个预约信息</view>
                </view>

                <view
                  id="notNext"
                  class="nextTop"
                  v-if="appointList.length == 0"
                >
                  <view class="nextNoLoginImgBox">
                    <img src="static/images/data0.png" alt="" />
                  </view>
                  <view>暂无预约</view>
                </view>
                <view v-else class="next-order-wrap">
                  <view
                    v-for="(v, i) in appointList"
                    :key="i"
                    style="margin-bottom: 10px"
                  >
                    <view id="hasNext" class="deviceInfoTop">
                      <view class="imgBox">
                        <img
                          id="nextImageUrl"
                          :src="completionImgPath(v.avatar)"
                          alt="加载失败"
                        />
                      </view>
                      <ul class="laboratoryDetail pd10">
                        <li>
                          <view class="laboratoryLab">姓名:</view>
                          <view id="nextUserName" class="title">
                            {{ v.userName }}
                          </view>
                        </li>
                        <li>
                          <view class="laboratoryLab">课题组:</view>
                          <view id="nextDepartment" class="title">
                            {{ v.projectName }}
                          </view>
                        </li>
                        <li>
                          <view class="laboratoryLab">电话:</view>
                          <view id="nextMobile" class="title">
                            {{ v.userContact }}
                          </view>
                        </li>
                      </ul>
                    </view>
                    <view id="nextAppointTime" class="nextLaboratory">
                      <view class="tItem">
                        <p class="tItemTitle">预约开始时间</p>
                        <p id="appointStartTime" class="tItemNum">
                          {{ v.startTime }}
                        </p>
                      </view>
                      <view class="tItem">
                        <p class="tItemTitle">预约结束时间</p>
                        <p id="appointEndTime" class="tItemNum">
                          {{ v.endTime }}
                        </p>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
            <!-- 设备数据 -->
            <view class="deviceData">
              <view class="deviceInfoHeader">
                <view class="deviceInfoTitle">
                  <img
                    src="static/images/icon-notice.png"
                    class="comImg"
                    alt=""
                  />
                  <view class="title">公告</view>
                </view>
                <!--<view class="deviceInfoBtn">-->
                <!--<button class="flesh btn" id="fleshClick">刷 新</button>-->
                <!--</view>-->
              </view>
              <ul class="deviceList">
                <li style="display: flex" v-for="(v, i) in noticeList" :key="i">
                  <view class="notice-home-content" @click="openContent(v)">
                    <view class="notice-home-p">
                      {{ v.noticeTitle }}
                    </view>
                  </view>
                  <view class="notice-home-createdName">
                    {{ v.createdName }}
                  </view>
                  <view class="notice-home-date">
                    {{ parseTime(v.createdTime, "{y}-{m}-{d}") }}
                  </view>
                </li>
              </ul>
            </view>
          </view>
        </view>
      </view>
      <u-popup
        v-if="noticeShow"
        :show="noticeShow"
        @close="noticeShow = false"
        mode="center"
        :round="10"
        :closeable="true"
      >
        <view class="notice-wrap">
          <view class="notice-header">{{ noticeInfo.noticeTitle }}</view>
          <view class="notice-content">
            <view v-html="noticeInfo.noticeContent"></view>
          </view>
        </view>
      </u-popup>
    </view>
  </view>
</template>

<script>
  import instApi from "../../api/inst";
  import to from "await-to-js";
  export default {
    data() {
      return {
        noticeShow: false, //公共详情
        noticeInfo: "", //公告详情
        clickTimer: null, //点击次数
        clickCount: 0, //点击次数
        timer: null, //当前时间
        infoTimer: null, //仪器详情
        curTime: "", //当前时间
        curTimetimer: null, //上机时间
        screenSaveTimer: null, //屏保时间
        idleTime: 5 * 60 * 1000, // 设置超时时间:5分钟
        screenSaveFlag: false,
        instrInfo: {
          id: 0,
          instName: "",
          instCode: "",
          useCountWeek: 0,
          useTimeWeek: 0,
          useCountMonth: 0,
          useTimeMonth: 0,
        },
        appointList: [], //预约列表
        noticeList: [], //公告
        terminal: "",
        isOnlineInfo: null, //在线信息
        userId: 0,
        currentTime: new Date(), // 当前时间
      };
    },
    computed: {
      formattedTime() {
        if (!this.isOnlineInfo) {
          return "-";
        }
        const diff =
          this.currentTime - new Date(this.isOnlineInfo.usedRecord.startTime);
        const hours = String(Math.floor(diff / (1000 * 60 * 60))).padStart(
          2,
          "0"
        );
        const minutes = String(
          Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
        ).padStart(2, "0");
        const seconds = String(
          Math.floor((diff % (1000 * 60)) / 1000)
        ).padStart(2, "0");
        return `${hours}:${minutes}:${seconds}`;
      },
    },
    onLoad(option) {
      this.userId = option.id;
    },
    async onShow() {
      this.startIdleTimer();
      if (!uni.getStorageSync("labsop_no")) {
        uni.redirectTo({
          url: "/pages/setting/index",
        });
      } else {
        // 获取仪器信息
        this.getInstrInfo();
        this.getAppointList();
        this.getNotice();
        await this.getGetOnInfo();
        // 获取日期
        this.timer = setInterval(() => {
          this.getNowTime();
        }, 1000);
        // 仪器信息
        this.infoTimer = setInterval(() => {
          this.getInstrInfo();
          this.getAppointList();
          this.getNotice();
        }, 60000);
        // 上机信息
        if (this.userId && !this.isOnlineInfo) {
          this.getOn();
        }
        this.handleSwitchInstr();
      }
    },
    onHide() {
      //离开页面前清除计时器
      clearInterval(this.timer);
      clearInterval(this.clickTimer);
      clearInterval(this.infoTimer);
      clearInterval(this.curTimetimer);
      this.resetTimer();
      this.timer = null;
      this.clickTimer = null;
      this.infoTimer = null;
      this.curTimetimer = null;
    },
    mounted() {},
    beforeDestroy() {
      //离开页面前清除计时器
      clearInterval(this.timer);
      clearInterval(this.clickTimer);
      clearInterval(this.infoTimer);
      clearInterval(this.curTimetimer);
      this.resetTimer();
      this.timer = null;
      this.clickTimer = null;
      this.infoTimer = null;
      this.curTimetimer = null;
    },
    methods: {
      //屏保计时
      startIdleTimer() {
        this.screenSaveTimer = setTimeout(() => {
          this.toScreenSaver();
        }, this.idleTime);
      },
      // 点击操作重置屏保计时
      resetTimer() {
        clearTimeout(this.screenSaveTimer);
        this.screenSaveFlag = false;
        this.startIdleTimer(); // 重置计时器
      },
      // 进入屏保
      toScreenSaver() {
        this.screenSaveFlag = true;
      },
      // 打开公告详情
      async openContent(row) {
        this.noticeShow = true;
        this.noticeInfo = row;
      },
      // 获取仪器信息
      async getInstrInfo() {
        this.terminal = uni.getStorageSync("labsop_no");
        let [err, res] = await to(
          instApi.getInstrInfo({ terminal: this.terminal })
        );
        if (err) return;
        this.instrInfo = res.data;
      },
      // 获取预约信息
      async getAppointList() {
        this.terminal = uni.getStorageSync("labsop_no");
        let [err, res] = await to(
          instApi.getAppointInfo({ terminal: this.terminal })
        );
        if (err) return;
        this.appointList = res.data;
      },
      // 获取公告信息
      async getNotice() {
        this.terminal = uni.getStorageSync("labsop_no");
        let [err, res] = await to(
          instApi.getNoticeInfo({ terminal: this.terminal })
        );
        if (err) return;
        this.noticeList = res.data;
      },
      // 上机
      async getOn() {
        const handleAppoint = uni.getStorageSync("handleAppoint");
        console.log("handleAppoint----------", handleAppoint);
        if (handleAppoint !== "appointLine") return;
        let [err, res] = await to(
          instApi.getOn({ terminal: this.terminal, UserId: this.userId })
        );
        uni.removeStorageSync("handleAppoint");
        if (err) return;
        this.getGetOnInfo();
        this.getAppointList();
        uni.showToast({
          title: "上机成功",
          icon: "success",
          duration: 1000,
        });
      },
      // 打开设备
      async handleSwitchInstr() {
        const handleType = uni.getStorageSync("handleType");
        console.log("handleType----------", handleType);
        if (handleType !== "openInstr") return;
        let [err, res] = await to(
          instApi.switch({
            switch: true,
            terminal: this.terminal,
            userId: Number(this.userId),
          })
        );
        uni.removeStorageSync("handleType");
        if (err) return;
        uni.showToast({
          title: "设备打开成功",
          icon: "success",
          duration: 1000,
        });
      },
      // 关闭设备
      async closeInstr() {
        uni.showModal({
          title: "提示",
          content: "确认关闭当前仪器？",
          success: async (modalRes) => {
            if (modalRes.confirm) {
              let [err, res] = await to(
                instApi.switch({
                  switch: false,
                  terminal: this.terminal,
                })
              );
              if (err) return;
              uni.showToast({
                title: "设备关闭成功",
                icon: "success",
                duration: 1000,
              });
            }
          },
        });
      },
      // 获取正在上机信息
      async getGetOnInfo() {
        let [err, res] = await to(
          instApi.getOnInfo({ terminal: this.terminal })
        );
        if (err) return;
        this.isOnlineInfo = res.data;
        this.curTimetimer = setInterval(this.updateTime, 1000);
      },
      // 下机
      handleGetOff() {
        uni.showModal({
          title: "提示",
          content: "退出设备将会断电、终止实验，您确定要注销登录吗？",
          success: async (res) => {
            if (res.confirm) {
              let [err, res] = await to(
                instApi.geOff({ terminal: this.terminal, UserId: this.userId })
              );
              if (err) return;
              if (res.code == 200) {
                uni.redirectTo({
                  url: "/pages/home/index",
                });
              }
            }
          },
        });
      },
      // 跳转人脸识别
      openFaceCheck() {
        uni.redirectTo({
          url: "/pages/face/index",
        });
      },
      openInstr() {
        uni.redirectTo({
          url: "/pages/face/openInstrFace",
        });
      },
      completionImgPath(path) {
        let url = path;
        if (url.indexOf("http") == -1) {
          url = process.uniEnv.VITE_FILE + url;
        }
        return url;
      },
      // 跳转设置页
      toSettingPage() {
        this.clickCount++;
        if (this.clickCount === 6) {
          uni.redirectTo({
            url: "/pages/setting/index",
          });
          this.clickCount = 0;
          clearTimeout(this.clickTimer);
        } else {
          clearTimeout(this.clickTimer);
          this.clickTimer = setTimeout(() => {
            this.clickCount = 0;
          }, 2000);
        }
      },
      updateTime() {
        this.currentTime = new Date();
      },
      getNowTime() {
        var date = new Date();
        //年 getFullYear()：四位数字返回年份
        var year = date.getFullYear(); //getFullYear()代替getYear()
        //月 getMonth()：0 ~ 11
        var month = date.getMonth() + 1;
        //日 getDate()：(1 ~ 31)
        var day = date.getDate();
        //时 getHours()：(0 ~ 23)
        var hour = date.getHours();
        //分 getMinutes()： (0 ~ 59)
        var minute = date.getMinutes();
        //秒 getSeconds()：(0 ~ 59)
        var second = date.getSeconds();
        var myArray = new Array(7);
        myArray[0] = "星期日";
        myArray[1] = "星期一";
        myArray[2] = "星期二";
        myArray[3] = "星期三";
        myArray[4] = "星期四";
        myArray[5] = "星期五";
        myArray[6] = "星期六";
        var weekday = date.getDay();
        var time =
          year +
          "-" +
          this.addZero(month) +
          "-" +
          this.addZero(day) +
          " " +
          myArray[weekday] +
          " " +
          this.addZero(hour) +
          ":" +
          this.addZero(minute) +
          ":" +
          this.addZero(second);
        this.curTime = time;
      },
      //小于10的拼接上0字符串
      addZero(s) {
        return s < 10 ? "0" + s : s;
      },
    },
  };
</script>

<style lang="scss" scoped>
  .container-lab {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  /* 头部 */
  .header {
    width: 100%;
    height: 12.6vh;
    padding: 0 3.9vw 0 3.125vw;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .header-img {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 12.6vh;
      z-index: -1;
    }
  }

  .hleft {
    width: 28.4vw;
    height: 100%;
    font-size: 1.72vw;
    /*background-color: #009688;*/
    /*border-radius: 0 1.56vw 1.56vw 0;*/
    padding-left: 2vw;
    box-sizing: border-box;
    display: flex;
    align-items: center;
  }

  .hcenter {
    flex: 1;
    // width: 43.36vw;
    height: 100%;
    line-height: 12.6vh;
    text-align: center;
    font-size: 3.44vw;
    color: #ffffff;
  }

  .hright {
    width: 16.4vw;
    height: 5vh;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .hright img {
    width: 3.125vw;
    height: auto;
    cursor: pointer;
  }
  /* 中间内容 */
  .container {
    width: 95%;
    flex: 1;
    margin: 5vh auto;
    display: flex;
  }

  /* 设备信息  */
  .deviceInfo {
    width: 31.25vw;
    height: 100%;
    // height: 77vh;
    margin-right: 2vw;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    opacity: 1;
    border-radius: 0.4vw;
  }

  .deviceInfoTitle {
    width: 100%;
    height: 5.5vh;
    display: flex;
    align-items: center;
    padding-left: 0.78vw;
    border-bottom: 1px solid #f0f2f5;
    box-sizing: border-box;
    margin-bottom: 1vh;
    .instr-info {
      display: flex;
      align-items: center;
    }
    .handle-instr-wrap {
      display: flex;
    }
    .handle-instr {
      padding: 5px 16px;
      border: 1px solid;
      border-radius: 10px;
      margin-right: 10px;
      color: #fff;
    }
    .open-btn {
      background: #409eff;
    }
    .close-btn {
      background: #f56c6c;
    }
  }
  .info-title {
    flex: 1;
    padding-right: 10px;
  }
  .comImg {
    width: 2.34vw;
    height: auto;
    margin-right: 0.7vw;
  }

  .title {
    display: inline-block;
    color: #303133;
    font-size: 1.4vw;
  }

  /* 设备信息 */
  .deviecDetail {
    padding-left: 0;
  }
  .deviecDetail li {
    list-style: none;
    width: 100%;
    // height: 6.25vh;
    line-height: 6.25vh;
    padding-left: 30px;
    box-sizing: border-box;
    display: flex;
  }

  .devicelab {
    display: inline-block;
    width: 6.2vw;
    color: #606266;
    font-size: 1.2vw;
    text-align: left;
    margin-right: 0.5vw;
  }

  .tongji {
    width: 8.3vw !important;
    font-weight: 700;
  }

  .frequency {
    display: flex;
    align-items: center;
    width: 24.8vw;
    height: 100%;
  }

  .num {
    display: inline-block;
    width: 20%;
    color: #303133;
    margin-left: 10px;
    font-size: 1.4vw;
  }

  .line {
    width: 80%;
    height: 1.5vh;
    background-color: #ededed;
    border-radius: 0.46vw;
  }
  .realline {
    width: 0%;
    height: 1.5vh;
    background-color: #1d66dc;
    border-radius: 0.46vw;
  }

  .footer {
    margin-top: 6vh;
    width: 100%;
    height: 0.8vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tItem {
    width: 14vw;
    margin-right: 2vw;
    margin-bottom: 1.75vh;
    text-align: center;
  }

  .tItem:nth-child(2n) {
    margin-right: 0;
  }

  .tItemTitle {
    color: #606266;
    margin-top: 0.45vh;
    font-size: 1.2vw;
    font-weight: 700;
  }

  .tItemNum {
    font-size: 1.3vw;
    color: #3399ff;
    font-weight: 700;
  }

  /* 右侧 */
  .deviceRight {
    width: 60vw;
    flex: 1;
  }

  .deviceTop {
    width: 100%;
    display: flex;
    margin-bottom: 3vh;
  }

  /* 实验员信息 */
  .deviceInfoTop {
    width: 100%;
    height: 12.5vh;
    padding-left: 2.8vw;
    box-sizing: border-box;
    display: flex;
    margin-bottom: 1.875vh;
  }

  .imgBox {
    width: 7.8vw;
    height: 13vh;
    border-radius: 50%;
    margin-right: 1.4vw;
  }

  .imgBox img {
    width: 7.8vw;
    height: 100%;
    border-radius: 50%;
  }

  /* 实验人员 */
  .laboratoryBox {
    width: 31.25vw;
    height: 37.5vh;
    display: flex;
    flex-direction: column;
    .nologin {
      flex: 1;
    }
  }
  .nologinImgBox {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
  }
  .laboratory {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }

  .nextLaboratory {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  .laboratoryDetail li {
    list-style: none;
    width: 100%;
    height: 4.375vh;
    line-height: 4.375vh;
    display: flex;
  }
  .pd10 {
    padding-left: 10px;
  }
  /*  */
  .laboratoryLab {
    display: inline-block;
    width: 3.9vw;
    color: #606266;
    font-size: 1.2vw;
    text-align: right;
    margin-right: 0.7vw;
  }

  /* 下一次预约 */
  .nextOrder {
    width: 28.5vw;
    height: 37.5vh;
    margin-right: 0;
    display: flex;
    flex-direction: column;
  }
  .next-order-wrap {
    flex: 1;
    overflow: auto;
    padding: 0 0 20px 0;
  }

  /* 照片 */
  .nextTop {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
  }

  .nextImgBox {
    width: 7.8vw;
    height: 13vh;
    border-radius: 50%;
    margin-right: 1.4vw;
  }

  .nextNoLoginImgBox {
    margin-top: 20px;
  }

  .nextImgBox img {
    width: 7.8vw;
    height: 100%;
    border-radius: 50%;
  }

  .nextBox {
    width: 4.69vw;
    height: 7.5vh;
    border-radius: 50%;
    background-color: #3399ff;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* 设备数据 */
  .deviceData {
    width: 100%;
    height: 36.5vh;
    background-color: #fff;
    box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.12);
    opacity: 1;
    border-radius: 0.4vw;
  }

  .deviceList {
    width: 100%;
    height: 29vh;
    overflow-y: auto;
    padding: 0 2.18vw 1.88vh 2.18vw;
    box-sizing: border-box;
  }

  .deviceList li {
    list-style: none;
    width: 100%;
    height: 4.75vh;
    line-height: 4.75vh;
    font-size: 1.1vw;
    color: #606266;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-bottom: 1px dashed #f0f2f5;
    display: flex;
  }

  .deviceList li view:first-child {
    margin-right: 10px;
  }

  .notice-wrap {
    width: 50vw;
    height: 60vh;
    .notice-header {
      padding: 20px 20px 0;
      font-size: 20px;
      font-weight: bold;
    }
    .notice-content {
      padding: 20px;
    }
  }
  .screen-save-box {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  .notice-home-content {
    flex: 1;
    overflow: hidden;
  }
  .notice-home-p {
    // 省略号
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .notice-home-createdName {
    font-size: 14px;
    width: 200px;
    text-align: right;
  }
  .notice-home-date {
    font-size: 14px;
    width: 80px;
    text-align: right;
  }
  .notice-home-p:hover {
    color: #3399ff;
  }
</style>