636 lines
18 KiB
Vue
636 lines
18 KiB
Vue
<template>
|
||
<section class="realtime-wrapper">
|
||
|
||
<el-form id="searchForm" :model="filters" label-width="80px">
|
||
<el-row :gutter="5" class="search-row">
|
||
<el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
|
||
<el-form-item :label="$t('remote.eqpt') + '：'">
|
||
<el-input v-model="devAllName" readonly :placeholder="$t('remote.pleaseInput')" class="input-with-select">
|
||
<el-button slot="append" icon="el-icon-search" :loading="dev_loading" @click="openTreeDialog" />
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-col>
|
||
<el-col :xs="12" :sm="9" :md="9" :lg="9" :xl="9">
|
||
<el-button
|
||
:loading="load_data"
|
||
type="primary"
|
||
icon="el-icon-search"
|
||
@click="on_refresh"
|
||
>{{ $t('remote.query') }}</el-button>
|
||
|
||
</el-col>
|
||
<el-col :xs="12" :sm="9" :md="9" :lg="9" :xl="9" class="btn-box">
|
||
<el-button
|
||
v-permission="['remoteControl:command:batchDistribution']"
|
||
type="primary"
|
||
icon="el-icon-bottom"
|
||
:loading="isMoreLoading"
|
||
class="reset-btn"
|
||
@click="handleMoreOrder"
|
||
>{{ $t('remote.batchdelivery') }}</el-button>
|
||
<el-button
|
||
v-permission="['remoteControl:command:export']"
|
||
type="primary"
|
||
icon="el-icon-upload2"
|
||
class="reset-btn"
|
||
:loading="export_loading"
|
||
@click="handleExport"
|
||
>{{ $t('remote.export') }}</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</el-form>
|
||
|
||
<div class="table-wrapper">
|
||
<el-table
|
||
ref="alarmtable"
|
||
v-loading="load_data"
|
||
:row-style="getRowStyle"
|
||
header-align="center"
|
||
:height="$setAutoTableHeight(46,searchHeight)"
|
||
:data="table_data"
|
||
:element-loading-text="loadingText"
|
||
style="width: 100%"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column
|
||
type="selection"
|
||
width="50"
|
||
align="center"
|
||
/>
|
||
<el-table-column
|
||
type="index"
|
||
:index="tableRowClassName"
|
||
:label="$t('remote.ordinal')"
|
||
width="65"
|
||
align="center"
|
||
/>
|
||
<el-table-column prop="deviceName" width="100" :label="$t('remote.eqpt')" />
|
||
<el-table-column prop="colName" width="300" :label="$t('remote.chineseName')" show-overflow-tooltip />
|
||
<el-table-column prop="col" width="100" :label="$t('remote.englishName')" show-overflow-tooltip />
|
||
<el-table-column prop="maxValue" :label="$t('remote.maxValue')" />
|
||
<el-table-column prop="minValue" :label="$t('remote.minValue')" />
|
||
<el-table-column prop="updateTime" :label="$t('remote.upDate')" width="150" />
|
||
<el-table-column prop="value" :label="$t('remote.nowValue')">
|
||
<template slot-scope="scope">
|
||
{{ scope.row.value }}{{ scope.row.unit ? scope.row.unit : '' }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column width="150" :label="$t('remote.yhxgz')">
|
||
<template slot-scope="scope">
|
||
<el-input v-model="scope.row.modifyValue" type="number" placeholder="请输入" />
|
||
</template>
|
||
</el-table-column>
|
||
<!-- <el-table-column width="180" label="站内接入点">
|
||
<template slot-scope="scope">
|
||
<el-select v-model="scope.row.sn" placeholder="请输入" style="width:100%" @change="getHeartbeat(scope.row.sn)">
|
||
<el-option
|
||
v-for="item in snList"
|
||
:key="item.id"
|
||
:label="item.sn"
|
||
:value="item.sn"
|
||
/>
|
||
</el-select>
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column :label="$t('remote.operate')" width="120">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-permission="['remoteControl:command:singleDistribution']"
|
||
type="text"
|
||
icon="el-icon-bottom"
|
||
@click="handleOrder(scope.row,scope.$index)"
|
||
>{{ $t('remote.issued') }}</el-button>
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-refresh"
|
||
@click="handleRefresh(scope.row,scope.$index)"
|
||
>{{ $t('remote.refresh') }}</el-button>
|
||
</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>
|
||
<TreeDialog ref="treeDialog" :visible="treeVisible" :tree-changedata="srcId" :tree-props="treeProps" check-strictly :title="$t('remote.eqptType')" @confirm="getTreeId" @close="closeTreeDialog" />
|
||
</div>
|
||
</section>
|
||
</template>
|
||
|
||
<script>
|
||
import { pageSize, pageSizes } from '@/config'
|
||
import Pagingbar from '@/components/Pagingbar'
|
||
import TreeDialog from '@/components/TreeDialog'
|
||
import { handleDownExcel } from '@/utils'
|
||
import { GetTreeVirtualDevices } from '@/api/surveillance/energy-storage/index'
|
||
import { GetPointList, GetSNBystationId, GetObjById, SetOrderIssued, GetOrderProgressBar, GetHeartbeat, beforeOrderSend } from '@/api/monitor/integrated-cabinet'
|
||
export default {
|
||
components: { Pagingbar, TreeDialog },
|
||
props: {},
|
||
data() {
|
||
return {
|
||
filters: {
|
||
stationId: '',
|
||
srcId: null
|
||
},
|
||
srcId: [],
|
||
snList: [],
|
||
multipleSelection: [],
|
||
table_data: [],
|
||
// 当前页码
|
||
currentPage: 1,
|
||
// 数据总条目
|
||
total: 0,
|
||
// 每页显示多少条数据
|
||
pageSize: pageSize,
|
||
pageSizes: pageSizes,
|
||
// 请求时的loading效果
|
||
load_data: false,
|
||
isMoreLoading: false,
|
||
interval: null,
|
||
moreInterval: null,
|
||
orderError: [],
|
||
loadingText: 'Loading...',
|
||
cascaderKey: 0,
|
||
props: { label: 'name', value: 'srcId', children: 'children', emitPath: false },
|
||
stationNormalizer(node) {
|
||
return {
|
||
id: node.srcId,
|
||
label: node.name,
|
||
children:
|
||
node.children && node.children.length > 0
|
||
? node.children
|
||
: undefined
|
||
}
|
||
},
|
||
treeProps: {
|
||
id: 'srcId',
|
||
label: 'name',
|
||
children: 'children',
|
||
disabled: (data, node) => {
|
||
if (data.category === 1 || data.category === 2) {
|
||
return true
|
||
}
|
||
}
|
||
},
|
||
devAllName: '',
|
||
treeVisible: false,
|
||
dev_loading: false,
|
||
export_loading: false
|
||
}
|
||
},
|
||
computed: {
|
||
stations: function() {
|
||
return this.$store.getters.stations || []
|
||
},
|
||
currentStation() {
|
||
return this.$store.getters.currentStation || undefined
|
||
},
|
||
searchHeight() {
|
||
return this.$store.getters.searchHeight
|
||
}
|
||
},
|
||
watch: {
|
||
// stations: {
|
||
// handler: function(stations) {
|
||
// if (stations.length > 0) {
|
||
// this.filters.stationId = this.stations[0].id
|
||
// this.get_table_data()
|
||
// this.getFindIntegratedCabinets()
|
||
// }
|
||
// }
|
||
// },
|
||
currentStation: {
|
||
async handler(val) {
|
||
if (val && val.id) {
|
||
this.filters.stationId = val.id
|
||
this.currentPage = 1
|
||
await this.getFindIntegratedCabinets()
|
||
this.get_table_data()
|
||
}
|
||
},
|
||
deep: true
|
||
}
|
||
},
|
||
async created() {
|
||
if (this.currentStation.id) {
|
||
this.filters.stationId = this.currentStation.id
|
||
await this.getFindIntegratedCabinets()
|
||
|
||
this.beforeOrderSend()
|
||
|
||
// const isOffLine = await this.getHeartbeat()
|
||
// if (isOffLine) {
|
||
// this.get_table_data()
|
||
// }
|
||
}
|
||
},
|
||
destroyed() {
|
||
clearInterval(self.interval)
|
||
clearInterval(self.moreInterval)
|
||
},
|
||
methods: {
|
||
findItem(tree, srcId) {
|
||
if (tree.srcId === srcId) {
|
||
return tree
|
||
}
|
||
|
||
if (tree.children && tree.children.length > 0) {
|
||
for (const child of tree.children) {
|
||
const result = this.findItem(child, srcId)
|
||
if (result) {
|
||
return result
|
||
}
|
||
}
|
||
}
|
||
|
||
return null
|
||
},
|
||
getTreeId(val, name) {
|
||
// console.log(val, name)
|
||
this.devAllName = name
|
||
this.filters.srcId = val
|
||
},
|
||
closeTreeDialog() {
|
||
this.treeVisible = false
|
||
},
|
||
openTreeDialog() {
|
||
this.treeVisible = true
|
||
},
|
||
async beforeOrderSend() {
|
||
const params = {
|
||
stationId: this.filters.stationId
|
||
}
|
||
const res = await beforeOrderSend(params)
|
||
this.filters.srcId = res.data.srcId
|
||
const r = this.findItem(this.srcId[0], this.filters.srcId)
|
||
this.$nextTick(() => {
|
||
this.$refs.treeDialog.currentNode = this.filters.srcId
|
||
})
|
||
|
||
this.devAllName = r.name
|
||
this.get_table_data()
|
||
},
|
||
tableRowClassName(index) {
|
||
return (this.currentPage - 1) * this.pageSize + index + 1
|
||
},
|
||
getRowStyle(row) {
|
||
const ishas = this.orderError.includes(row.row.col)
|
||
if (ishas) {
|
||
return {
|
||
color: 'red'
|
||
}
|
||
} else {
|
||
return {
|
||
color: '#ffffff'
|
||
}
|
||
}
|
||
},
|
||
async getHeartbeat() {
|
||
this.$forceUpdate()
|
||
const params = {
|
||
stationId: this.filters.stationId,
|
||
srcId: this.filters.srcId
|
||
}
|
||
const res = await GetHeartbeat(params)
|
||
if (res.data.heartbeatStatus === 0) {
|
||
this.$message.warning(res.data.msg)
|
||
return false
|
||
} else {
|
||
return true
|
||
}
|
||
},
|
||
handleExport() {
|
||
this.export_loading = true
|
||
const params = {
|
||
isSave: 1,
|
||
stationId: this.filters.stationId,
|
||
srcId: this.filters.srcId,
|
||
title: this.$t('remote.mlxf')
|
||
}
|
||
|
||
handleDownExcel('/business/point/exportExcel', params, (callback) => {
|
||
this.export_loading = false
|
||
})
|
||
},
|
||
handleSizeChange(val) {
|
||
this.currentPage = 1
|
||
this.pageSize = val
|
||
this.get_table_data()
|
||
},
|
||
// 页码选择
|
||
handleCurrentChange(val) {
|
||
this.currentPage = val
|
||
this.get_table_data()
|
||
},
|
||
// 切换电站
|
||
handleChangeStation() {
|
||
this.getFindIntegratedCabinets()
|
||
// this.getSNBystationId()
|
||
},
|
||
// 刷新
|
||
on_refresh() {
|
||
this.currentPage = 1
|
||
this.get_table_data()
|
||
},
|
||
// 清空查询条件
|
||
handleSearchClear() {
|
||
this.filters = {}
|
||
this.filters.stationId = this.stations[0].id
|
||
this.filters.srcId = ''
|
||
this.handleChangeStation()
|
||
},
|
||
// 多选
|
||
handleSelectionChange(val) {
|
||
this.multipleSelection = val
|
||
},
|
||
// 下发
|
||
async handleOrder(row, index) {
|
||
const self = this
|
||
this.orderError = []
|
||
row.modifyValue = Number(row.modifyValue)
|
||
if (row.modifyValue > row.maxValue || row.modifyValue < row.minValue) {
|
||
return this.$message.warning(this.$t('remote.issuedError'))
|
||
}
|
||
this.load_data = true
|
||
this.loadingText = this.$t('remote.Delivering')
|
||
const params = {
|
||
list: [{ ...row, stationId: self.filters.stationId }]
|
||
}
|
||
const res = await SetOrderIssued(params)
|
||
if (res.data.heartbeatStatus === 0) {
|
||
this.load_data = false
|
||
this.$message.warning(res.data.msg)
|
||
} else {
|
||
this.interval = setInterval(() => {
|
||
self.getOrderProgressBar(row, index)
|
||
}, 500)
|
||
}
|
||
},
|
||
// 下发进度
|
||
async getOrderProgressBar(row, index) {
|
||
const self = this
|
||
const params = {
|
||
stationId: this.filters.stationId,
|
||
srcId: this.filters.srcId
|
||
}
|
||
const res = await GetOrderProgressBar(params)
|
||
if (res.data.isEnd === 1) {
|
||
clearInterval(self.interval)
|
||
this.load_data = false
|
||
this.handleRefresh(row, index, true)
|
||
self.$message.success(res.data.msg)
|
||
} else if (res.data.isEnd === 2) {
|
||
clearInterval(self.interval)
|
||
this.load_data = false
|
||
if (res.data.processList.length > 0) {
|
||
res.data.processList.forEach(item => {
|
||
if (!self.orderError.includes(item.col)) {
|
||
self.orderError.push(item.col)
|
||
}
|
||
})
|
||
}
|
||
self.$message.error(res.data.msg)
|
||
}
|
||
},
|
||
// 批量下发进度
|
||
async getMoreOrderProgressBar() {
|
||
const self = this
|
||
const params = {
|
||
stationId: this.filters.stationId,
|
||
srcId: this.filters.srcId
|
||
}
|
||
const res = await GetOrderProgressBar(params)
|
||
if (res.data.isEnd === 1) {
|
||
clearInterval(self.moreInterval)
|
||
self.isMoreLoading = false
|
||
self.load_data = false
|
||
// self.get_table_data()
|
||
if (self.multipleSelection.length > 0) {
|
||
self.multipleSelection.forEach(item => {
|
||
const index = self.table_data.findIndex(v => {
|
||
return v.col === item.col
|
||
})
|
||
self.handleRefresh(item, index, true)
|
||
})
|
||
} else {
|
||
self.orderError = []
|
||
}
|
||
self.$message.success(res.data.msg)
|
||
} else if (res.data.isEnd === 2) {
|
||
clearInterval(self.moreInterval)
|
||
self.load_data = false
|
||
self.isMoreLoading = false
|
||
if (res.data.processList.length > 0) {
|
||
res.data.processList.forEach(item => {
|
||
if (!self.orderError.includes(item.col)) {
|
||
self.orderError.push(item.col)
|
||
}
|
||
})
|
||
}
|
||
this.refershSuccessOreder()
|
||
self.$message.error(res.data.msg)
|
||
}
|
||
},
|
||
refershSuccessOreder() {
|
||
const self = this
|
||
const successList = this.multipleSelection.filter(item => {
|
||
return !self.orderError.includes(item.col)
|
||
})
|
||
successList.forEach(item => {
|
||
const index = self.table_data.findIndex(v => {
|
||
return v.col === item.col
|
||
})
|
||
self.handleRefresh(item, index, true)
|
||
})
|
||
},
|
||
async handleMoreOrder() {
|
||
const self = this
|
||
this.orderError = []
|
||
if (this.multipleSelection.length > 0) {
|
||
this.isMoreLoading = true
|
||
this.multipleSelection.forEach(function(item) {
|
||
item.stationId = self.filters.stationId
|
||
})
|
||
const params = {
|
||
list: this.multipleSelection
|
||
}
|
||
const res = await SetOrderIssued(params)
|
||
if (res.data.heartbeatStatus === 0) {
|
||
this.load_data = false
|
||
this.isMoreLoading = false
|
||
this.$message.warning(res.data.msg)
|
||
} else {
|
||
this.moreInterval = setInterval(() => {
|
||
self.getMoreOrderProgressBar()
|
||
}, 500)
|
||
}
|
||
} else {
|
||
this.$message.warning(this.$t('remote.pleaseSelectData'))
|
||
}
|
||
},
|
||
|
||
// 查询设备
|
||
async getFindIntegratedCabinets() {
|
||
this.dev_loading = true
|
||
const params = {
|
||
stationId: this.filters.stationId
|
||
}
|
||
try {
|
||
const res = await GetTreeVirtualDevices(params)
|
||
this.srcId = res.data
|
||
if (this.srcId.length > 0) {
|
||
this.filters.srcId = this.srcId[0].srcId
|
||
this.getHeartbeat()
|
||
} else {
|
||
this.filters.srcId = ''
|
||
}
|
||
} catch (error) {
|
||
// console.log(error);
|
||
} finally {
|
||
this.dev_loading = false
|
||
}
|
||
},
|
||
// 查询SN
|
||
async getSNBystationId() {
|
||
const params = {
|
||
stationId: this.filters.stationId
|
||
}
|
||
const res = await GetSNBystationId(params)
|
||
this.snList = res.data
|
||
if (this.snList.length > 0) {
|
||
this.getHeartbeat()
|
||
}
|
||
},
|
||
// 查询
|
||
async handleRefresh(row, index, isRefresh) {
|
||
const params = {
|
||
...row,
|
||
stationId: this.filters.stationId
|
||
}
|
||
const res = await GetObjById(params)
|
||
res.data.modifyValue = res.data.value
|
||
this.$set(this.table_data, index, res.data)
|
||
if (!isRefresh) {
|
||
this.orderError = []
|
||
}
|
||
},
|
||
// 获取电站数据
|
||
async get_table_data() {
|
||
const self = this
|
||
this.load_data = true
|
||
const params = {
|
||
pageNum: self.currentPage,
|
||
pageSize: self.pageSize,
|
||
isSave: 1,
|
||
stationId: self.filters.stationId,
|
||
srcId: self.filters.srcId
|
||
}
|
||
const res = await GetPointList(params)
|
||
res.data.list.forEach(row => {
|
||
row.modifyValue = row.value
|
||
})
|
||
self.table_data = res.data.list
|
||
self.total = res.data.totalRows
|
||
self.load_data = false
|
||
self.orderError = []
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.realtime-wrapper {
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(4, 48, 80, 0.6);
|
||
padding: 10px;
|
||
box-shadow: inset 0px 2px 16px 0px rgba(0, 148, 255, 0.15);
|
||
::v-deep .el-loading-spinner .path {
|
||
-webkit-animation: loading-dash 1.5s ease-in-out infinite;
|
||
animation: loading-dash 1.5s ease-in-out infinite;
|
||
stroke-dasharray: 90, 150;
|
||
stroke-dashoffset: 0;
|
||
stroke-width: 4;
|
||
stroke: #59C5DC;
|
||
stroke-linecap: round;
|
||
}
|
||
.el-loading-spinner .el-loading-text {
|
||
color: #59C5DC;
|
||
margin: 3px 0;
|
||
font-size: 14px;
|
||
}
|
||
.search-first-row {
|
||
margin-bottom: 10px;
|
||
}
|
||
::v-deep .el-form-item__content {
|
||
display: flex;
|
||
.el-checkbox {
|
||
margin-right: 20px;
|
||
.el-checkbox__label {
|
||
color: #fff;
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
.btn-box{
|
||
text-align: right;
|
||
}
|
||
.reset-btn{
|
||
|
||
background: rgba(0, 148, 255, 0.15);
|
||
border-color: rgba(0, 148, 255, 0.15);
|
||
|
||
}
|
||
.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: #fff;
|
||
}
|
||
.trans-order {
|
||
background: #de6822;
|
||
border: 1px solid #de6822;
|
||
}
|
||
.table-wrapper {
|
||
.main-btns {
|
||
width: 100%;
|
||
text-align: right;
|
||
padding: 10px 20px;
|
||
|
||
button {
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
</style>
|