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="headerImg" 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.toFixed(2) }}小时</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.toFixed(2) }}小时</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(), // 当前时间
      headerImg: "static/images/header.png", // 头部背景图片
    };
  },
  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();
    }
    this.headerImg = uni.getStorageSync("labsop_headerImg") ? uni.getStorageSync("labsop_filePath") + uni.getStorageSync("labsop_headerImg") : "static/images/header.png";
    console.log("headerImg----------", this.headerImg);

  },
  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 || "" + this.isOnlineInfo.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) {
      const filePath =
        uni.getStorageSync("labsop_filePath") || process.uniEnv.VITE_FILE;
      let url = path;
      if (url.indexOf("http") == -1) {
        url = filePath + 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: 50%;
  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>