<template>
  <div class="monitor-container">
    <div class="top">
      <div class="top-left">
        <div class="top-left-top">
          <Container2 :setting="setting.top_left_top">
            <div class="video-kjg" v-show="cameraVisible1">
              <!-- <image-video
                :cameraData.sync="cameraKJG"
                :visible.sync="cameraVisible1"
              ></image-video> -->
            </div>
          </Container2>
        </div>
        <div class="top-left-bottom">
          <Container2 :setting="setting.top_left_bottom">
            <div class="video-hw" v-show="cameraVisible1">
              <!-- <image-video :cameraData.sync="cameraHW" :visible.sync="cameraVisible1"></image-video> -->
            </div>
          </Container2>
        </div>
      </div>
      <div class="top-center">
        <div class="map">
          <Map name="robot-map"></Map>
        </div>
      </div>
      <div class="top-right">
        <Container2 :setting="setting.top_right">
          <div class="alarm-container">
            <ul class="mete-top">
              <li>
                <div title="849.70 Hpa "><label>气压：</label><span>849.70 Hpa</span></div>
              </li>
              <li>
                <div title="2.56 m/s "><label>风速：</label><span>2.56 m/s</span></div>
              </li>
              <li>
                <div title="东北 "><label>风向：</label><span>东北</span></div>
              </li>
              <li>
                <div title="58.07 mm "><label>累计雨量：</label><span>58.07 mm</span></div>
              </li>
            </ul>
            <ul class="mete-middle">
              <li>
                <div class="plate"></div>
                <p>27.92 ℃</p>
                <p>当前温度</p>
              </li>
              <li>
                <div class="plate"></div>
                <p>18.62 %RH</p>
                <p>当前湿度</p>
              </li>
            </ul>
            <ul class="mete-bottom">
              <li>
                <div>
                  <div class="plate2">
                    <p class="val">0</p>
                    <p class="unit">%LEL</p>
                  </div>
                  <p class="type">CH4</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="plate3">
                    <p class="val">0</p>
                    <p class="unit">ppm</p>
                  </div>
                  <p class="type">CO</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="plate2">
                    <p class="val">0</p>
                    <p class="unit">ppm</p>
                  </div>
                  <p class="type">H2S</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="plate3">
                    <p class="val">0</p>
                    <p class="unit">ppm</p>
                  </div>
                  <p class="type">SO2</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="plate2">
                    <p class="val">0</p>
                    <p class="unit">%VOL</p>
                  </div>
                  <p class="type">O2</p>
                </div>
              </li>
              <li>
                <div>
                  <div class="plate3">
                    <p class="val">--</p>
                    <p class="unit">%LEL</p>
                  </div>
                  <p class="type">激光CH4</p>
                </div>
              </li>
            </ul>
          </div>
        </Container2>
      </div>
    </div>
    <div class="bottom">
      <div class="bottom-left">
        <Container2 :setting="setting.bottom_left">
          <div class="robot-info">
            <div>
              <el-row>
                <el-col :span="13" class="robot-info-left">
                  <img style="width: 160px; height: 220px" />
                </el-col>
                <el-col :span="11" class="robot-info-right">
                  <el-select
                    v-model="activeRobot.id"
                    filterable
                    clearable
                    size="small"
                    placeholder="机器人"
                    class="filter-item"
                    style="width: 160px"
                    @change="selectActiveRobot"
                  >
                    <el-option
                      v-for="item in robotList"
                      :key="item.id"
                      :label="item.title"
                      :value="item.id"
                    />
                  </el-select>
                  <div>机器人名称：</div>
                  <div>{{ activeRobot.title }}</div>
                  <div>职能：</div>
                  <div>{{ activeRobot.func }}</div>
                  <div>充电状态：{{ activeRobot.deviceStatus === 1 ? '在线' : '离线' }}</div>
                  <div>电量：{{ activeRobot.battery }}%</div>
                  <div>速度：{{ activeRobot.speed ? activeRobot.speed : '0m/s' }}</div>
                </el-col>
              </el-row>
            </div>
          </div>
        </Container2>
      </div>
      <div class="bottom-center">
        <el-tabs class="record-list" type="border-card">
          <el-tab-pane label="巡检记录">
            <el-table
              ref="table"
              :data="patrolRecordList"
              :key="itemKey"
              row-key="id"
              max-height="222"
              :header-cell-style="{
                background: '#2892F0',
                color: '#fff',
                'text-align': 'center',
              }"
            >
              <el-table-column label="导航点编号" prop="naviSequence" width="100" align="center" />
              <el-table-column label="指标名称" prop="indicatorName" align="center" />
              <el-table-column label="巡检结果" prop="value" width="90" align="center" />
              <el-table-column label="巡检时间" prop="patrolTime" width="180" align="center" />
              <el-table-column label="告警等级" prop="defectGrade" width="100" align="center">
                <template slot-scope="scope">
                  {{ scope.row.defectGrade == 0 ? '正常' : '' }}
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="最近任务">
            <el-table
              :data="taskList"
              ref="table"
              row-key="id"
              max-height="222"
              :header-cell-style="{
                background: '#2892F0',
                color: '#fff',
                'text-align': 'center',
              }"
            >
              <el-table-column label="编号" prop="id" align="center" />
              <!-- <el-table-column label="类型" prop="type" align="center" /> -->
              <el-table-column label="开始时间" prop="beginTime" align="center" />
              <el-table-column label="检测总数" prop="totalNumber" align="center" />
              <el-table-column label="正常数量" prop="finishedNumber" align="center" />
              <el-table-column label="缺陷数量" prop="defectNumber" align="center" />
              <el-table-column label="未识别" prop="unrecognizeNumber" align="center" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="bottom-right">
        <Container2 :setting="setting.bottom_right">
          <div class="alarm">
            <div
              class="alarm-item-container"
              v-for="(item, index) in alarmList"
              :key="index"
              :style="{ backgroundColor: getBgColor(index) }"
            >
              <div>
                {{ setAlarmInfo(item) }}
              </div>
            </div>
          </div>
        </Container2>
      </div>
    </div>
  </div>
