0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

🌷 UI(报警、预警): 报警、预警记录（运营、企业端）添加卡片式页面

This commit is contained in:
fhysy 2025-05-08 16:48:10 +08:00
parent 2609352f30
commit 4ce851bff7
5 changed files with 651 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/assets/styles/alarm-card.scss Normal file
View File

@ -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;
}
}
}
}
}

147
src/views/iot/alarm/record/index.vue
View File

@ -51,18 +51,38 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
<!-- <el-button-->
<!-- icon="el-icon-download"-->
<!-- plain-->
<!-- size="mini"-->
<!-- type="warning"-->
<!-- @click="handleExport"-->
<!-- >导出</el-button-->
<!-- >-->
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
icon="el-icon-download"
plain
size="mini"
type="warning"
@click="handleExport"
>导出</el-button
>导出</el-button
>
</el-form-item>
</el-form>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
:view-type="viewType"
@changeViewType="changeViewType"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="viewType!='card'"
v-loading="loading"
:data="recordList"
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
@ -76,10 +96,14 @@
width="80px"
></el-table-column>
<el-table-column
align="left"
align="center"
label="告警类型"
prop="typeName"
/>
<el-table-column
align="center"
label="设备名称"
prop="deviceName"
width="200px"
/>
<!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
<template slot-scope="scope">
@ -87,13 +111,12 @@
</template>
</el-table-column>-->
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<el-table-column align="left" label="推送内容" prop="alarmContent" />
<el-table-column align="center" label="报警内容" prop="alarmContent" />
<el-table-column
align="center"
label="报警时间"
prop="alarmTime"
sortable="custom"
width="150"
>
<template slot-scope="scope">
<span>{{
@ -105,14 +128,20 @@
:formatter="stateFormatter"
align="center"
label="处理状态"
prop="processState"
prop="processStatus"
width="100px"
/>
>
<template slot-scope="scope">
<el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column
align="left"
align="center"
label="处理结果"
prop="processResult"
width="150px"
/>
<el-table-column
align="center"
@ -127,12 +156,7 @@
}}</span>
</template>
</el-table-column>
<el-table-column
align="left"
label="告警类型"
prop="typeName"
width="150px"
/>
<!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
<el-table-column
align="center"
@ -159,9 +183,88 @@
</el-table-column>
</el-table>
<div v-else class="card-list-box">
<el-row :gutter="20">
<el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
<div class="card-item">
<div class="card-header">
<div class="card-header-top">
<div class="device-img-box">
<el-image
:src="'http://static.drgyen.com/pc/smart-power-ui/alarm/alarm-config.png'"
style="width: 100%; height: 100%">
</el-image>
</div>
<div class="card-item-name">{{ item.typeName }}</div>
</div>
<div :class="'card-status'+item.processStatus" class="card-status">
{{ stateFormatter(item) }}
</div>
</div>
<div class="card-content">
<div class="info-item">
<span class="label">报警设备：</span>
<el-tooltip :content="item.deviceName" effect="dark" placement="top">
<span class="value">{{ item.deviceName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">所属项目：</span>
<el-tooltip :content="item.inProjectName" effect="dark" placement="top">
<span class="value">{{ item.inProjectName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">报警内容：</span>
<el-tooltip :content="item.alarmContent" effect="dark" placement="top">
<span class="value">{{ item.alarmContent }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">报警时间：</span>
<el-tooltip :content="item.alarmTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理结果：</span>
<el-tooltip :content="item.processResult" effect="dark" placement="top">
<span class="value">{{ item.processResult }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理时间：</span>
<el-tooltip :content="item.processTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
</div>
<div class="card-footer">
<el-button
:disabled="item.processStatus !== '0'"
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(item)"
>处理</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
icon="el-icon-document-add"
size="mini"
type="text"
@click="handleWork(item)"
>创建工单</el-button
>
</div>
</div>
</el-col>
</el-row>
</div>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page-sizes="[12, 24, 36, 60]"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
@ -210,6 +313,8 @@ export default {
},
data() {
return {
//列表显示视图
viewType: "card",
// 遮罩层
loading: true,
// 选中数组
@ -231,7 +336,7 @@ export default {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 12,
typeName: null,
typeCode: null,
inProject: null,
@ -254,6 +359,9 @@ export default {
this.getInProjectList();
},
methods: {
changeViewType(type) {
this.viewType=type;
},
// 查询所属项目列表
getInProjectList() {
listProject({
@ -415,3 +523,6 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/alarm-card.scss";
</style>

185
src/views/iot/alarm/waringRecord/index.vue
View File

@ -1,5 +1,5 @@
<template>
<!-- 告警记录功能 -->
<!-- 预警记录功能 -->
<div class="app-container alarm-record">
<el-form
v-show="showSearch"
@ -52,6 +52,11 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
icon="el-icon-download"
plain
@ -60,10 +65,17 @@
@click="handleExport"
>导出</el-button
>
</el-form-item>
</el-form>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
:view-type="viewType"
@changeViewType="changeViewType"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="viewType!='card'"
v-loading="loading"
:data="recordList"
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
@ -77,17 +89,17 @@
width="60"
></el-table-column>
<el-table-column
align="left"
align="center"
label="预警类型"
prop="typeName"
/>
<el-table-column
align="center"
label="设备名称"
prop="deviceName"
/>
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" >
<template slot-scope="scope">
<span style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">{{scope.row.currentValue}}</span>
</template>
</el-table-column> -->
<el-table-column align="left" label="推送内容" prop="alarmContent" />
<el-table-column align="center" label="预警内容" prop="alarmContent" />
<el-table-column
align="center"
label="预警时间"
@ -102,21 +114,24 @@
</template>
</el-table-column>
<el-table-column
:formatter="stateFormatter"
align="center"
label="处理状态"
prop="processState"
/>
<el-table-column
align="left"
label="处理结果"
prop="processResult"
sortable="custom"
/>
prop="processStatus"
width="100"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="处理结果" prop="processResult" />
<el-table-column
align="center"
label="处理时间"
prop="processTime"
sortable="custom"
>
<template slot-scope="scope">
<span>{{
@ -124,16 +139,12 @@
}}</span>
</template>
</el-table-column>
<el-table-column
align="left"
label="告警类型"
prop="typeName"
/>
<!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="150"
>
<template slot-scope="scope">
<el-button
@ -155,9 +166,87 @@
</el-table-column>
</el-table>
<div v-else class="card-list-box">
<el-row :gutter="20">
<el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
<div class="card-item">
<div class="card-header">
<div class="card-header-top">
<div class="device-img-box">
<el-image
:src="'http://static.drgyen.com/pc/smart-power-ui/alarm/device.png'"
style="width: 100%; height: 100%">
</el-image>
</div>
<div class="card-item-name">{{ item.typeName }}</div>
</div>
<div :class="'card-status'+item.processStatus" class="card-status">
{{ stateFormatter(item) }}
</div>
</div>
<div class="card-content">
<div class="info-item">
<span class="label">预警设备：</span>
<el-tooltip :content="item.deviceName" effect="dark" placement="top">
<span class="value">{{ item.deviceName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">所属项目：</span>
<el-tooltip :content="item.inProjectName" effect="dark" placement="top">
<span class="value">{{ item.inProjectName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">预警内容：</span>
<el-tooltip :content="item.alarmContent" effect="dark" placement="top">
<span class="value">{{ item.alarmContent }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">预警时间：</span>
<el-tooltip :content="item.alarmTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理结果：</span>
<el-tooltip :content="item.processResult" effect="dark" placement="top">
<span class="value">{{ item.processResult }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理时间：</span>
<el-tooltip :content="item.processTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
</div>
<div class="card-footer">
<el-button
:disabled="item.processStatus !== '0'"
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(item)"
>处理</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
icon="el-icon-document-add"
size="mini"
type="text"
@click="handleWork(item)"
>创建工单</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page-sizes="[12, 24, 36, 60]"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
@ -180,6 +269,8 @@ export default {
components: {},
data() {
return {
// 视图类型
viewType: "card",
// 遮罩层
loading: true,
// 选中数组
@ -196,12 +287,10 @@ export default {
recordList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 12,
typeName: null,
typeCode: null,
inProject: null,
@ -224,6 +313,10 @@ export default {
this.getInProjectList();
},
methods: {
// 切换视图类型
changeViewType(type) {
this.viewType = type;
},
// 查询所属项目列表
getInProjectList() {
listProject({
@ -235,7 +328,7 @@ export default {
this.inProjectList = response.rows;
});
},
// 处理告警
// 处理预警
handleUpdate(row) {
const recordId = row.recordId || this.ids;
this.$confirm("是否设置此预警为已处理状态?", "警告", {
@ -260,7 +353,7 @@ export default {
})
.then(function () {
return addAlarmRecord({
recordId: row.recordId, //告警记录id
recordId: row.recordId, //预警记录id
deviceId: row.deviceId,
deviceName: row.deviceName,
faultType: "4", //固定
@ -326,19 +419,6 @@ export default {
this.loading = false;
});
},
// 取消按钮
cancel() {
this.open = false;
this.reset();
},
// 根据id获取记录详情
getRecordInfo(id) {
getRecord(id).then((res) => {
this.form = res.data;
this.open = true;
this.title = `告警记录详情`;
});
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@ -367,6 +447,25 @@ export default {
this.download(response.msg);
});
},
submitForm() {
this.$refs["dialogForm"].validate((v) => {
if (v) {
this.form.processTime = this.parseTime(
new Date(),
"{y}-{m}-{d} {h}:{i}:{s}"
);
this.form.processStatus = "2";
updateRecord(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
}
});
},
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/alarm-card.scss";
</style>

138
src/views/tenant/alarm/record.vue
View File

@ -53,18 +53,29 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
icon="el-icon-download"
plain
size="mini"
type="warning"
@click="handleExport"
>导出</el-button
>
</el-form-item>
</el-form>
>导出</el-button>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
:view-type="viewType"
@changeViewType="changeViewType"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="viewType!='card'"
v-loading="loading"
:data="recordList"
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
@ -78,13 +89,17 @@
width="60"
></el-table-column>
<el-table-column
align="left"
align="center"
label="告警类型"
prop="typeName"
/>
<el-table-column
align="center"
label="设备名称"
prop="deviceName"
/>
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" /> -->
<el-table-column align="left" label="推送内容" prop="alarmContent" />
<el-table-column align="center" label="报警内容" prop="alarmContent" />
<el-table-column
align="center"
label="报警时间"
@ -99,12 +114,19 @@
</template>
</el-table-column>
<el-table-column
:formatter="stateFormatter"
align="center"
label="处理状态"
prop="processStatus"
/>
<el-table-column align="left" label="处理结果" prop="processResult" />
width="100"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="处理结果" prop="processResult" />
<el-table-column
align="center"
label="处理时间"
@ -117,15 +139,12 @@
}}</span>
</template>
</el-table-column>
<el-table-column
align="left"
label="告警类型"
prop="typeName"
/>
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="150"
>
<template slot-scope="scope">
<el-button
@ -147,9 +166,87 @@
</el-table-column>
</el-table>
<div v-else class="card-list-box">
<el-row :gutter="20">
<el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
<div class="card-item">
<div class="card-header">
<div class="card-header-top">
<div class="device-img-box">
<el-image
:src="'http://static.drgyen.com/pc/smart-power-ui/alarm/alarm-config.png'"
style="width: 100%; height: 100%">
</el-image>
</div>
<div class="card-item-name">{{ item.typeName }}</div>
</div>
<div :class="'card-status'+item.processStatus" class="card-status">
{{ stateFormatter(item) }}
</div>
</div>
<div class="card-content">
<div class="info-item">
<span class="label">报警设备：</span>
<el-tooltip :content="item.deviceName" effect="dark" placement="top">
<span class="value">{{ item.deviceName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">所属项目：</span>
<el-tooltip :content="item.inProjectName" effect="dark" placement="top">
<span class="value">{{ item.inProjectName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">报警内容：</span>
<el-tooltip :content="item.alarmContent" effect="dark" placement="top">
<span class="value">{{ item.alarmContent }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">报警时间：</span>
<el-tooltip :content="item.alarmTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理结果：</span>
<el-tooltip :content="item.processResult" effect="dark" placement="top">
<span class="value">{{ item.processResult }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理时间：</span>
<el-tooltip :content="item.processTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
</div>
<div class="card-footer">
<el-button
:disabled="item.processStatus !== '0'"
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(item)"
>处理</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
icon="el-icon-document-add"
size="mini"
type="text"
@click="handleWork(item)"
>创建工单</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page-sizes="[12, 24, 36, 60]"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
@ -208,6 +305,8 @@ export default {
},
data() {
return {
// 视图类型
viewType: "card",
// 遮罩层
loading: true,
// 选中数组
@ -229,7 +328,7 @@ export default {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 12,
typeName: null,
typeCode: null,
inProject: null,
@ -253,6 +352,10 @@ export default {
this.getInProjectList();
},
methods: {
// 切换视图类型
changeViewType(type) {
this.viewType = type;
},
// 查询所属项目列表
getInProjectList() {
listProject({
@ -445,3 +548,6 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/alarm-card.scss";
</style>

134
src/views/tenant/alarm/warning.vue
View File

@ -52,6 +52,11 @@
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button
>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8">
<el-col :span="1.5">
<el-button
icon="el-icon-download"
plain
@ -60,10 +65,17 @@
@click="handleExport"
>导出</el-button
>
</el-form-item>
</el-form>
</el-col>
<right-toolbar
:showSearch.sync="showSearch"
:view-type="viewType"
@changeViewType="changeViewType"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-if="viewType!='card'"
v-loading="loading"
:data="recordList"
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
@ -77,13 +89,17 @@
width="60"
></el-table-column>
<el-table-column
align="left"
align="center"
label="预警类型"
prop="typeName"
/>
<el-table-column
align="center"
label="设备名称"
prop="deviceName"
/>
<el-table-column align="center" label="所属项目" prop="inProjectName" />
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" /> -->
<el-table-column align="left" label="推送内容" prop="alarmContent" />
<el-table-column align="center" label="预警内容" prop="alarmContent" />
<el-table-column
align="center"
label="预警时间"
@ -98,12 +114,19 @@
</template>
</el-table-column>
<el-table-column
:formatter="stateFormatter"
align="center"
label="处理状态"
prop="processStatus"
/>
<el-table-column align="left" label="处理结果" prop="processResult" />
width="100"
>
<template slot-scope="scope">
<el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else-if="scope.row.processStatus === '2'" type="warning" >{{ stateFormatter(scope.row) }}</el-tag>
<el-tag v-else type="info" >{{ stateFormatter(scope.row) }}</el-tag>
</template>
</el-table-column>
<el-table-column align="center" label="处理结果" prop="processResult" />
<el-table-column
align="center"
label="处理时间"
@ -116,15 +139,11 @@
}}</span>
</template>
</el-table-column>
<el-table-column
align="left"
label="预警类型"
prop="typeName"
/>
<el-table-column
align="center"
class-name="small-padding fixed-width"
label="操作"
width="150"
>
<template slot-scope="scope">
<el-button
@ -146,9 +165,87 @@
</el-table-column>
</el-table>
<div v-else class="card-list-box">
<el-row :gutter="20">
<el-col v-for="(item, index) in recordList" :key="index" :lg="8" :md="12" :sm="12" :xs="24" class="card-item-col">
<div class="card-item">
<div class="card-header">
<div class="card-header-top">
<div class="device-img-box">
<el-image
:src="'http://static.drgyen.com/pc/smart-power-ui/alarm/device.png'"
style="width: 100%; height: 100%">
</el-image>
</div>
<div class="card-item-name">{{ item.typeName }}</div>
</div>
<div :class="'card-status'+item.processStatus" class="card-status">
{{ stateFormatter(item) }}
</div>
</div>
<div class="card-content">
<div class="info-item">
<span class="label">预警设备：</span>
<el-tooltip :content="item.deviceName" effect="dark" placement="top">
<span class="value">{{ item.deviceName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">所属项目：</span>
<el-tooltip :content="item.inProjectName" effect="dark" placement="top">
<span class="value">{{ item.inProjectName }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">预警内容：</span>
<el-tooltip :content="item.alarmContent" effect="dark" placement="top">
<span class="value">{{ item.alarmContent }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">预警时间：</span>
<el-tooltip :content="item.alarmTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.alarmTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理结果：</span>
<el-tooltip :content="item.processResult" effect="dark" placement="top">
<span class="value">{{ item.processResult }}</span>
</el-tooltip>
</div>
<div class="info-item">
<span class="label">处理时间：</span>
<el-tooltip :content="item.processTime" effect="dark" placement="top">
<span class="value">{{parseTime(item.processTime, "{y}-{m}-{d} {h}:{i}:{s}")}}</span>
</el-tooltip>
</div>
</div>
<div class="card-footer">
<el-button
:disabled="item.processStatus !== '0'"
icon="el-icon-edit"
size="mini"
type="text"
@click="handleUpdate(item)"
>处理</el-button>
<el-divider direction="vertical"></el-divider>
<el-button
icon="el-icon-document-add"
size="mini"
type="text"
@click="handleWork(item)"
>创建工单</el-button>
</div>
</div>
</el-col>
</el-row>
</div>
<pagination
v-show="total > 0"
:limit.sync="queryParams.pageSize"
:page-sizes="[12, 24, 36, 60]"
:page.sync="queryParams.pageNum"
:total="total"
@pagination="getList"
@ -206,6 +303,8 @@ export default {
},
data() {
return {
// 视图类型
viewType: "card",
// 遮罩层
loading: true,
// 选中数组
@ -227,7 +326,7 @@ export default {
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
pageSize: 12,
typeName: null,
typeCode: null,
inProject: null,
@ -251,6 +350,9 @@ export default {
this.getInProjectList();
},
methods: {
changeViewType(type) {
this.viewType=type;
},
// 查询所属项目列表
getInProjectList() {
listProject({
@ -439,3 +541,7 @@ export default {
},
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/alarm-card.scss";
</style>