🌷 UI(报警、预警): 报警、预警记录（运营、企业端）添加卡片式页面
This commit is contained in:
fhysy
parent
2609352f30
commit
4ce851bff7
|
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -51,18 +51,38 @@
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||||
>重置</el-button
|
>重置</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
|
<el-button
|
||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
plain
|
plain
|
||||||
size="mini"
|
size="mini"
|
||||||
type="warning"
|
type="warning"
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
>导出</el-button
|
>导出</el-button
|
||||||
>
|
>
|
||||||
</el-form-item>
|
</el-col>
|
||||||
</el-form>
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
:view-type="viewType"
|
||||||
|
@changeViewType="changeViewType"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
|
v-if="viewType!='card'"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="recordList"
|
:data="recordList"
|
||||||
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
||||||
|
|
@ -76,10 +96,14 @@
|
||||||
width="80px"
|
width="80px"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="left"
|
align="center"
|
||||||
|
label="告警类型"
|
||||||
|
prop="typeName"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
label="设备名称"
|
label="设备名称"
|
||||||
prop="deviceName"
|
prop="deviceName"
|
||||||
width="200px"
|
|
||||||
/>
|
/>
|
||||||
<!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
|
<!-- <el-table-column label="设备当前值" align="left" prop="currentValue" >
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
|
|
@ -87,13 +111,12 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>-->
|
</el-table-column>-->
|
||||||
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
<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
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="报警时间"
|
label="报警时间"
|
||||||
prop="alarmTime"
|
prop="alarmTime"
|
||||||
sortable="custom"
|
sortable="custom"
|
||||||
width="150"
|
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{
|
<span>{{
|
||||||
|
|
@ -105,14 +128,20 @@
|
||||||
:formatter="stateFormatter"
|
:formatter="stateFormatter"
|
||||||
align="center"
|
align="center"
|
||||||
label="处理状态"
|
label="处理状态"
|
||||||
prop="processState"
|
prop="processStatus"
|
||||||
width="100px"
|
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
|
<el-table-column
|
||||||
align="left"
|
align="center"
|
||||||
label="处理结果"
|
label="处理结果"
|
||||||
prop="processResult"
|
prop="processResult"
|
||||||
width="150px"
|
|
||||||
/>
|
/>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
|
|
@ -127,12 +156,7 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</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 label="类型编码" align="left" width="150px" prop="typeCode" /> -->
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
|
|
@ -159,9 +183,88 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</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
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page-sizes="[12, 24, 36, 60]"
|
||||||
:page.sync="queryParams.pageNum"
|
:page.sync="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
|
|
@ -210,6 +313,8 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
//列表显示视图
|
||||||
|
viewType: "card",
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
|
|
@ -231,7 +336,7 @@ export default {
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 12,
|
||||||
typeName: null,
|
typeName: null,
|
||||||
typeCode: null,
|
typeCode: null,
|
||||||
inProject: null,
|
inProject: null,
|
||||||
|
|
@ -254,6 +359,9 @@ export default {
|
||||||
this.getInProjectList();
|
this.getInProjectList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changeViewType(type) {
|
||||||
|
this.viewType=type;
|
||||||
|
},
|
||||||
// 查询所属项目列表
|
// 查询所属项目列表
|
||||||
getInProjectList() {
|
getInProjectList() {
|
||||||
listProject({
|
listProject({
|
||||||
|
|
@ -415,3 +523,6 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/assets/styles/alarm-card.scss";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<!-- 告警记录功能 -->
|
<!-- 预警记录功能 -->
|
||||||
<div class="app-container alarm-record">
|
<div class="app-container alarm-record">
|
||||||
<el-form
|
<el-form
|
||||||
v-show="showSearch"
|
v-show="showSearch"
|
||||||
|
|
@ -52,6 +52,11 @@
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||||
>重置</el-button
|
>重置</el-button
|
||||||
>
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
<el-button
|
<el-button
|
||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
plain
|
plain
|
||||||
|
|
@ -60,10 +65,17 @@
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
>导出</el-button
|
>导出</el-button
|
||||||
>
|
>
|
||||||
</el-form-item>
|
</el-col>
|
||||||
</el-form>
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
:view-type="viewType"
|
||||||
|
@changeViewType="changeViewType"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
|
v-if="viewType!='card'"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="recordList"
|
:data="recordList"
|
||||||
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
||||||
|
|
@ -77,17 +89,17 @@
|
||||||
width="60"
|
width="60"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="left"
|
align="center"
|
||||||
|
label="预警类型"
|
||||||
|
prop="typeName"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
label="设备名称"
|
label="设备名称"
|
||||||
prop="deviceName"
|
prop="deviceName"
|
||||||
/>
|
/>
|
||||||
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
||||||
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" >
|
<el-table-column align="center" label="预警内容" prop="alarmContent" />
|
||||||
<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
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="预警时间"
|
label="预警时间"
|
||||||
|
|
@ -102,21 +114,24 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:formatter="stateFormatter"
|
|
||||||
align="center"
|
align="center"
|
||||||
label="处理状态"
|
label="处理状态"
|
||||||
prop="processState"
|
prop="processStatus"
|
||||||
/>
|
width="100"
|
||||||
<el-table-column
|
>
|
||||||
align="left"
|
<template slot-scope="scope">
|
||||||
label="处理结果"
|
<el-tag v-if="scope.row.processStatus === '1'" >{{ stateFormatter(scope.row) }}</el-tag>
|
||||||
prop="processResult"
|
<el-tag v-else-if="scope.row.processStatus === '0'" type="danger" >{{ stateFormatter(scope.row) }}</el-tag>
|
||||||
sortable="custom"
|
<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
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="处理时间"
|
label="处理时间"
|
||||||
prop="processTime"
|
prop="processTime"
|
||||||
|
sortable="custom"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<span>{{
|
<span>{{
|
||||||
|
|
@ -124,16 +139,12 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="告警类型"
|
|
||||||
prop="typeName"
|
|
||||||
/>
|
|
||||||
<!-- <el-table-column label="类型编码" align="left" width="150px" prop="typeCode" /> -->
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
class-name="small-padding fixed-width"
|
class-name="small-padding fixed-width"
|
||||||
label="操作"
|
label="操作"
|
||||||
|
width="150"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -155,9 +166,87 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</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
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page-sizes="[12, 24, 36, 60]"
|
||||||
:page.sync="queryParams.pageNum"
|
:page.sync="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
|
|
@ -180,6 +269,8 @@ export default {
|
||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 视图类型
|
||||||
|
viewType: "card",
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
|
|
@ -196,12 +287,10 @@ export default {
|
||||||
recordList: [],
|
recordList: [],
|
||||||
// 弹出层标题
|
// 弹出层标题
|
||||||
title: "",
|
title: "",
|
||||||
// 是否显示弹出层
|
|
||||||
open: false,
|
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 12,
|
||||||
typeName: null,
|
typeName: null,
|
||||||
typeCode: null,
|
typeCode: null,
|
||||||
inProject: null,
|
inProject: null,
|
||||||
|
|
@ -224,6 +313,10 @@ export default {
|
||||||
this.getInProjectList();
|
this.getInProjectList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 切换视图类型
|
||||||
|
changeViewType(type) {
|
||||||
|
this.viewType = type;
|
||||||
|
},
|
||||||
// 查询所属项目列表
|
// 查询所属项目列表
|
||||||
getInProjectList() {
|
getInProjectList() {
|
||||||
listProject({
|
listProject({
|
||||||
|
|
@ -235,7 +328,7 @@ export default {
|
||||||
this.inProjectList = response.rows;
|
this.inProjectList = response.rows;
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 处理告警
|
// 处理预警
|
||||||
handleUpdate(row) {
|
handleUpdate(row) {
|
||||||
const recordId = row.recordId || this.ids;
|
const recordId = row.recordId || this.ids;
|
||||||
this.$confirm("是否设置此预警为已处理状态?", "警告", {
|
this.$confirm("是否设置此预警为已处理状态?", "警告", {
|
||||||
|
|
@ -260,7 +353,7 @@ export default {
|
||||||
})
|
})
|
||||||
.then(function () {
|
.then(function () {
|
||||||
return addAlarmRecord({
|
return addAlarmRecord({
|
||||||
recordId: row.recordId, //告警记录id
|
recordId: row.recordId, //预警记录id
|
||||||
deviceId: row.deviceId,
|
deviceId: row.deviceId,
|
||||||
deviceName: row.deviceName,
|
deviceName: row.deviceName,
|
||||||
faultType: "4", //固定
|
faultType: "4", //固定
|
||||||
|
|
@ -326,19 +419,6 @@ export default {
|
||||||
this.loading = false;
|
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() {
|
handleQuery() {
|
||||||
this.queryParams.pageNum = 1;
|
this.queryParams.pageNum = 1;
|
||||||
|
|
@ -367,6 +447,25 @@ export default {
|
||||||
this.download(response.msg);
|
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>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/assets/styles/alarm-card.scss";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -53,18 +53,29 @@
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||||
>重置</el-button
|
>重置</el-button
|
||||||
>
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
<el-button
|
<el-button
|
||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
plain
|
plain
|
||||||
size="mini"
|
size="mini"
|
||||||
type="warning"
|
type="warning"
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
>导出</el-button
|
>导出</el-button>
|
||||||
>
|
</el-col>
|
||||||
</el-form-item>
|
<right-toolbar
|
||||||
</el-form>
|
:showSearch.sync="showSearch"
|
||||||
|
:view-type="viewType"
|
||||||
|
@changeViewType="changeViewType"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
|
v-if="viewType!='card'"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="recordList"
|
:data="recordList"
|
||||||
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
||||||
|
|
@ -78,13 +89,17 @@
|
||||||
width="60"
|
width="60"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="left"
|
align="center"
|
||||||
|
label="告警类型"
|
||||||
|
prop="typeName"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
label="设备名称"
|
label="设备名称"
|
||||||
prop="deviceName"
|
prop="deviceName"
|
||||||
/>
|
/>
|
||||||
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
||||||
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" /> -->
|
<el-table-column align="center" label="报警内容" prop="alarmContent" />
|
||||||
<el-table-column align="left" label="推送内容" prop="alarmContent" />
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="报警时间"
|
label="报警时间"
|
||||||
|
|
@ -99,12 +114,19 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:formatter="stateFormatter"
|
|
||||||
align="center"
|
align="center"
|
||||||
label="处理状态"
|
label="处理状态"
|
||||||
prop="processStatus"
|
prop="processStatus"
|
||||||
/>
|
width="100"
|
||||||
<el-table-column align="left" label="处理结果" prop="processResult" />
|
>
|
||||||
|
<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
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="处理时间"
|
label="处理时间"
|
||||||
|
|
@ -117,15 +139,12 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="告警类型"
|
|
||||||
prop="typeName"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
class-name="small-padding fixed-width"
|
class-name="small-padding fixed-width"
|
||||||
label="操作"
|
label="操作"
|
||||||
|
width="150"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -147,9 +166,87 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</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
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page-sizes="[12, 24, 36, 60]"
|
||||||
:page.sync="queryParams.pageNum"
|
:page.sync="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
|
|
@ -208,6 +305,8 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 视图类型
|
||||||
|
viewType: "card",
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
|
|
@ -229,7 +328,7 @@ export default {
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 12,
|
||||||
typeName: null,
|
typeName: null,
|
||||||
typeCode: null,
|
typeCode: null,
|
||||||
inProject: null,
|
inProject: null,
|
||||||
|
|
@ -253,6 +352,10 @@ export default {
|
||||||
this.getInProjectList();
|
this.getInProjectList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
// 切换视图类型
|
||||||
|
changeViewType(type) {
|
||||||
|
this.viewType = type;
|
||||||
|
},
|
||||||
// 查询所属项目列表
|
// 查询所属项目列表
|
||||||
getInProjectList() {
|
getInProjectList() {
|
||||||
listProject({
|
listProject({
|
||||||
|
|
@ -445,3 +548,6 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/assets/styles/alarm-card.scss";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -52,6 +52,11 @@
|
||||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||||
>重置</el-button
|
>重置</el-button
|
||||||
>
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
|
||||||
|
<el-row :gutter="10" class="mb8">
|
||||||
|
<el-col :span="1.5">
|
||||||
<el-button
|
<el-button
|
||||||
icon="el-icon-download"
|
icon="el-icon-download"
|
||||||
plain
|
plain
|
||||||
|
|
@ -60,10 +65,17 @@
|
||||||
@click="handleExport"
|
@click="handleExport"
|
||||||
>导出</el-button
|
>导出</el-button
|
||||||
>
|
>
|
||||||
</el-form-item>
|
</el-col>
|
||||||
</el-form>
|
<right-toolbar
|
||||||
|
:showSearch.sync="showSearch"
|
||||||
|
:view-type="viewType"
|
||||||
|
@changeViewType="changeViewType"
|
||||||
|
@queryTable="getList"
|
||||||
|
></right-toolbar>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
<el-table
|
<el-table
|
||||||
|
v-if="viewType!='card'"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
:data="recordList"
|
:data="recordList"
|
||||||
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
:default-sort="{ prop: 'alarmTime', order: 'descending' }"
|
||||||
|
|
@ -77,13 +89,17 @@
|
||||||
width="60"
|
width="60"
|
||||||
></el-table-column>
|
></el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="left"
|
align="center"
|
||||||
|
label="预警类型"
|
||||||
|
prop="typeName"
|
||||||
|
/>
|
||||||
|
<el-table-column
|
||||||
|
align="center"
|
||||||
label="设备名称"
|
label="设备名称"
|
||||||
prop="deviceName"
|
prop="deviceName"
|
||||||
/>
|
/>
|
||||||
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
<el-table-column align="center" label="所属项目" prop="inProjectName" />
|
||||||
<!-- <el-table-column label="设备当前值" align="left" width="200px" prop="currentValue" /> -->
|
<el-table-column align="center" label="预警内容" prop="alarmContent" />
|
||||||
<el-table-column align="left" label="推送内容" prop="alarmContent" />
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="预警时间"
|
label="预警时间"
|
||||||
|
|
@ -98,12 +114,19 @@
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
<el-table-column
|
||||||
:formatter="stateFormatter"
|
|
||||||
align="center"
|
align="center"
|
||||||
label="处理状态"
|
label="处理状态"
|
||||||
prop="processStatus"
|
prop="processStatus"
|
||||||
/>
|
width="100"
|
||||||
<el-table-column align="left" label="处理结果" prop="processResult" />
|
>
|
||||||
|
<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
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
label="处理时间"
|
label="处理时间"
|
||||||
|
|
@ -116,15 +139,11 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
<el-table-column
|
|
||||||
align="left"
|
|
||||||
label="预警类型"
|
|
||||||
prop="typeName"
|
|
||||||
/>
|
|
||||||
<el-table-column
|
<el-table-column
|
||||||
align="center"
|
align="center"
|
||||||
class-name="small-padding fixed-width"
|
class-name="small-padding fixed-width"
|
||||||
label="操作"
|
label="操作"
|
||||||
|
width="150"
|
||||||
>
|
>
|
||||||
<template slot-scope="scope">
|
<template slot-scope="scope">
|
||||||
<el-button
|
<el-button
|
||||||
|
|
@ -146,9 +165,87 @@
|
||||||
</el-table-column>
|
</el-table-column>
|
||||||
</el-table>
|
</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
|
<pagination
|
||||||
v-show="total > 0"
|
v-show="total > 0"
|
||||||
:limit.sync="queryParams.pageSize"
|
:limit.sync="queryParams.pageSize"
|
||||||
|
:page-sizes="[12, 24, 36, 60]"
|
||||||
:page.sync="queryParams.pageNum"
|
:page.sync="queryParams.pageNum"
|
||||||
:total="total"
|
:total="total"
|
||||||
@pagination="getList"
|
@pagination="getList"
|
||||||
|
|
@ -206,6 +303,8 @@ export default {
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
// 视图类型
|
||||||
|
viewType: "card",
|
||||||
// 遮罩层
|
// 遮罩层
|
||||||
loading: true,
|
loading: true,
|
||||||
// 选中数组
|
// 选中数组
|
||||||
|
|
@ -227,7 +326,7 @@ export default {
|
||||||
// 查询参数
|
// 查询参数
|
||||||
queryParams: {
|
queryParams: {
|
||||||
pageNum: 1,
|
pageNum: 1,
|
||||||
pageSize: 10,
|
pageSize: 12,
|
||||||
typeName: null,
|
typeName: null,
|
||||||
typeCode: null,
|
typeCode: null,
|
||||||
inProject: null,
|
inProject: null,
|
||||||
|
|
@ -251,6 +350,9 @@ export default {
|
||||||
this.getInProjectList();
|
this.getInProjectList();
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
changeViewType(type) {
|
||||||
|
this.viewType=type;
|
||||||
|
},
|
||||||
// 查询所属项目列表
|
// 查询所属项目列表
|
||||||
getInProjectList() {
|
getInProjectList() {
|
||||||
listProject({
|
listProject({
|
||||||
|
|
@ -439,3 +541,7 @@ export default {
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
@import "~@/assets/styles/alarm-card.scss";
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue