|
|
@@ -0,0 +1,170 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="异常报警详情" title-color="#101010" ></u-navbar>
|
|
|
+ <view class="main">
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 报警单号：A100001
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ <text class="reason">温度异常</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 报警设备
|
|
|
+ </view>
|
|
|
+ <view class="value equipment">
|
|
|
+ 荆鹏集团-荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 报警内容
|
|
|
+ </view>
|
|
|
+ <view class="value warning">
|
|
|
+ 温度过高 120°C
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 地址
|
|
|
+ </view>
|
|
|
+ <view class="value ">
|
|
|
+ 沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <view class="title">
|
|
|
+ 报警内容
|
|
|
+ </view>
|
|
|
+ <view class="value">
|
|
|
+ 2024-02-04 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 异常记录 -->
|
|
|
+ <view class="record-chat">
|
|
|
+ <view class="title">
|
|
|
+ 异常记录
|
|
|
+ </view>
|
|
|
+ <view class="chat-box">
|
|
|
+ <view class="date">
|
|
|
+ 2月4日温度监控
|
|
|
+ </view>
|
|
|
+ <view class="chat">
|
|
|
+ <image class="img" src="@/assets/img/recordChat.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <view class="bottom">
|
|
|
+ <button class="close">关闭警报</button>
|
|
|
+ <button class="create">创建工单</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .main{
|
|
|
+ background-color: #fff;
|
|
|
+ .item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 28rpx 32rpx;
|
|
|
+ border-bottom: 1px solid rgba(242,242,242,1);
|
|
|
+ .title{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ }
|
|
|
+ .value{
|
|
|
+ color: rgb(16,16,16);
|
|
|
+ font-size: 32rpx;
|
|
|
+ .reason{
|
|
|
+ display: inline-block;
|
|
|
+ width: 128rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: rgba(255,61,0,1);
|
|
|
+ border: 1px solid rgba(255,61,0,1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .equipment{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .warning{
|
|
|
+ color: rgba(255,61,0,1);
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 异常记录
|
|
|
+ .record-chat{
|
|
|
+ padding: 40rpx 32rpx;
|
|
|
+ .title{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .chat-box{
|
|
|
+ padding: 24rpx 0;
|
|
|
+ margin-top: 24rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: linear-gradient(180deg, rgba(255,243,208,1) 0%,rgba(208,236,236,0) 100%);
|
|
|
+
|
|
|
+ .date{
|
|
|
+ padding: 0 40rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .img{
|
|
|
+ width: 100%;
|
|
|
+ height: 400rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 底部
|
|
|
+ .bottom{
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx 32rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ .close{
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(222,225,228,1);
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ .create{
|
|
|
+ width: 328rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