</template>

<script>
import Container2 from '@/views/robotSLG/robot/components/Container2/index.vue'
import Device from '@/views/robotSLG/robot/components/Device/index.vue'
import ImageVideo from '@/views/robotSLG/robot/components/ImageVideo/index.vue'
import Map from '@/views/robotSLG/robot/components/map/index.vue'

import { initData } from '@/api/data'
import * as mqtt from 'mqtt'
import { getMQTTCilentId } from '@/utils/mqtt'

import {
  getRobotList,
  getRecognizeList,
  getAreaTree,
  getNaviList,
  getPositionList,
  getSenceList,
  getTaskList,
  getRobotToken,
  getPatrolRecordList,
  getAlarmList,
} from '@/api/robotSLG/public'

export default {
  components: { Container2, Device, ImageVideo, Map },
  data() {
    return {
      setting: {
        top_left_top: {
          title: '可见光',
          // subtitle: 'DEVICE LIST',
        },
        top_left_bottom: {
          title: '红外',
          // subtitle: 'TASK INFORMATION',
        },
        top_right: {
          title: '环境信息',
          // subtitle: 'ALARM LIST',
        },
        bottom_left: {
          title: '机器人',
          // subtitle: 'GAS MONITORING',
        },
        bottom_center: {
          title: '任务与巡检记录',
          // subtitle: 'SYSTEM PARAMETER',
        },
        bottom_right: {
          title: '报警信息',
          // subtitle: 'SYSTEM STATE',
        },
      },
      robotUrl: '@/assets/images/dashboard/robot.png',
      robotToken: null,
      robotList: [
        {
          id: '', //主键ID
          modelId: '', //模型ID
          number: '', //设备编号
          category: '', //设备类型
          issueDate: '', //发售时间
          sequence: '', //出厂号
          title: '', //名称
          profile: '', //头像
          desc: '', //描述
          func: '', //功能说明
          battery: '', //剩余电量
          deviceStatus: '', //设备状态
          taskMode: '', //机器人任务执行模式
          createTime: '', //创建时间
        },
      ],
      pictureUrl: '',
      activeRobot: {
        id: '', //主键ID
        modelId: '', //模型ID
        number: '', //设备编号
        category: '', //设备类型
        issueDate: '', //发售时间
        sequence: '', //出厂号
        title: '', //名称
        profile: '', //头像
        desc: '', //描述
        func: '', //功能说明
        battery: '', //剩余电量
        deviceStatus: '', //设备状态
        taskMode: '', //机器人任务执行模式
        createTime: '', //创建时间
      },
      taskList: [
        {
          //任务
          id: '', //主键ID
          periodicTaskId: '', //任务模板ID
          orgId: '', //组织ID
          robotId: '', //机器人Id
          robot: '', //机器人名称
          mapId: '', //地图ID
          map: '', //地图名称
          sceneId: '', //巡检场景ID
          scene: '', //场景名称
          title: '', //任务名称
          type: '', //任务类型
          taskFrom: '', //任务下发来源
          priority: '', //任务优先级
          exitOnPrior: '', //遇更高优先级任务提前终止
          finalJob: '', //任务完成后指令
          scheduleTime: '', //计划开始时间
          beginTime: '', //任务开始时间
          endTime: '', //任务结束时间
          state: '', //任务状态
          progress: '', //运行进度
          totalNumber: '', //须检测总数
          finishedNumber: '', //已检测总数
          defectNumber: '', //缺陷总数
          unrecognizeNumber: '', //未识别总数
          areaList: '', //关联区域列表
          positionList: '', //检测点列表
          nextPosition: '', //当前任务下一个检测点位
          editor: '', //编辑人
          createTime: '', //创建时间
        },
      ],
      patrolRecordList: [
        {
          id: '', //主键ID
          orgId: '', //组织ID
          robotId: '', //机器人ID
          robot: '', //机器人名称
          taskId: '', //任务ID
          task: '', //任务名称
          sceneId: '', //场景ID
          scene: '', //场景名称
          mapId: '', //地图ID
          map: '', //地图名称
          areaId: '', //区域ID
          area: '', //区域名称
          naviId: '', //导航点ID
          naviSequence: '', //导航点编号
          positionId: '', //巡检点ID
          indicatorId: '', //指标ID
          indicatorName: '', //指标名称
          categoryId: '', //指标类目ID
          categoryName: '', //指标类目名称
          recognizeId: '', //识别类型ID
          recognizeCode: '', //识别类型编码
          recognizeName: '', //识别类型名称
          unit: '', //单位
          index: '', //序号
          patrolTime: '', //巡检时间
          recognizeState: '', //识别状态
          thresholdId: '', //识别阈值ID
          defectGrade: '', //缺陷等级
          value: '', //检测值
          detail: '', //检测值明细
          adjustTime: '', //矫正时间
          recognizeTime: '', //识别时间
          modifiedGrade: '', //修正后等级
          defectReview: '', //缺陷追溯
          reviewMemo: '', //缺陷审核备注
          reviewState: '', //缺陷处理状态
          confirmTime: '', //缺陷确认时间
          reviewerId: '', //缺陷确认人ID
          reviewer: '', //缺陷确认人名
          solveTime: '', //缺陷解决时间
          solverId: '', //缺陷解决人ID
          solver: '', //缺陷解决人名
          guardLine: '', //警戒线
          resourceList: [
            {
              index: '', //序号
              type: '', //资源类型
              originUrl: '', //原始资源路径
              processedUrl: '', //已处理资源路径
            },
          ], //算法资源列表
          createTime: '', //创建时间
        },
      ],
      naviList: [],

      runningTask: null,

      mqttClient: null,
      topicArray: [],
      currData: {},

      robotInfo: [], //机器人缓存列表
      onlineRobort: {}, //当前选中机器人

      //实时报警数据
      alarmList: [],

      ///存储视频列表
      cameraList: [],
      //小页面视频配置
      cameraVisible1: true,
      cameraHW: {},
      cameraKJG: {},

      itemKey: '',
    }
  },
  created() {
    this.init()
  },
  computed: {
    // crudCU() {
    //   return this.crud.status.cu > 0
    // },
    VUE_APP_BASE_API() {
      return process.env.VUE_APP_BASE_API
    },
    VUE_APP_BASE_WS() {
      return 'ws://' + window.location.host + process.env.VUE_APP_BASE_API
    },
  },
  beforeDestroy() {
    this.mqttClient.end()
  },
  methods: {
    init() {
      // this.getRobotList()
      // this.getCameraList()
      // this.getAlarmInfo()
      // this.startMQTT()
      this.initRobotInfo().then(() => {
        this.getCameraConfigOption()

        this.getRobotOption()
        this.getTaskListOption()
        this.getPatrolRecordListOption()
        this.getAlarmListOption()
        //获取在执行任务并进行在执行任务实时巡检表更新
        this.getRunningTaskListOption()
        // setInterval(() => {
        //   if (this.runningTask == null || this.runningTask.id === '23') {
        //     this.getRunningTaskListOption()
        //     console.log('123')
        //   }
        //   if (this.runningTask.id !== '23') {
        //     this.getRunningPatrolRecordListOption(this.runningTask)
        //     console.log('456')
        //   }
        // }, 3000)
      })
    },
    // 机器人登录获取token
    async initRobotInfo() {
      try {
        let res = await getRobotToken(ROBOT)
        console.log(res)
        if (res.code === 1) {
          this.robotToken = res.data
        }
      } catch (error) {}
    },
    // 机器人获取机器人列表
    async getRobotOption() {
      try {
        let res = await getRobotList({ token: this.robotToken, pageIndex: 1, pageSize: 10 })
        if (res.code === 1) {
          // console.log(res)
          this.robotList = res.data.list
          this.activeRobot = this.robotList[0]
        } else {
          this.initRobotInfo()
        }
      } catch (error) {}
    },
    selectActiveRobot(r) {
      this.activeRobot = r
    },
    // 获取任务列表
    async getTaskListOption() {
      try {
        let res = await getTaskList({ token: this.robotToken, pageIndex: 1, pageSize: 10 })
        if (res.code === 1) {
          this.taskList = res.data.list
          // console.log(this.taskList)
        } else {
          this.getRobotToken()
        }
      } catch (error) {}
    },
    // 获取执行中任务
    async getRunningTaskListOption() {
      try {
        let res = await getTaskList({
          token: this.robotToken,
          pageIndex: 1,
          pageSize: 10,
          state: 'RUNNING',
        })
        if (res.code === 1) {
          this.runningTask = res.data.list[0]
          // console.log(this.runningTask)
        } else {
          this.getRobotToken()
        }
      } catch (error) {}
    },
    //获取执行中任务巡检记录表
    async getRunningPatrolRecordListOption(c) {
      try {
        let res = await getPatrolRecordList({
          token: this.robotToken,
          pageIndex: 1,
          pageSize: 10,
          taskIdList: [c.id],
        })
        if (res.code === 1) {
          this.patrolRecordList = res.data.list
          console.log(this.patrolRecordList)
          this.itemKey = Math.random()
        } else {
          this.getRobotToken()
        }
      } catch (error) {}
    },
    //获取巡检记录表
    async getPatrolRecordListOption() {
      try {
        let res = await getPatrolRecordList({ token: this.robotToken, pageIndex: 1, pageSize: 10 })
        if (res.code === 1) {
          this.patrolRecordList = res.data.list
        } else {
          this.getRobotToken()
        }
      } catch (error) {}
    },
    //获取报警列表
    async getAlarmListOption() {
      try {
        let res = await getAlarmList({ token: this.robotToken, pageIndex: 1, pageSize: 10 })
        if (res.code === 1) {
          this.alarmList = res.data.list
        } else {
          this.getRobotToken()
        }
      } catch (error) {}
    },
    // //获取导航点列表
    // async getNaviistOption() {
    //   try {
    //     let res = await getNaviList({ token: this.robotToken, pageIndex: 1, pageSize: 10 })
    //     if (res.code === 1) {
    //       this.naviList = res.data.list
    //     } else {
    //       this.getRobotToken()
    //     }
    //   } catch (error) {}
    // },

    //获取机器人摄像头
    async getCameraConfigOption() {
      try {
        let res = await initData('camera/config/getPageListJson', { name: '机器人' })
        // console.log(res.data.content)
        if (res && res.data && res.data.content && res.data.content.length > 1) {
          this.cameraHW = res.data.content[0]
          this.cameraKJG = res.data.content[1]
        }
      } catch (error) {}
    },
    //切换机器人
    changeRobot(deviceInfo) {
      if (deviceInfo) {
        for (let i = 0; i < this.robotInfo.length; i++) {
          const element = this.robotInfo[i]
          if (element.id == deviceInfo.id) {
            this.onlineRobort = element
          }
        }
        this.getOnlineRobotInfo()
        this.getTaskInfo()
      }
      // console.log(this.onlineRobort)
    },
    //转换报警信息
    setAlarmInfo(i) {
      var json = JSON.parse(i.alarmInfo)
      return i.robot + ' 在 ' + json.category + ' 区域，检测 ' + json.indicator + ' 指标异常 '
    },
    //报警列表信息背景颜色
    getBgColor(index) {
      return index % 2 == 0 ? 'transparent' : 'rgb(15, 116, 204)'
    },

    //开始MQTT接收
    startMQTT() {
      // 连接选项
      const options = {
        clean: true, // true: 清除会话, false: 保留会话
        keepalive: 60,
        connectTimeout: 4000, // 超时时间
        // 认证信息
        clientId: getMQTTCilentId('realtimedata'),
        username: 'client',
        password: '19c9547ad2029be96774fce5f1b9f099',
      }
      const connectUrl = this.VUE_APP_BASE_WS + '/MQTTOverWebSocket'
      //console.log(connectUrl)
      this.mqttClient = mqtt.connect(connectUrl, options)

      let _this = this
      this.mqttClient.on('connect', function () {
        //订阅主题
        console.log('实时数据MQTT正在连接')
        //if (_this.topicArray.length > 0) {
        //_this.mqttClient.subscribe(_this.topicArray)
        //console.log('订阅1', this.topicArray)
        //}
      })
      this.mqttClient.on('message', (topic, message) => {
        if (topic == 'Online') {
          console.log('实时数据MQTT收到消息：', topic, message.toString())
        } else if (topic.startsWith('DataCommunication/TagData/')) {
          let data = JSON.parse(message.toString())
          //console.log(JSON.parse(message.toString()))
          Vue.set(this.currData, data.Tag, data)
        }
      })
    },
    refreshSubscribe() {
      //console.log('refreshSubscribe')
      this.currData = {}
      if (this.mqttClient && this.mqttClient.connected) {
        //console.log(this.mqttClient)
        let newTopicArray
        if (this.robotInfo) {
          this.robotInfo.forEach((a) => {
            if (a.typeExtensionData)
              this.newTopicArray.push.apply(
                this.newTopicArray,
                a.typeExtensionData
                  .filter((e) => e.isTag)
                  .map((e) => 'DataCommunication/TagData/' + e.value)
              )
            if (a.extraWindowData)
              this.newTopicArray.push.apply(
                this.newTopicArray,
                a.extraWindowData
                  .filter((e) => e.isTag)
                  .map((e) => 'DataCommunication/TagData/' + e.value)
              )
          })
        }
        // console.log(this.newTopicArray);
        let unsubscribeTopicArray = lodash.difference(this.topicArray, newTopicArray)
        if (unsubscribeTopicArray.length > 0) {
          //console.log('解除订阅', unsubscribeTopicArray)
          this.mqttClient.unsubscribe(unsubscribeTopicArray)
        }
        let subscribeTopicArray = lodash.difference(newTopicArray, this.topicArray)
        if (subscribeTopicArray.length > 0) {
          //console.log('订阅', subscribeTopicArray)
          this.mqttClient.subscribe(subscribeTopicArray)
        }
        this.topicArray = newTopicArray
      } else {
        setTimeout(() => {
          //console.log('setTimeout refreshSubscribe')
          this.refreshSubscribe()
        }, 1000)
      }
    },
  },
}
</script>
<style>
.app-main {
  min-height: calc(100vh - 85px);
}
</style>

