199 lines
8.2 KiB
Vue
199 lines
8.2 KiB
Vue
<template>
|
|
<section class="app-container">
|
|
<el-row>
|
|
<!-- 地区 -->
|
|
<el-col :span="4">
|
|
<region @selectdRegionCode="selectdRegionCode" :currentNodeKey.sync="queryParams.provinceCode"></region>
|
|
</el-col>
|
|
<!-- form表单 -->
|
|
<el-col :span="20">
|
|
<el-form size="mini" :model="queryParams" :inline="true" ref="queryForm" v-show="showSearch" label-width="68px">
|
|
<!-- 第一行 -->
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="告警名称">
|
|
<el-input v-model="queryParams.warningName" placeholder="请输入告警名称" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="告警等级">
|
|
<el-select v-model="queryParams.warningLevel" clearable placeholder="请输入告警等级">
|
|
<el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="产品名称">
|
|
<el-select v-model="queryParams.productId" clearable placeholder="请选择">
|
|
<el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属客户">
|
|
<el-select v-model="queryParams.deviceType" clearable placeholder="请选择">
|
|
<el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第二行 -->
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="所属项目">
|
|
<el-select v-model="queryParams.projectId" clearable placeholder="请选择">
|
|
<el-option v-for="item in signalLevelList" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="站址名称">
|
|
<el-input v-model="queryParams.addressName" placeholder="请输入站址名称" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="设备SN">
|
|
<el-input v-model="queryParams.deviceSn" placeholder="请输入设备SN" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item label="信号量ID">
|
|
<el-input v-model="queryParams.signalCode" placeholder="请输入信号量ID" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
<!-- 第三行 -->
|
|
<el-row>
|
|
<el-col :span="6">
|
|
<el-form-item label="告警次数">
|
|
<el-input v-model="queryParams.deviceName" placeholder="请输入告警次数" clearable @keyup.enter.native="handleQuery" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="12">
|
|
<el-form-item label="时间范围">
|
|
<el-date-picker v-model="dateRange" value-format="yyyy-MM-dd" type="daterange" range-separator="-"
|
|
start-placeholder="告警发生时间" end-placeholder="结束时间"></el-date-picker>
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="6">
|
|
<el-form-item>
|
|
<el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">
|
|
查询
|
|
</el-button>
|
|
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
<el-row class="mb8">
|
|
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
|
</el-row>
|
|
<!-- 表格区域 -->
|
|
<el-table v-loading="loading" :data="tableData" style="width: 100%">
|
|
<el-table-column prop="proName" align="center" label="省份" min-width="80">
|
|
</el-table-column>
|
|
<el-table-column prop="cityName" align="center" label="市" min-width="80">
|
|
</el-table-column>
|
|
<el-table-column prop="disName" align="center" label="区" min-width="80">
|
|
</el-table-column>
|
|
<el-table-column prop="productName" label="产品名称" align="center" min-width="100">
|
|
</el-table-column>
|
|
<el-table-column prop="nickName" align="center" label="所属客户"></el-table-column>
|
|
<el-table-column prop="projectName" align="center" label="所属项目"></el-table-column>
|
|
<el-table-column prop="warningName" align="center" label="告警名称" min-width="150"></el-table-column>
|
|
<el-table-column prop="warningLevel" align="center" label="告警等级" min-width="150"></el-table-column>
|
|
<el-table-column prop="workOrderId" align="center" label="工单编号" min-width="150"></el-table-column>
|
|
<el-table-column prop="signalCode" align="center" label="信号量ID" min-width="150"></el-table-column>
|
|
<el-table-column align="center" label="告警发生时间" min-width="150">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.warningTime | formatDate }}
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="warningDetails" align="center" label="告警详情" min-width="150"></el-table-column>
|
|
<el-table-column align="center" label="站址名称" min-width="150"></el-table-column>
|
|
<el-table-column prop="deviceName" align="center" label="设备名称" min-width="150"></el-table-column>
|
|
<el-table-column prop="deviceSn" align="center" label="设备SN" min-width="150"></el-table-column>
|
|
<el-table-column prop="status" label="运营状态" align="center" min-width="250"></el-table-column>
|
|
</el-table>
|
|
<!-- 分页 -->
|
|
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
|
|
@pagination="getList" />
|
|
</el-col>
|
|
</el-row>
|
|
</section>
|
|
</template>
|
|
<script>
|
|
import Region from '@/components/Region';
|
|
import { list } from '@/api/fault/warning';
|
|
export default {
|
|
name: 'activeAdmin',
|
|
components: {
|
|
Region
|
|
},
|
|
data () {
|
|
return {
|
|
dateRange: [],
|
|
signalLevelList: [
|
|
{ label: '一级', value: '1' },
|
|
{ label: '二级', value: '2' },
|
|
{ label: '三级', value: '3' }
|
|
],
|
|
queryParams: {
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
},
|
|
// 遮罩层
|
|
loading: true,
|
|
// 总条数
|
|
total: 0,
|
|
// 表格数据
|
|
tableData: [],
|
|
// 显示搜索条件
|
|
showSearch: true
|
|
};
|
|
},
|
|
methods: {
|
|
selectdRegionCode ({ code }) {
|
|
this.queryParams.provinceCode = code;
|
|
this.handleQuery();
|
|
},
|
|
// 获取告警工单列表
|
|
getList () {
|
|
this.loading = true;
|
|
if(null != this.dateRange && '' != this.dateRange) {
|
|
this.queryParams.startTime = this.dateRange[0];
|
|
this.queryParams.endTime = this.dateRange[1];
|
|
}
|
|
list(this.queryParams).then(res => {
|
|
this.tableData = res.rows;
|
|
this.total = res.total;
|
|
this.loading = false;
|
|
});
|
|
},
|
|
// 搜索按钮操作
|
|
handleQuery () {
|
|
this.queryParams.pageNum = 1;
|
|
this.queryParams.pageSize = 10;
|
|
this.getList();
|
|
},
|
|
// 重置按钮操作
|
|
resetQuery () {
|
|
this.queryParams = {};
|
|
this.resetForm('queryForm');
|
|
this.dateRange = [];
|
|
this.handleQuery();
|
|
}
|
|
},
|
|
computed: {},
|
|
watch: {},
|
|
created () {
|
|
this.getList();
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped></style>
|