初次提交
This commit is contained in:
764
src/views/alarm/alarm-definition/index.vue
Normal file
764
src/views/alarm/alarm-definition/index.vue
Normal file
@ -0,0 +1,764 @@
|
||||
<template>
|
||||
<section class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="form">
|
||||
<el-row :gutter="5" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||||
<el-form-item :label="$t('alarm.type') + ':'" label-width="90px">
|
||||
<el-select
|
||||
v-model="form.type"
|
||||
:placeholder="$t('alarm.placeSelectType')"
|
||||
style="width: 100%"
|
||||
filterable
|
||||
@change="SelectType"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in TypeOptions"
|
||||
:key="item.typeId"
|
||||
:label="item.name"
|
||||
:value="item.deviceType"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
|
||||
<el-form-item :label="$t('surveillance.name') + ':'" label-width="90px">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
maxlength="30"
|
||||
:placeholder="$t('surveillance.placeholderInput')"
|
||||
class="input-box"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :xs="24" :sm="10" :md="10" :lg="4" :xl="4">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="searchLoading"
|
||||
@click="on_refresh"
|
||||
>{{ $t('surveillance.query') }}</el-button>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="14" :md="14" :lg="4" :xl="4" style="display: flex;justify-content: end;">
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
:loading="SyncLoading"
|
||||
@click="handleSynchronous"
|
||||
>{{ $t('alarm.synchronous') }}</el-button>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
:loading="addLoading"
|
||||
@click="handleAdd"
|
||||
>新增</el-button> -->
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
:action="uploadUrl"
|
||||
:headers="headers"
|
||||
:show-file-list="false"
|
||||
:file-list="fileList"
|
||||
:on-success="handleOnSuccess"
|
||||
:on-error="handleOnError"
|
||||
/>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
:loading="exportLoading"
|
||||
icon="el-icon-upload2"
|
||||
class="reset-btn"
|
||||
>导入</el-button>
|
||||
</el-upload>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="uploadLoading"
|
||||
class="reset-btn"
|
||||
icon="el-icon-download"
|
||||
@click="handleExport"
|
||||
>导出</el-button> -->
|
||||
<el-button
|
||||
type="danger"
|
||||
icon="el-icon-delete"
|
||||
:loading="deleteLoading"
|
||||
@click="handleDelete"
|
||||
>{{ $t('alarm.delete') }}</el-button>
|
||||
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<el-table
|
||||
ref="table_data"
|
||||
v-loading="load_data"
|
||||
header-align="center"
|
||||
row-key="id"
|
||||
:height="$setAutoTableHeight(46,searchHeight)"
|
||||
:data="table_data"
|
||||
style="width: 100%"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
width="55"
|
||||
:reserve-selection="true"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="deviceName"
|
||||
:label="$t('alarm.deviceName')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="deviceType" :label="$t('alarm.deviceType')" />
|
||||
<el-table-column prop="colName" :label="$t('alarm.cName')" />
|
||||
<el-table-column prop="col" :label="$t('alarm.eName')" />
|
||||
<el-table-column prop="info0" :label="$t('alarm.recMessage')" />
|
||||
<el-table-column prop="info1" :label="$t('alarm.genMessage')" />
|
||||
<el-table-column :label="$t('alarm.operation')" align="center" width="200">
|
||||
<template slot-scope="scope">
|
||||
<div class="table-column-btn">
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="handleEdit(scope.row)"
|
||||
>{{ $t('alarm.edit') }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
</div>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:title="dialogTitle"
|
||||
center
|
||||
@close="onCancel"
|
||||
>
|
||||
<el-row class="top-search">
|
||||
<el-col :span="24" :offset="0">
|
||||
<el-form
|
||||
ref="formModel"
|
||||
:model="formModel"
|
||||
label-width="135px"
|
||||
label-position="right"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item
|
||||
v-if="dialogType === 'add'"
|
||||
:label="$t('alarm.cName')"
|
||||
prop="colName"
|
||||
>
|
||||
<el-input
|
||||
v-model="formModel.colName"
|
||||
:placeholder="$t('alarm.placeholderCName')"
|
||||
class="input-with-select"
|
||||
readonly
|
||||
@focus="openTableDialog"
|
||||
>
|
||||
<el-button
|
||||
slot="append"
|
||||
icon="el-icon-search"
|
||||
:loading="table_dialog_loading"
|
||||
@click="openTableDialog"
|
||||
/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item v-else :label="$t('alarm.cName')" prop="colName">
|
||||
<el-input
|
||||
v-model="formModel.colName"
|
||||
:placeholder="$t('alarm.placeholderCName')"
|
||||
class="input-with-select"
|
||||
readonly
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('alarm.eName')" prop="col">
|
||||
<el-input
|
||||
v-model="formModel.col"
|
||||
readonly
|
||||
/></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('alarm.deviceTypeName')" prop="deviceType">
|
||||
<el-input v-model="formModel.deviceType" readonly />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item :label="$t('alarm.type')" prop="sensType">
|
||||
<el-input
|
||||
v-model="sensType"
|
||||
readonly
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label-width="195px" :label="$t('alarm.recMessage')" prop="info0">
|
||||
<el-input
|
||||
v-model="formModel.info0"
|
||||
:disabled="formModel.sensType !== 1"
|
||||
:placeholder="$t('alarm.placeholderRecMessage')"
|
||||
maxlength="200"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label-width="195px" :label="$t('alarm.genMessage')" prop="info1">
|
||||
<el-input
|
||||
v-model="formModel.info1"
|
||||
:disabled="formModel.sensType !== 1"
|
||||
:placeholder="$t('alarm.placeholderGenMessage')"
|
||||
maxlength="200"
|
||||
/></el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button plain @click="onCancel"> {{ $t('alarm.cancel') }} </el-button>
|
||||
<el-button type="primary" @click="handleTosubmit"> {{ $t('alarm.sure') }} </el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:visible.sync="tableDialog"
|
||||
width="50%"
|
||||
:title="$t('alarm.selectName')"
|
||||
center
|
||||
@close="onTableCancel"
|
||||
>
|
||||
<el-row>
|
||||
<el-col class="tableCol" :span="12" style="color: #fff">
|
||||
{{ $t('alarm.name') }}：
|
||||
<el-input
|
||||
v-model="formModel.name"
|
||||
maxlength="30"
|
||||
:placeholder="$t('alarm.placeholderCName')"
|
||||
style="width: 70%"
|
||||
@blur="blurChangeTable"
|
||||
/>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
ref="dialog_table_data"
|
||||
:key="dialog_table_key"
|
||||
v-loading="dialog_load_data"
|
||||
header-align="center"
|
||||
:height="$setTableHeight(300)"
|
||||
row-key="id"
|
||||
:data="dialog_table_data"
|
||||
style="width: 100%"
|
||||
@selection-change="handleDialogSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
:reserve-selection="true"
|
||||
type="selection"
|
||||
width="55"
|
||||
/>
|
||||
<el-table-column
|
||||
prop="colName"
|
||||
:label="$t('alarm.cName')"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
|
||||
<el-table-column prop="col" :label="$t('alarm.eName')" />
|
||||
<el-table-column prop="deviceTypeName" :label="$t('alarm.deviceTypeName')" />
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="col_currentPage"
|
||||
:page-size="col_pageSize"
|
||||
:page-sizes="col_pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="col_total"
|
||||
@current-change="col_handleCurrentChange"
|
||||
@size-change="col_handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button plain @click="onTableCancel"> {{ $t('alarm.cancel') }} </el-button>
|
||||
<el-button type="primary" @click="handleTableTosubmit">
|
||||
{{ $t('alarm.sure') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getToken } from '@/utils/auth'
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
import { handleDownExcel } from '@/utils'
|
||||
|
||||
import {
|
||||
GetDeviceType,
|
||||
SyncDeviceColDefine,
|
||||
GetDeviceColDefinePage,
|
||||
UpdataDeviceColDefine,
|
||||
AddDeviceColDefine,
|
||||
DelDeviceColDefine,
|
||||
GetDeviceTypeCol
|
||||
} from '@/api/alarm/alarm-definition'
|
||||
export default {
|
||||
components: { Pagingbar },
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
type: null,
|
||||
name: null
|
||||
},
|
||||
|
||||
stationId: null,
|
||||
searchLoading: false,
|
||||
load_data: false,
|
||||
dialog_load_data: false,
|
||||
addLoading: false,
|
||||
exportLoading: false,
|
||||
uploadLoading: false,
|
||||
deleteLoading: false,
|
||||
table_data: [],
|
||||
dialog_table_data: [],
|
||||
TypeOptions: [],
|
||||
uploadUrl:
|
||||
process.env.VUE_APP_BASE_API + '/flow/deviceColDefine/importExcel',
|
||||
headers: {
|
||||
authorization: getToken(),
|
||||
lang: sessionStorage.getItem('language') === 'en' ? 'en_US' : 'zh_CN'
|
||||
},
|
||||
paramsData: {},
|
||||
fileList: [],
|
||||
currentPage: 1,
|
||||
col_currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
col_total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
col_pageSize: pageSize,
|
||||
col_pageSizes: pageSizes,
|
||||
pageSizes: pageSizes,
|
||||
dialogVisible: false,
|
||||
tableDialog: false,
|
||||
dialogTitle: this.$t('alarm.addAlarmDefinition'),
|
||||
dialogType: 'add',
|
||||
formModel: {
|
||||
colName: null,
|
||||
col: null,
|
||||
deviceType: null,
|
||||
deviceName: null,
|
||||
info0: null,
|
||||
info1: null
|
||||
},
|
||||
table_dialog_loading: false,
|
||||
delIdList: [],
|
||||
selectDialogData: [],
|
||||
dialog_table_key: 0,
|
||||
SyncLoading: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stations: function() {
|
||||
return this.$store.getters.stations || []
|
||||
},
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
sensType() {
|
||||
if (this.formModel.sensType === 1) {
|
||||
return this.$t('alarm.yx')
|
||||
} else if (this.formModel.sensType === 2) {
|
||||
return this.$t('alarm.yc')
|
||||
} else {
|
||||
return this.$t('alarm.yk')
|
||||
}
|
||||
// return this.formModel.sensType === 1 ? '遥信' : '遥测'
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentStation: {
|
||||
async handler(val) {
|
||||
if (val && val.id) {
|
||||
this.stationId = val.id
|
||||
this.form.type = null
|
||||
this.table_data = []
|
||||
this.form.name = ''
|
||||
this.currentPage = 1
|
||||
this.TypeOptions = []
|
||||
this.total = 0
|
||||
this.delIdList = []
|
||||
|
||||
this.col_currentPage = 1
|
||||
this.GetDeviceType()
|
||||
if (this.$refs.table_data) {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.table_data.clearSelection()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
|
||||
async GetDeviceType() {
|
||||
const { data } = await GetDeviceType({ stationId: this.stationId })
|
||||
this.TypeOptions = data
|
||||
this.form.type = data[0].deviceType
|
||||
this.get_table_data()
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
async GetDeviceTypeCol() {
|
||||
const params = {
|
||||
stationId: this.stationId,
|
||||
deviceType: this.form.type,
|
||||
name: this.formModel.name,
|
||||
pageNum: this.col_currentPage,
|
||||
pageSize: this.col_pageSize
|
||||
}
|
||||
this.dialog_load_data = true
|
||||
try {
|
||||
const res = await GetDeviceTypeCol(params)
|
||||
this.dialog_table_data = res.data.list
|
||||
this.col_total = res.data.totalRows
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.dialog_load_data = false
|
||||
}
|
||||
},
|
||||
blurChangeTable() {
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
// 查询
|
||||
on_refresh() {
|
||||
if (this.TypeOptions.length > 0) {
|
||||
this.currentPage = 1
|
||||
this.get_table_data()
|
||||
this.delIdList = []
|
||||
this.$refs.table_data.clearSelection()
|
||||
} else {
|
||||
return this.$message.error(this.$t('alarm.noDevice'))
|
||||
}
|
||||
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
async get_table_data() {
|
||||
this.load_data = true
|
||||
try {
|
||||
const res = await GetDeviceColDefinePage({
|
||||
deviceType: this.form.type,
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
name: this.form.name
|
||||
})
|
||||
this.table_data = res.data.list
|
||||
this.total = res.data.totalRows
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.load_data = false
|
||||
}
|
||||
},
|
||||
// 编辑
|
||||
handleEdit(row) {
|
||||
this.dialogVisible = true
|
||||
this.dialogTitle = this.$t('alarm.editAlarmDefinition')
|
||||
this.dialogType = 'edit'
|
||||
this.formModel = Object.assign({}, row)
|
||||
},
|
||||
// 选择类型
|
||||
SelectType() {
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
|
||||
// 同步
|
||||
async handleSynchronous() {
|
||||
if (this.TypeOptions.length) {
|
||||
this.SyncLoading = true
|
||||
try {
|
||||
await SyncDeviceColDefine({
|
||||
stationId: this.stationId,
|
||||
deviceType: this.form.type
|
||||
})
|
||||
this.$notify({
|
||||
title: this.$t('alarm.tip'),
|
||||
message: this.$t('alarm.synchronousSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.SyncLoading = false
|
||||
this.get_table_data()
|
||||
this.delIdList = []
|
||||
this.$refs.table_data.clearSelection()
|
||||
}
|
||||
} else {
|
||||
return this.$message.error(this.$t('alarm.noDevice'))
|
||||
}
|
||||
},
|
||||
// 新增
|
||||
handleAdd() {
|
||||
this.dialogVisible = true
|
||||
this.dialogType = 'add'
|
||||
this.dialogTitle = this.$t('alarm.addAlarmDefinition')
|
||||
},
|
||||
// 选择表格数据
|
||||
handleSelectionChange(val) {
|
||||
this.delIdList = []
|
||||
val.forEach((el) => {
|
||||
this.delIdList.push(el.id)
|
||||
})
|
||||
},
|
||||
// 选取弹出框表格数据
|
||||
handleDialogSelectionChange(val) {
|
||||
this.selectDialogData = val
|
||||
if (val.length > 1) {
|
||||
this.$refs.dialog_table_data.clearSelection()
|
||||
this.$refs.dialog_table_data.toggleRowSelection(val.pop())
|
||||
}
|
||||
},
|
||||
// 删除
|
||||
handleDelete() {
|
||||
if (this.delIdList.length) {
|
||||
this.$confirm(this.$t('alarm.deleteAlarmDefinition'), this.$t('alarm.tip'), {
|
||||
confirmButtonText: this.$t('alarm.sure'),
|
||||
cancelButtonText: this.$t('alarm.cancel'),
|
||||
type: 'warning',
|
||||
showClose: false,
|
||||
center: true
|
||||
}).then(async() => {
|
||||
this.deleteLoading = true
|
||||
try {
|
||||
await DelDeviceColDefine({ idList: this.delIdList })
|
||||
|
||||
this.$notify({
|
||||
title: this.$t('alarm.tip'),
|
||||
message: this.$t('alarm.deleteSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error)
|
||||
} finally {
|
||||
this.delIdList = []
|
||||
this.deleteLoading = false
|
||||
this.$refs.table_data.clearSelection()
|
||||
this.get_table_data()
|
||||
}
|
||||
})
|
||||
} else {
|
||||
this.$notify({
|
||||
title: this.$t('alarm.tip'),
|
||||
message: this.$t('alarm.selectDeleteDefinition'),
|
||||
type: 'warning',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
},
|
||||
// 上传成功
|
||||
handleOnSuccess(file, fileList) {
|
||||
if (file.code === 200) {
|
||||
this.$notify({
|
||||
title: this.$t('alarm.importFileSuccess'),
|
||||
message: file.msg,
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
this.getAllCurveTemp()
|
||||
} else {
|
||||
this.$notify({
|
||||
title: this.$t('alarm.importFileError'),
|
||||
message: file.msg,
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
}
|
||||
},
|
||||
// 上传失败
|
||||
handleOnError(file, fileList) {
|
||||
this.$notify({
|
||||
title: this.$t('alarm.importFileError'),
|
||||
message: file.msg,
|
||||
type: 'error',
|
||||
duration: 2000
|
||||
})
|
||||
},
|
||||
// 导出
|
||||
handleExport() {
|
||||
const params = {
|
||||
title: '告警定义模板'
|
||||
}
|
||||
handleDownExcel(
|
||||
'/flow/deviceColDefine/exportTemplate',
|
||||
params,
|
||||
(callback) => {
|
||||
console.log(callback)
|
||||
}
|
||||
)
|
||||
},
|
||||
|
||||
handleSizeChange(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.get_table_data()
|
||||
},
|
||||
// 页码选择
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.get_table_data()
|
||||
},
|
||||
col_handleCurrentChange(val) {
|
||||
this.col_currentPage = val
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
col_handleSizeChange(val) {
|
||||
this.col_currentPage = 1
|
||||
this.col_pageSize = val
|
||||
// this.GetDeviceTypeCol()
|
||||
},
|
||||
|
||||
// 关闭新增编辑框
|
||||
onCancel() {
|
||||
this.dialogVisible = false
|
||||
this.formModel = {
|
||||
colName: null,
|
||||
col: null,
|
||||
deviceType: null,
|
||||
deviceName: null,
|
||||
info0: null,
|
||||
info1: null,
|
||||
name: null
|
||||
}
|
||||
// this.$refs.dialog_table_data.clearSelection()
|
||||
this.col_currentPage = 1
|
||||
},
|
||||
|
||||
// 关闭字段选择框
|
||||
onTableCancel() {
|
||||
this.tableDialog = false
|
||||
},
|
||||
|
||||
// 新增确认
|
||||
async handleTosubmit() {
|
||||
const params = {
|
||||
col: this.formModel.col,
|
||||
colName: this.formModel.colName,
|
||||
deviceName: this.formModel.deviceName,
|
||||
deviceType: this.formModel.deviceType,
|
||||
id: this.formModel.id,
|
||||
info0: this.formModel.info0 ? this.formModel.info0 : '',
|
||||
info1: this.formModel.info1 ? this.formModel.info1 : ''
|
||||
}
|
||||
if (this.dialogType === 'add') {
|
||||
try {
|
||||
await AddDeviceColDefine(params)
|
||||
this.$notify({
|
||||
title: this.$t('alarm.success'),
|
||||
message: this.$t('alarm.addSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.dialogVisible = false
|
||||
this.get_table_data()
|
||||
}
|
||||
}
|
||||
if (this.dialogType === 'edit') {
|
||||
try {
|
||||
await UpdataDeviceColDefine(params)
|
||||
this.$notify({
|
||||
title: this.$t('alarm.success'),
|
||||
message: this.$t('alarm.editSuccess'),
|
||||
type: 'success',
|
||||
duration: 2000
|
||||
})
|
||||
} catch (error) {
|
||||
// console.log(error);
|
||||
} finally {
|
||||
this.dialogVisible = false
|
||||
this.get_table_data()
|
||||
}
|
||||
}
|
||||
},
|
||||
// 确认字段
|
||||
handleTableTosubmit() {
|
||||
this.tableDialog = false
|
||||
this.formModel = this.selectDialogData[0]
|
||||
// console.log(this.selectDialogData)
|
||||
},
|
||||
// 打开字段选择
|
||||
openTableDialog() {
|
||||
this.tableDialog = true
|
||||
// this.GetDeviceTypeCol()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:var(--table-bg);
|
||||
padding: 10px;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.upload-demo {
|
||||
display: inline-block;
|
||||
margin-left: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.tableCol {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.table-wrapper{
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
815
src/views/alarm/history/index.vue
Normal file
815
src/views/alarm/history/index.vue
Normal file
@ -0,0 +1,815 @@
|
||||
<template>
|
||||
<section class="realtime-wrapper">
|
||||
<el-form id="searchForm" :model="filters" label-width="90px">
|
||||
<el-row :gutter="20" class="search-row">
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-form-item :label="$t('alarm.equipment') + ':'">
|
||||
<el-input v-model="devAllName" readonly :placeholder="$t('alarm.placeholderEqit')" class="input-with-select" @focus="openTreeDialog">
|
||||
<el-button slot="append" icon="el-icon-setting" @click="openTreeDialog" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-form-item label-width="130px" :label="$t('alarm.alarmContent') + ':'">
|
||||
<el-input
|
||||
v-model="filters.description"
|
||||
:placeholder="$t('alarm.placeholderInput')"
|
||||
maxlength="1000"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-form-item label-width="100px" :label="$t('alarm.timeRange') + ':'">
|
||||
<el-date-picker
|
||||
v-model="datetime"
|
||||
style="width: 100%"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="-"
|
||||
:start-placeholder="$t('alarm.startTime')"
|
||||
:end-placeholder="$t('alarm.endTime')"
|
||||
@change="handleDateChange"
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="6">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
:loading="searchLoading"
|
||||
@click="on_refresh"
|
||||
>{{ $t('surveillance.query') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
class="reset-btn"
|
||||
:loading="resetLoading"
|
||||
@click="handClear"
|
||||
>{{ $t('surveillance.reset') }}</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
:loading="downFileLoading"
|
||||
@click="handleDownFile"
|
||||
>{{ $t('surveillance.export') }}</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label-width="100px" :label="$t('alarm.event')">
|
||||
<el-checkbox-group v-model="filters.eventTypes" @change="get_table_data">
|
||||
<el-checkbox
|
||||
v-for="item in eventTypes"
|
||||
v-show="item.label !== '告警'"
|
||||
:key="item.id"
|
||||
:label="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
<span
|
||||
:class="{shigu:item.value=== '1',yichang:item.value==='2',yuexian:item.value==='3',bianwei:item.value==='4',gaozhi:item.value==='5'}"
|
||||
>
|
||||
{{
|
||||
eventNums[item.value] ? eventNums[item.value] : 0
|
||||
}}
|
||||
</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-form-item label-width="100px" :label="$t('alarm.level')">
|
||||
<el-checkbox
|
||||
v-model="checkAll"
|
||||
:indeterminate="isIndeterminate"
|
||||
@change="handleCheckAllChange"
|
||||
>
|
||||
{{ $t('alarm.all') }}
|
||||
<span class="total">
|
||||
{{
|
||||
levelNums['all'] ? levelNums['all'] : 0
|
||||
}}
|
||||
</span>
|
||||
</el-checkbox>
|
||||
<el-checkbox-group
|
||||
v-model="filters.eventLevels"
|
||||
@change="handleCheckedLevelsChange"
|
||||
>
|
||||
<el-checkbox v-for="level in eventLevels" :key="level.id" :label="level.value">
|
||||
{{ level.label }}
|
||||
<span
|
||||
:class="{shigu:level.value=== '1',yichang:level.value==='2',yuexian:level.value==='3',bianwei:level.value==='4',gaozhi:level.value==='5'}"
|
||||
>
|
||||
{{
|
||||
levelNums[level.value] ? levelNums[level.value] : 0
|
||||
}}
|
||||
</span>
|
||||
</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
<div class="table-wrapper">
|
||||
<div class="table-setting">
|
||||
<i class="el-icon-s-tools" style="cursor: pointer;" @click="handletabSet" />
|
||||
</div>
|
||||
<el-table
|
||||
ref="alarmtable"
|
||||
:key="table_key"
|
||||
v-loading="load_data"
|
||||
header-align="center"
|
||||
:height="$setAutoTableHeight(76,searchHeight)"
|
||||
:data="table_data"
|
||||
style="width: 100%"
|
||||
border
|
||||
row-key="id"
|
||||
@selection-change="handleAlarmSelection"
|
||||
>
|
||||
<el-table-column type="selection" width="50" align="center" :reserve-selection="true" />
|
||||
<el-table-column
|
||||
type="index"
|
||||
:index="tableRowClassName"
|
||||
:label="$t('alarm.ordinal')"
|
||||
width="65"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="confirmStatus" :label="$t('alarm.status')">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.status === 1"
|
||||
effect="plain"
|
||||
type="success"
|
||||
>{{ $t('alarm.confirm') }}</el-tag>
|
||||
<el-tag v-else type="danger" effect="plain">{{ $t('alarm.noConfirmed') }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="$t('alarm.level')" show-overflow-tooltip>
|
||||
<template slot-scope="scope">{{ getEventname(scope.row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
v-for="(column,index) in activeThead"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
width="180"
|
||||
show-overflow-tooltip
|
||||
:label="column.label"
|
||||
>
|
||||
<template slot-scope="scope">{{ scope.row[column.prop] }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<Pagingbar>
|
||||
<div slot="page">
|
||||
<el-pagination
|
||||
:current-page="currentPage"
|
||||
:page-size="pageSize"
|
||||
:page-sizes="pageSizes"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
@current-change="handleCurrentChange"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</Pagingbar>
|
||||
<el-dialog
|
||||
:append-to-body="false"
|
||||
:visible.sync="tabSetVisible"
|
||||
:title="$t('alarm.columnSettings')"
|
||||
width="200px"
|
||||
>
|
||||
<el-checkbox-group v-model="tabActiveColumns">
|
||||
<el-checkbox v-for="item in tabColumns" :key="item" :label="item">{{ item }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
<div style="text-align: center" class="dialog-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleSetSubmit"
|
||||
> {{ $t('alarm.sure') }}</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<TreeDialog ref="treeDialog" :visible="treeVisible" :tree-changedata="deviceTypeList" :tree-props="treeProps" check-strictly multiple :title="$t('alarm.deviceType')" @confirm="getTreeId" @close="closeTreeDialog" />
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { handleDownExcel } from '@/utils'
|
||||
|
||||
import { pageSize, pageSizes } from '@/config'
|
||||
import Pagingbar from '@/components/Pagingbar'
|
||||
import TreeDialog from '@/components/TreeDialog'
|
||||
import { GetStationlist, GetAlarmHistoryList } from '@/api/alarm/realtime'
|
||||
// import { GetTreeVirtualDevices } from '@/api/surveillance/energy-storage/index'
|
||||
// import { GetdeviceType } from '@/api/alarm-configuration'
|
||||
import { transformTree } from '@/utils'
|
||||
import { getNewDevice } from '@/api/monitor/integrated-cabinet'
|
||||
export default {
|
||||
components: { Pagingbar, TreeDialog },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
stationNormalizer(node) {
|
||||
return {
|
||||
id: node.srcId,
|
||||
label: node.name,
|
||||
children:
|
||||
node.children && node.children.length > 0
|
||||
? node.children
|
||||
: undefined
|
||||
}
|
||||
},
|
||||
props: { label: 'name', value: 'srcId', children: 'children', emitPath: false, multiple: true },
|
||||
filters: {
|
||||
station: undefined,
|
||||
content: '',
|
||||
type: undefined,
|
||||
deviceTypeList: [],
|
||||
eventLevels: [],
|
||||
eventTypes: [],
|
||||
stationIds: ''
|
||||
},
|
||||
deviceTypeNormalizer(node) {
|
||||
return {
|
||||
id: node.typeId,
|
||||
label: node.name,
|
||||
children: node.children.length > 0 ? node.children : undefined
|
||||
}
|
||||
},
|
||||
formThead: [
|
||||
{
|
||||
prop: 'timeStamp',
|
||||
label: this.$t('alarm.alarmTime')
|
||||
}, {
|
||||
prop: 'stationName',
|
||||
label: this.$t('alarm.station')
|
||||
}, {
|
||||
prop: 'deviceName',
|
||||
label: this.$t('alarm.deviceType')
|
||||
}, {
|
||||
prop: 'name',
|
||||
label: this.$t('alarm.equipment')
|
||||
}, {
|
||||
prop: 'description',
|
||||
label: this.$t('alarm.alarmContent')
|
||||
}, {
|
||||
prop: 'confirmMan',
|
||||
label: this.$t('alarm.confirmer')
|
||||
}, {
|
||||
prop: 'confirmTime',
|
||||
label: this.$t('alarm.confirmTime')
|
||||
}, {
|
||||
prop: 'remark',
|
||||
label: this.$t('alarm.remark')
|
||||
}
|
||||
],
|
||||
activeThead: [
|
||||
{
|
||||
prop: 'timeStamp',
|
||||
label: this.$t('alarm.alarmTime')
|
||||
}, {
|
||||
prop: 'stationName',
|
||||
label: this.$t('alarm.station')
|
||||
}, {
|
||||
prop: 'name',
|
||||
label: this.$t('alarm.equipment')
|
||||
}, {
|
||||
prop: 'description',
|
||||
label: this.$t('alarm.alarmContent')
|
||||
}, {
|
||||
prop: 'confirmMan',
|
||||
label: this.$t('alarm.confirmer')
|
||||
}, {
|
||||
prop: 'confirmTime',
|
||||
label: this.$t('alarm.confirmTime')
|
||||
}, {
|
||||
prop: 'remark',
|
||||
label: this.$t('alarm.remark')
|
||||
}
|
||||
],
|
||||
tabColumns: [this.$t('alarm.alarmTime'), this.$t('alarm.station'), this.$t('alarm.deviceType'), this.$t('alarm.equipment'), this.$t('alarm.alarmContent'), this.$t('alarm.confirmer'), this.$t('alarm.confirmTime'), this.$t('alarm.remark')],
|
||||
tabActiveColumns: [this.$t('alarm.alarmTime'), this.$t('alarm.station'), this.$t('alarm.equipment'), this.$t('alarm.alarmContent'), this.$t('alarm.confirmer'), this.$t('alarm.confirmTime'), this.$t('alarm.remark')],
|
||||
tabSetVisible: false,
|
||||
table_key: 1,
|
||||
stationList: [],
|
||||
deviceTypeList: [],
|
||||
deviceTypetreeList: [],
|
||||
deviceselects: [],
|
||||
datetime: null,
|
||||
isIndeterminate: true,
|
||||
checkAll: false,
|
||||
eventNums: {},
|
||||
levelNums: {},
|
||||
table_data: [],
|
||||
// 当前页码
|
||||
currentPage: 1,
|
||||
// 数据总条目
|
||||
total: 0,
|
||||
// 每页显示多少条数据
|
||||
pageSize: pageSize,
|
||||
pageSizes: pageSizes,
|
||||
// 请求时的loading效果
|
||||
load_data: false,
|
||||
searchLoading: false,
|
||||
resetLoading: false,
|
||||
cascaderKey: 0,
|
||||
devAllName: '',
|
||||
treeVisible: false,
|
||||
treeProps: {
|
||||
id: 'srcId',
|
||||
label: 'name',
|
||||
children: 'children',
|
||||
disabled: (data, node) => {
|
||||
if (data.category === 1 || data.category === 2) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
},
|
||||
downFileLoading: false,
|
||||
slectionIds: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
stations: function() {
|
||||
return this.$store.getters.stations || []
|
||||
},
|
||||
eventLevels() {
|
||||
return this.$store.getters.dicts['eventLevel'] || []
|
||||
},
|
||||
eventTypes() {
|
||||
return this.$store.getters.dicts['eventType'] || []
|
||||
},
|
||||
currentStation() {
|
||||
return this.$store.getters.currentStation || undefined
|
||||
},
|
||||
searchHeight() {
|
||||
return this.$store.getters.searchHeight
|
||||
},
|
||||
language() {
|
||||
return this.$store.getters.language || undefined
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
stations: {
|
||||
handler: function(stations) {
|
||||
if (stations.length > 0) {
|
||||
// this.filters.stationIds = this.stations[0].id
|
||||
// this.get_table_data()
|
||||
}
|
||||
}
|
||||
},
|
||||
eventLevels: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
this.filters.eventLevels = []
|
||||
val.forEach(item => {
|
||||
this.filters.eventLevels.push(item.value)
|
||||
})
|
||||
this.checkAll = true
|
||||
this.isIndeterminate = false
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
eventTypes: {
|
||||
handler(val) {
|
||||
if (val.length > 0) {
|
||||
this.filters.eventTypes = []
|
||||
val.forEach(item => {
|
||||
if (item.label !== '告警') {
|
||||
this.filters.eventTypes.push(item.value)
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
currentStation: {
|
||||
handler(val) {
|
||||
if (val && val.id) {
|
||||
this.handClear()
|
||||
this.filters.stationIds = val.id
|
||||
this.getNewData()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
},
|
||||
language: {
|
||||
handler(val) {
|
||||
this.formThead = [{
|
||||
prop: 'timeStamp',
|
||||
label: this.$t('alarm.alarmTime')
|
||||
}, {
|
||||
prop: 'stationName',
|
||||
label: this.$t('alarm.station')
|
||||
}, {
|
||||
prop: 'deviceName',
|
||||
label: this.$t('alarm.deviceType')
|
||||
}, {
|
||||
prop: 'name',
|
||||
label: this.$t('alarm.equipment')
|
||||
}, {
|
||||
prop: 'description',
|
||||
label: this.$t('alarm.alarmContent')
|
||||
}, {
|
||||
prop: 'confirmMan',
|
||||
label: this.$t('alarm.confirmer')
|
||||
}, {
|
||||
prop: 'confirmTime',
|
||||
label: this.$t('alarm.confirmTime')
|
||||
}, {
|
||||
prop: 'remark',
|
||||
label: this.$t('alarm.remark')
|
||||
}]
|
||||
this.activeThead = [{
|
||||
prop: 'timeStamp',
|
||||
label: this.$t('alarm.alarmTime')
|
||||
}, {
|
||||
prop: 'stationName',
|
||||
label: this.$t('alarm.station')
|
||||
}, {
|
||||
prop: 'name',
|
||||
label: this.$t('alarm.equipment')
|
||||
}, {
|
||||
prop: 'description',
|
||||
label: this.$t('alarm.alarmContent')
|
||||
}, {
|
||||
prop: 'confirmMan',
|
||||
label: this.$t('alarm.confirmer')
|
||||
}, {
|
||||
prop: 'confirmTime',
|
||||
label: this.$t('alarm.confirmTime')
|
||||
}, {
|
||||
prop: 'remark',
|
||||
label: this.$t('alarm.remark')
|
||||
}]
|
||||
this.tabColumns = [this.$t('alarm.alarmTime'), this.$t('alarm.station'), this.$t('alarm.deviceType'), this.$t('alarm.equipment'), this.$t('alarm.alarmContent'), this.$t('alarm.confirmer'), this.$t('alarm.confirmTime'), this.$t('alarm.remark')]
|
||||
this.tabActiveColumns = [this.$t('alarm.alarmTime'), this.$t('alarm.station'), this.$t('alarm.equipment'), this.$t('alarm.alarmContent'), this.$t('alarm.confirmer'), this.$t('alarm.confirmTime'), this.$t('alarm.remark')]
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
created() {
|
||||
if (this.currentStation.id) {
|
||||
this.filters.stationIds = this.currentStation.id
|
||||
this.get_table_data()
|
||||
this.getDeviceType()
|
||||
}
|
||||
// this.get_table_data()
|
||||
},
|
||||
methods: {
|
||||
getTreeId(val, name) {
|
||||
this.devAllName = name
|
||||
this.deviceselects = val
|
||||
// console.log(val)
|
||||
},
|
||||
closeTreeDialog() {
|
||||
this.treeVisible = false
|
||||
},
|
||||
openTreeDialog() {
|
||||
this.treeVisible = true
|
||||
},
|
||||
tableRowClassName(index) {
|
||||
return (this.currentPage - 1) * this.pageSize + index + 1
|
||||
},
|
||||
getNewData() { // 电站变化
|
||||
this.filters.station = undefined
|
||||
this.filters.content = ''
|
||||
this.filters.type = undefined
|
||||
this.filters.endTime = undefined
|
||||
this.filters.starTime = undefined
|
||||
this.filters.description = undefined
|
||||
this.deviceTypeList = []
|
||||
this.currentPage = 1
|
||||
this.deviceselects = []
|
||||
this.datetime = null
|
||||
this.filters.eventLevels = []
|
||||
this.eventLevels.forEach(item => {
|
||||
this.filters.eventLevels.push(item.value)
|
||||
})
|
||||
this.filters.eventTypes = []
|
||||
this.eventTypes.forEach(item => {
|
||||
if (item.label !== '告警') {
|
||||
this.filters.eventTypes.push(item.value)
|
||||
}
|
||||
})
|
||||
this.getDeviceType()
|
||||
this.currentPage = 1
|
||||
this.get_table_data()
|
||||
},
|
||||
handletabSet() {
|
||||
this.tabSetVisible = true
|
||||
},
|
||||
handleSetSubmit() {
|
||||
this.tabSetVisible = false
|
||||
const formThead = []
|
||||
const self = this
|
||||
this.tabActiveColumns.forEach(function(item) {
|
||||
const index = self.formThead.findIndex(column => {
|
||||
return column.label === item
|
||||
})
|
||||
formThead.push(self.formThead[index])
|
||||
})
|
||||
this.activeThead = formThead
|
||||
this.table_key++
|
||||
},
|
||||
getEventname(row) {
|
||||
if (row.eventType === 1) {
|
||||
return (
|
||||
this.eventLevels.find(level => Number(level.value) === row.eventLevel)
|
||||
.label || ''
|
||||
)
|
||||
} else {
|
||||
return (
|
||||
this.eventTypes.find(level => Number(level.value) === row.eventType)
|
||||
.label || ''
|
||||
)
|
||||
}
|
||||
},
|
||||
handleDateChange(val) {
|
||||
if (val) {
|
||||
this.filters.starTime = val[0]
|
||||
this.filters.endTime = val[1]
|
||||
} else {
|
||||
this.filters.starTime = null
|
||||
this.filters.endTime = null
|
||||
}
|
||||
},
|
||||
handleCheckAllChange(val) {
|
||||
const data = []
|
||||
this.eventLevels.forEach(v => {
|
||||
data.push(v.value)
|
||||
})
|
||||
this.filters.eventLevels = val ? data : []
|
||||
this.isIndeterminate = false
|
||||
this.get_table_data()
|
||||
},
|
||||
selectStation() {
|
||||
this.deviceselects = []
|
||||
this.filters.deviceTypeList = []
|
||||
this.getDeviceType()
|
||||
},
|
||||
handleDeviceTypeChange(val) {
|
||||
this.filters.deviceTypeList = []
|
||||
val.forEach(v => {
|
||||
const node = this.deviceTypetreeList.find(item => {
|
||||
return item.id === v
|
||||
})
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
const { children, ...data } = node
|
||||
this.filters.deviceTypeList.push(data)
|
||||
})
|
||||
},
|
||||
handleCheckedLevelsChange(value) {
|
||||
this.currentPage = 1
|
||||
const checkedCount = value.length
|
||||
this.checkAll = checkedCount === this.eventLevels.length
|
||||
this.isIndeterminate =
|
||||
checkedCount > 0 && checkedCount < this.eventLevels.length
|
||||
this.get_table_data()
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.currentPage = 1
|
||||
this.pageSize = val
|
||||
this.get_table_data()
|
||||
},
|
||||
// 刷新
|
||||
async on_refresh() {
|
||||
this.searchLoading = true
|
||||
this.currentPage = 1
|
||||
await this.get_table_data()
|
||||
this.searchLoading = false
|
||||
},
|
||||
async handClear() {
|
||||
this.resetLoading = true
|
||||
this.$refs.treeDialog.currentNode = []
|
||||
this.devAllName = ''
|
||||
this.filters.stationIds = this.currentStation.id
|
||||
this.filters.station = undefined
|
||||
this.filters.content = ''
|
||||
this.filters.type = undefined
|
||||
this.filters.endTime = undefined
|
||||
this.filters.starTime = undefined
|
||||
this.filters.description = undefined
|
||||
this.currentPage = 1
|
||||
this.deviceselects = []
|
||||
this.datetime = null
|
||||
await this.get_table_data()
|
||||
this.resetLoading = false
|
||||
},
|
||||
// 获取告警数据
|
||||
async get_table_data() {
|
||||
try {
|
||||
this.load_data = true
|
||||
this.table_data = []
|
||||
this.filters.deviceTypeList = []
|
||||
this.deviceselects.forEach(val => {
|
||||
const index = this.deviceTypeList.findIndex(
|
||||
item => item.deviceType === val
|
||||
)
|
||||
this.filters.deviceTypeList.push(this.deviceTypeList[index])
|
||||
})
|
||||
const params = {
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
stationIds: this.filters.stationIds ? [this.filters.stationIds] : [],
|
||||
srcIdList: this.deviceselects,
|
||||
description: this.filters.description,
|
||||
eventLevels: this.filters.eventLevels,
|
||||
eventTypes: this.filters.eventTypes,
|
||||
startTime: this.filters.starTime,
|
||||
endTime: this.filters.endTime
|
||||
}
|
||||
|
||||
// if (this.filters.eventTypes) {
|
||||
// this.currentPage = 1
|
||||
// }
|
||||
const res = await GetAlarmHistoryList(params)
|
||||
this.table_data = res.data.list
|
||||
this.total = res.data.totalRows
|
||||
this.eventNums = res.data.eventTypes
|
||||
|
||||
var levelNums = Object.entries(res.data.eventLevels)
|
||||
this.levelNums = {}
|
||||
for (const [num, value] of levelNums) {
|
||||
if (num === '-1') {
|
||||
this.levelNums['all'] = value
|
||||
} else {
|
||||
this.levelNums[num] = value
|
||||
}
|
||||
}
|
||||
this.load_data = false
|
||||
} catch (error) {
|
||||
this.load_data = false
|
||||
}
|
||||
},
|
||||
// 获取电站数据
|
||||
async getStationlist() {
|
||||
const res = await GetStationlist()
|
||||
res.data.forEach(v => {
|
||||
v.children = []
|
||||
})
|
||||
this.stationList = transformTree(
|
||||
res.data,
|
||||
'id',
|
||||
'pid',
|
||||
item => item.pid === 0
|
||||
)
|
||||
},
|
||||
// 获取设备类型数据
|
||||
async getDeviceType() {
|
||||
const param = {
|
||||
stationId: this.filters.stationIds
|
||||
}
|
||||
const res = await getNewDevice(param)
|
||||
this.deviceTypeList = res.data
|
||||
},
|
||||
// 页码选择
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.get_table_data()
|
||||
},
|
||||
handleAlarmSelection(val) {
|
||||
this.slectionIds = val
|
||||
},
|
||||
handleDownFile() {
|
||||
const self = this
|
||||
self.downFileLoading = true
|
||||
this.filters.deviceTypeList = []
|
||||
this.deviceselects.forEach(val => {
|
||||
const index = this.deviceTypeList.findIndex(
|
||||
item => item.deviceType === val
|
||||
)
|
||||
this.filters.deviceTypeList.push(this.deviceTypeList[index])
|
||||
})
|
||||
const params = {
|
||||
title: this.$t('alarm.historyAlarm'),
|
||||
stationIds: this.filters.stationIds ? [this.filters.stationIds] : [],
|
||||
srcIdList: this.deviceselects,
|
||||
description: this.filters.description,
|
||||
eventLevels: this.filters.eventLevels,
|
||||
eventTypes: this.filters.eventTypes,
|
||||
startTime: this.filters.starTime,
|
||||
endTime: this.filters.endTime,
|
||||
ids: this.slectionIds.map(item => item.id)
|
||||
}
|
||||
handleDownExcel('/flow/event/exportHisEvnData', params, (callback) => {
|
||||
self.downFileLoading = false
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.realtime-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background:var(--table-bg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 10px;
|
||||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||||
|
||||
.table-setting {
|
||||
width: 100%;
|
||||
font-size: 24px;
|
||||
padding-right: 10px;
|
||||
text-align: right;
|
||||
color: #fff;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
::v-deep .el-form-item__content {
|
||||
display: flex;
|
||||
.el-checkbox {
|
||||
margin-right: 20px;
|
||||
.el-checkbox__label {
|
||||
color: $text-color;
|
||||
font-size: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.shigu {
|
||||
padding-left: 6px;
|
||||
color: red;
|
||||
}
|
||||
.yichang {
|
||||
padding-left: 6px;
|
||||
color: #f4c304;
|
||||
}
|
||||
.yuexian {
|
||||
padding-left: 6px;
|
||||
color: #d7e707;
|
||||
}
|
||||
.bianwei {
|
||||
padding-left: 6px;
|
||||
color: #45eef5;
|
||||
}
|
||||
.gaozhi {
|
||||
padding-left: 6px;
|
||||
color: #538ff1;
|
||||
}
|
||||
.total {
|
||||
padding-left: 6px;
|
||||
color: $text-color;
|
||||
}
|
||||
.trans-order {
|
||||
background: #de6822;
|
||||
border: 1px solid #de6822;
|
||||
}
|
||||
.table-wrapper {
|
||||
flex: 1;
|
||||
margin-top: 10px;
|
||||
.main-btns {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
padding: 10px 20px;
|
||||
|
||||
button {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background: rgba(0, 148, 255, 0.15);
|
||||
border-color: rgba(0, 148, 255, 0.15);
|
||||
}
|
||||
|
||||
.tags-select-input /deep/ .el-select__tags{
|
||||
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.tags-select-input /deep/ .el-select__tags-text{
|
||||
display: inline-block;
|
||||
max-width: 70px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.tags-select-input /deep/ .el-tag__close.el-icon-close{
|
||||
top: -0px!important;
|
||||
right: -6px!important;
|
||||
}
|
||||
|
||||
.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
|
||||
height: 33px!important; //这里高度根据需求自己设定
|
||||
}
|
||||
/deep/.el-cascader__tags {
|
||||
display: inline-flex;
|
||||
margin-right: 10px;
|
||||
flex-wrap: nowrap!important;
|
||||
}
|
||||
/deep/ .el-cascader__tags .el-tag:not(.is-hit) {
|
||||
border-color: #909399!important;
|
||||
}
|
||||
.reset-btn{
|
||||
|
||||
background: rgba(0, 148, 255, 0.15);
|
||||
border-color: rgba(0, 148, 255, 0.15);
|
||||
|
||||
}
|
||||
</style>
|
||||
1095
src/views/alarm/realtime/index.vue
Normal file
1095
src/views/alarm/realtime/index.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user