<style lang="scss" scoped>
.monitor-container {
  min-height: calc(100vh - 125px);
  height: calc(100vh - 125px);
  padding: 10px 30px 30px 30px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  div {
    border: solid 0px rgb(255, 255, 255);
    border-radius: 2px;
    //padding: 10px;
    //background-color: aqua;
  }
  .top {
    height: calc(54vh);
    display: flex;
    gap: 20px;
    .top-left {
      width: 250px;
      min-width: 364px;
      height: inherit;
      min-height: calc(20vh);
      display: flex;
      flex-direction: column;
      gap: 20px;
      .top-left-top {
        height: 360px;
        background-color: rgb(24, 120, 204);
        .device-container {
          padding: 15px;
          .device-container-slite {
            height: 10px;
          }
        }
        .video-kjg {
          background-color: rgb(24, 120, 204);
          position: absolute;
          width: 250px;
          height: 25%;
          min-width: 363px;
          min-height: calc(20vh);
          top: 6;
          left: 10;
          text-align: right;
          .close {
            margin: 10px;
          }
        }
      }
      .top-left-bottom {
        background-color: rgb(24, 120, 204);
        min-height: calc(25.5vh);
        .video-hw {
          background-color: rgb(24, 120, 204);
          position: absolute;
          width: 250px;
          height: 24.5%;
          min-width: 363px;
          min-height: calc(20vh);
          top: 99;
          left: 10;
          text-align: right;
          .close {
            margin: 10px;
          }
        }
      }
    }
    .top-center {
      width: 100%;
      min-width: 50%;
      background-color: rgb(24, 120, 204);
      position: relative;
      .map {
        border: solid 1px rgb(24, 120, 204);
        width: 100%;
        height: 100%;
      }
    }
    .top-right {
      width: 370px;
      min-width: 360px;
      background-color: rgb(24, 120, 204);
      .alarm-container {
        .mete-top {
          display: flex;
          flex-wrap: wrap;
          li {
            font-size: 13px;
            width: 50%;
            min-width: 150px;
            height: calc(2vh);
            display: flex;
          }
        }
        .mete-middle {
          display: flex;
          flex-wrap: wrap;
          li {
            font-size: 13px;
            width: 50%;
            min-width: 150px;
            list-style-type: none;
            .plate {
              background-image: url(~@/assets/images/dashboard/gas/plate1.png);
              width: 102px;
              height: 50px;
              background-size: 100% 100%;
            }
            p {
              text-align: left;
              margin: 0 0 0 24px;
            }
          }
        }
        .mete-bottom {
          display: flex;
          flex-wrap: wrap;
          li {
            margin-left: 10px;
            font-size: 12px;
            width: 45%;
            min-width: 150px;
            list-style-type: none;
            .plate2 {
              background-image: url(~@/assets/images/dashboard/gas/plate2.png);
              width: 80px;
              height: 80px;
              background-size: 100% 100%;
            }
            .plate3 {
              background-image: url(~@/assets/images/dashboard/gas/plate3.png);
              width: 80px;
              height: 80px;
              background-size: 100% 100%;
            }
            .val {
              padding: 34px 10px 10px 10px;
              align-content: left;
            }
            .unit {
              align-content: center;
            }
            p {
              text-align: left;
              margin: 1px 0 0 26px;
            }
          }
        }
      }
    }
  }
  .bottom {
    height: calc(36vh);
    display: flex;
    gap: 20px;
    .bottom-left {
      width: calc(26vw);
      min-width: 364px;
      // min-width: 15%;
      background-color: rgb(24, 120, 204);
      .robot-info {
        padding: 10px;
        display: flex;
        flex-wrap: wrap;
        gap: 22px;
        .robot-info-left {
          img {
            background-image: url(~@/assets/images/dashboard/robot.png);
            background-size: 100% 100%;
            border: 0px;
          }
        }
        .robot-info-right div {
          font-size: 14px;
          margin: 5px;
        }
      }
    }
    .bottom-center {
      // width: calc(48vw);
      // min-width: 35%;
      height: calc(30vh);
      min-height: calc(30vh);
      width: 100%;
      min-width: 53%;
      background-color: rgb(24, 120, 204);
      // .parameter {
      //   padding: 24px 31px;
      //   display: flex;
      //   flex-wrap: wrap;
      //   gap: 23px;
      //   .parameter-item {
      //     height: 32px;
      //   }
      // }
      .record-list {
        margin-bottom: 10px;
        min-height: calc(30vh);
      }
    }
    .bottom-right {
      width: 370px;
      min-width: 370px;
      // min-width: 25%;
      background-color: rgb(24, 120, 204);
      .alarm {
        height: calc(30vh);
        overflow-y: scroll;
        .alarm-item-container {
          margin: 6px;
          text-align: justify;
          height: 52px;
          padding: 8px 10px;
          background-color: transparent;
          font-size: 16px;
          line-height: 22px;
          // height: calc(100% - 30px);
        }
      }
    }
  }
}
</style>
