diff --git a/src/assets/styles/alarm-card.scss b/src/assets/styles/alarm-card.scss new file mode 100644 index 00000000..df50ae15 --- /dev/null +++ b/src/assets/styles/alarm-card.scss @@ -0,0 +1,138 @@ +// 卡片视图样式 +.card-list-box { + .card-item-col { + margin-top: 15px; + } + + .card-item { + height: 100%; + border-radius: 10px; + border: 1px solid #ebeef5; + background-color: #fff; + overflow: hidden; + color: #303133; + transition: 0.3s; + cursor: pointer; + &:hover { + box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2); + //border: 1px solid #409EFF; + } + + .card-header { + padding: 10px 20px 0px 20px; + position: relative; + .card-header-top{ + display: flex; + align-items: center; + .device-img-box{ + width: 60px; + height: 60px; + img{ + width: 100%; + height: 100%; + } + } + .card-item-name { + margin-left: 10px; + font-size: 18px; + line-height: 18px; + font-weight: bold; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: calc(100% - 110px); + } + } + + .card-status{ + position: absolute; + top: 30px; + line-height: 24px; + right: -12px; + display: flex; + justify-content: center; + align-items: center; + width: 100px; + padding: 2px 0; + background-color: rgba(89, 149, 245, 0.15); + border-radius: 15px 0 0 15px; + box-sizing: border-box; + &::before{ + content: ''; + border-radius: 50%; + display: inline-block; + height: 6px; + top: -1px; + vertical-align: middle; + width: 6px; + background: rgba(102, 102, 102, 0.1); + margin-right: 5px; + } + &.card-status0{ + background-color: rgba(229, 0, 18, 0.1); + &::before{ + background: rgb(229, 0, 18); + } + } + &.card-status1{ + background-color: rgba(24,144,255, 0.1); + &::before{ + background: rgb(24,144,255); + } + } + &.card-status2{ + background-color: rgba(255, 144, 0, 0.1); + &::before{ + background: rgb(255, 144, 0); + } + } + + } + } + .card-content { + padding: 10px 20px; + display: flex; + flex-wrap: wrap; + .info-item { + display: flex; + align-items: center; + margin-bottom: 5px; + font-size: 11px; + width: 50%; + .label { + color: #909399; + width: 70px; + } + .value { + width: calc(100% - 70px); + color: #606266; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + //&:nth-child(2n){ + // width: 50%; + // .label { + // width: 70px; + // } + //} + } + } + + .card-footer { + display: flex; + justify-content: space-around; + align-items: center; + padding: 10px 15px; + border-top: 1px solid #ebeef5; + + .el-button { + padding: 5px 8px; + + &:hover { + color: #409EFF; + } + } + } + } +} diff --git a/src/views/iot/alarm/record/index.vue b/src/views/iot/alarm/record/index.vue index 5c9252db..28798d87 100644 --- a/src/views/iot/alarm/record/index.vue +++ b/src/views/iot/alarm/record/index.vue @@ -51,18 +51,38 @@ 重置 + + + + + + + + + + + + + 导出导出 - - + + + + - + - + +
+ + +
+
+
+
+ + +
+
{{ item.typeName }}
+
+
+ {{ stateFormatter(item) }} +
+
+
+
+ 报警设备： + + {{ item.deviceName }} + +
+
+ 所属项目： + + {{ item.inProjectName }} + +
+
+ 报警内容： + + {{ item.alarmContent }} + +
+
+ 报警时间： + + {{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}} + +
+
+ 处理结果： + + {{ item.processResult }} + +
+
+ 处理时间： + + {{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}} + +
+
+
+ 处理 + + 创建工单 +
+
+ + +
+ + diff --git a/src/views/iot/alarm/waringRecord/index.vue b/src/views/iot/alarm/waringRecord/index.vue index f1665a07..62216ff6 100644 --- a/src/views/iot/alarm/waringRecord/index.vue +++ b/src/views/iot/alarm/waringRecord/index.vue @@ -1,5 +1,5 @@