1198 lines
46 KiB
Vue
1198 lines
46 KiB
Vue
<template>
|
||
<div v-loading="loading" element-loading-text="数据加载中">
|
||
<div v-show="view" >
|
||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||
<!-- <el-form-item>
|
||
<el-switch
|
||
v-if="this.quyunames != undefined"
|
||
class="tableScopeSwitch"
|
||
:active-value="2"
|
||
:inactive-value="1"
|
||
@change="handleStatusChange"
|
||
:active-text="quyuname"
|
||
:inactive-text="quyunames"
|
||
inactive-color="#007878"
|
||
active-color="#666666"
|
||
v-model="formData.monitorFlag"
|
||
>
|
||
</el-switch>
|
||
</el-form-item> -->
|
||
<!-- <div style="display: flex;justify-content: space-between;flex-grow:1;"> -->
|
||
<el-form-item>
|
||
<timepicker ref="timelist" :interval="interval"></timepicker>
|
||
<!-- <el-button class="el-icon-d-arrow-right" type="primary" round @click="timechange">时间选择</el-button> -->
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button @click="querfromdata" type="primary" icon="el-icon-search">查询</el-button>
|
||
</el-form-item>
|
||
<el-form-item v-show="falg1">
|
||
<el-button type="primary" :disabled="bxfalg" class="el-icon-download" @click="download">
|
||
波形文件
|
||
</el-button>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<el-button type="text" @click="closeHandle">
|
||
条件筛选
|
||
<i :class="!view3 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||
</el-button>
|
||
</el-form-item>
|
||
<!-- </div> -->
|
||
<!-- </div> -->
|
||
<!-- <el-form-item style="margin-left:-2.6%">
|
||
|
||
<el-button type="primary">波形下载</el-button>
|
||
</el-form-item> -->
|
||
</el-form>
|
||
<div class="container" id="container">
|
||
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
||
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
||
<!-- <div style="display: flex;"> -->
|
||
<el-form-item label="统计类型:">
|
||
<el-select
|
||
v-model="formData.statisticalType"
|
||
@change="changeclasss"
|
||
placeholder="请选择统计类型"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in classificationData"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="{
|
||
label: item.name,
|
||
value: item.id,
|
||
name: item.name,
|
||
id: item.id,
|
||
code: item.code,
|
||
sort: item.sort
|
||
}"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="区域选择:">
|
||
<el-select v-model="deptName" placeholder="请选择所属部门区域" style="width: 100%">
|
||
<el-option :value="deptIndex" style="height: auto">
|
||
<el-tree
|
||
ref="tree"
|
||
:data="treeData"
|
||
node-key="id"
|
||
accordion
|
||
:default-expanded-keys="idArr"
|
||
:props="defaultProps"
|
||
@node-click="handleNodeClick"
|
||
>
|
||
<span class="span-ellipsis" slot-scope="{ node, data }">
|
||
<span :title="data.name">{{ data.name }}</span>
|
||
</span>
|
||
</el-tree>
|
||
</el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="电压等级:">
|
||
<el-select
|
||
v-model="formData.scale"
|
||
multiple
|
||
collapse-tags
|
||
clearable
|
||
placeholder="请选择电压等级"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in voltageleveloption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="{
|
||
label: item.name,
|
||
value: item.id,
|
||
code: item.code,
|
||
name: item.name,
|
||
id: item.id,
|
||
sort: item.sort
|
||
}"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="终端厂家:">
|
||
<el-select
|
||
v-model="formData.manufacturer"
|
||
multiple
|
||
collapse-tags
|
||
clearable
|
||
placeholder="请选择终端厂家"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in terminaloption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="{
|
||
label: item.name,
|
||
value: item.id,
|
||
code: item.code,
|
||
name: item.name,
|
||
id: item.id,
|
||
sort: item.sort
|
||
}"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="干扰源类型:">
|
||
<el-select
|
||
v-model="formData.loadType"
|
||
multiple
|
||
collapse-tags
|
||
clearable
|
||
placeholder="请选择干扰源类型"
|
||
style="width: 100%"
|
||
>
|
||
<el-option
|
||
v-for="item in interfereoption"
|
||
:key="item.id"
|
||
:label="item.name"
|
||
:value="{
|
||
label: item.name,
|
||
value: item.id,
|
||
code: item.code,
|
||
name: item.name,
|
||
id: item.id,
|
||
sort: item.sort
|
||
}"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="数据筛选:">
|
||
<el-input
|
||
style="width: 100%"
|
||
v-model="formData.searchValue"
|
||
clearable
|
||
placeholder="根据监测点，IP/MAC地址等信息查询"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
<!-- <el-form :inline="true" class="demo-form-inline">
|
||
|
||
</el-form> -->
|
||
<el-row :gutter="20">
|
||
<el-col :span="24">
|
||
<el-table
|
||
stripe
|
||
id="rebateSetTable"
|
||
ref="multipleTable"
|
||
highlight-current-row
|
||
height="calc(100vh - 170px)"
|
||
:data="tableData"
|
||
class="xshou"
|
||
header-cell-class-name="table_header"
|
||
@selection-change="handleSelectionChange"
|
||
border
|
||
@sort-change="sortchange"
|
||
>
|
||
<el-table-column align="center" type="selection" width="65"></el-table-column>
|
||
<!-- <el-table-column align="center" sortable prop="sort" label="序号" width="120" ></el-table-column> -->
|
||
<el-table-column
|
||
align="center"
|
||
sortable
|
||
prop="startTime"
|
||
label="暂降发生时刻"
|
||
:show-overflow-tooltip="true"
|
||
min-width="210"
|
||
fixed="left"
|
||
column-key="date"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="lineName"
|
||
label="监测点名称"
|
||
:show-overflow-tooltip="true"
|
||
min-width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="gdName"
|
||
label="供电公司"
|
||
min-width="160"
|
||
:show-overflow-tooltip="true"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="subName"
|
||
label="变电站"
|
||
:show-overflow-tooltip="true"
|
||
width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="ip"
|
||
label="网络参数"
|
||
min-width="180"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="scale"
|
||
label="电压等级"
|
||
min-width="110"
|
||
:show-overflow-tooltip="true"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="advanceType"
|
||
label="暂降类型"
|
||
min-width="120"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="advanceReason"
|
||
label="暂降原因"
|
||
min-width="120"
|
||
></el-table-column>
|
||
<el-table-column
|
||
sortable
|
||
align="center"
|
||
prop="eventType"
|
||
:formatter="formFilter"
|
||
label="暂态统计类型"
|
||
min-width="150"
|
||
></el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
sortable
|
||
prop="featureAmplitude"
|
||
label="暂降幅值(%)"
|
||
fixed="right"
|
||
min-width="180"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span>{{ (scope.row.featureAmplitude * 100).toFixed(2) }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
sortable
|
||
prop="firstMs"
|
||
label="暂降深度(%)"
|
||
fixed="right"
|
||
width="180"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template slot-scope="scope">
|
||
<span v-if="(100 - scope.row.featureAmplitude * 100).toFixed(2) > 0">
|
||
{{ (100 - scope.row.featureAmplitude * 100).toFixed(2) }}
|
||
</span>
|
||
<span v-if="(100 - scope.row.featureAmplitude * 100).toFixed(2) < 0">{{ '/' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column
|
||
align="center"
|
||
fixed="right"
|
||
sortable
|
||
prop="duration"
|
||
label="持续时间(s)"
|
||
width="150"
|
||
>
|
||
<!-- <template slot-scope="scope">
|
||
<span>{{ (scope.row.duration / 100).toFixed(2) }}</span>
|
||
</template> -->
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="severity" label="严重度">
|
||
<template slot-scope="scope">
|
||
<span v-if="scope.row.severity > 0">{{ scope.row.severity.toFixed(2) }}</span>
|
||
<span v-if="scope.row.severity <= 0">{{ '/' }}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" fixed="right" label="操作" width="150">
|
||
<template slot-scope="scope">
|
||
<el-button
|
||
v-if="scope.row.fileFlag == 0"
|
||
type="primary"
|
||
style="color: #000; background: #ccc !important"
|
||
size="mini"
|
||
icon="el-icon-share"
|
||
>
|
||
暂无波形
|
||
</el-button>
|
||
<el-button
|
||
v-if="scope.row.fileFlag == 1"
|
||
@click="handleClicktransient(scope.row)"
|
||
v-loading.fullscreen.lock="fullscreenLoading"
|
||
type="primary"
|
||
icon="el-icon-share"
|
||
size="mini"
|
||
>
|
||
波形分析
|
||
</el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
background
|
||
align="right"
|
||
class="mt10"
|
||
@size-change="changePageSize"
|
||
@current-change="changePageNum"
|
||
:current-page="pageData.pageNum"
|
||
:page-sizes="[20, 30, 50, 100, 200]"
|
||
:page-size="pageData.pageSize"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
:total="pageData.total"
|
||
></el-pagination>
|
||
</el-col>
|
||
</el-row>
|
||
</div>
|
||
<el-row>
|
||
<el-row>
|
||
<el-col :span="12">
|
||
<span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
|
||
<el-select v-if="view2" @change="changeView" v-model="value" placeholder="请选择值类型">
|
||
<el-option
|
||
v-for="item in options"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-col>
|
||
<el-col :span="12">
|
||
<el-button
|
||
v-if="view2"
|
||
@click="backbxlb"
|
||
type="primary"
|
||
class="el-icon-refresh-right"
|
||
style="float: right"
|
||
>
|
||
返回
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
||
<shushiboxi
|
||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||
:value="value"
|
||
:boxoList="boxoList"
|
||
:wp="wp"
|
||
></shushiboxi>
|
||
</el-tab-pane>
|
||
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
|
||
<rmsboxi
|
||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||
:value="value"
|
||
:boxoList="boxoList"
|
||
:wp="wp"
|
||
></rmsboxi>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</el-row>
|
||
|
||
<el-dialog
|
||
:close-on-click-modal="false"
|
||
title="条件查询配置"
|
||
:visible.sync="dialogVisible"
|
||
width="30%"
|
||
:before-close="handleClose"
|
||
>
|
||
<el-form :inline="true" :model="formInline" label-width="120px" class="demo-ruleForm">
|
||
<el-form-item label="暂态幅值(%):">
|
||
<el-input v-model="formInline.ztfz1" placeholder="0" style="width: 160px"></el-input>
|
||
<span>幅值</span>
|
||
<el-input v-model="formInline.ztfz2" placeholder="200" style="width: 160px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="暂态持续时间:">
|
||
<el-input v-model="formInline.cxsj1" placeholder="X毫秒" style="width: 160px"></el-input>
|
||
<span><时间<</span>
|
||
<el-input v-model="formInline.cxsj2" placeholder="X毫秒" style="width: 160px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="事件严重度:">
|
||
<el-input v-model="formInline.yzd1" placeholder="正负数" style="width: 160px"></el-input>
|
||
<span><程度<</span>
|
||
<el-input v-model="formInline.yzd2" placeholder="正负数" style="width: 160px"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="触发类型:">
|
||
<el-select
|
||
v-model="formInline.trigger"
|
||
multiple
|
||
collapse-tags
|
||
style="width: 370px"
|
||
placeholder="请选择"
|
||
>
|
||
<el-option
|
||
v-for="item in triggeroptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="是否存在波形:">
|
||
<el-select v-model="formInline.waveform" style="width: 370px" placeholder="请选择是否存在波形">
|
||
<el-option
|
||
v-for="item in waveformoptions"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
</el-form-item>
|
||
</el-form>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import { dicData } from '@/assets/commjs/dictypeData'
|
||
import api2 from '@/api/harmonic/harmonic'
|
||
import timepicker from '../../components/TimePicker/index4'
|
||
import api from '../../../api/integraliy/integraliy'
|
||
import rmsboxi from '@/views/cgy-components/echarts/rmsboxi'
|
||
import shushiboxi from '@/views/cgy-components/echarts/shushiboxi'
|
||
|
||
export default {
|
||
name: 'transienteventlist',
|
||
components: {
|
||
timepicker,
|
||
rmsboxi,
|
||
shushiboxi
|
||
},
|
||
data() {
|
||
return {
|
||
value: 1,
|
||
options: [
|
||
{
|
||
value: 1,
|
||
label: '一次值'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '二次值'
|
||
}
|
||
],
|
||
wp: {},
|
||
boxoList: {},
|
||
bxecharts: null,
|
||
quyuname: undefined,
|
||
quyunames: undefined,
|
||
bxactiveName: 'ssbx',
|
||
dd: false,
|
||
vh: null,
|
||
showBoxi: true,
|
||
view: true,
|
||
view2: false,
|
||
bxfalg: true,
|
||
falg3: false,
|
||
falg1: true,
|
||
fullscreenLoading: false,
|
||
asideheight: undefined,
|
||
tableheight: undefined,
|
||
dialogVisible: false,
|
||
height: undefined,
|
||
device: 1,
|
||
input: '',
|
||
formInline: {
|
||
ztfz1: '',
|
||
ztfz2: '',
|
||
cxsj1: '',
|
||
cxsj2: '',
|
||
yzd1: '',
|
||
yzd2: '',
|
||
trigger: [],
|
||
waveform: undefined
|
||
},
|
||
triggeroptions: [
|
||
{
|
||
value: 1,
|
||
label: '其他'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '扰动'
|
||
},
|
||
{
|
||
value: 3,
|
||
label: '暂降'
|
||
},
|
||
{
|
||
value: 4,
|
||
label: '暂升'
|
||
},
|
||
{
|
||
value: 5,
|
||
label: '中断'
|
||
},
|
||
{
|
||
value: 6,
|
||
label: '录波'
|
||
}
|
||
],
|
||
waveformoptions: [
|
||
{
|
||
value: 1,
|
||
label: '是'
|
||
},
|
||
{
|
||
value: 2,
|
||
label: '否'
|
||
}
|
||
],
|
||
falg: true,
|
||
falg2: false,
|
||
bxshuju: undefined,
|
||
id: 1,
|
||
title: '电网拓扑',
|
||
xdata: [],
|
||
ydata: [],
|
||
classvalue: 0,
|
||
activeName: 'tab1',
|
||
panindexOptions: [],
|
||
classificationData: [],
|
||
terminal: [],
|
||
terminaloption: [],
|
||
date: [],
|
||
row: undefined,
|
||
pageData: {
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
total: 0
|
||
},
|
||
loading: true,
|
||
tableData: [],
|
||
asideheight: undefined,
|
||
timeValue: [],
|
||
id: 1,
|
||
copent: 0,
|
||
classt: 'Power_Network',
|
||
tablename: 'tab1',
|
||
treeData: [],
|
||
idArr: [],
|
||
defaultProps: {
|
||
children: 'children',
|
||
label: 'name'
|
||
},
|
||
deptName: '',
|
||
deptIndex: '',
|
||
voltageleveloption: [],
|
||
terminal: '',
|
||
terminaloption: [],
|
||
interfere: '',
|
||
interfereoption: [],
|
||
classificationData: [],
|
||
dictypeData: undefined,
|
||
deptIndex: '',
|
||
formData: {
|
||
//后面需要修改
|
||
deptIndex: '',
|
||
monitorFlag: 2,
|
||
powerFlag: 2,
|
||
loadType: [],
|
||
manufacturer: [],
|
||
searchBeginTime: '',
|
||
searchEndTime: '',
|
||
statisticalType: '',
|
||
isType: 0,
|
||
scale: [],
|
||
serverName: '',
|
||
searchValue: '',
|
||
statFlag: true,
|
||
sortName:'',
|
||
orderBy:'',
|
||
sortBy:''
|
||
},
|
||
tableheight: undefined,
|
||
interval: 3,
|
||
multipleSelection: [],
|
||
lineIds: [],
|
||
timeIds: [],
|
||
EventStatislist: [],
|
||
view3: false
|
||
}
|
||
},
|
||
computed: {
|
||
// 实时监听表格
|
||
// tables: function() {
|
||
// const search = this.search
|
||
// if (search) {
|
||
// return this.tableData.filter(dataNews => {
|
||
// return Object.keys(dataNews).some(key => {
|
||
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
|
||
// })
|
||
// })
|
||
// }
|
||
// return this.tableData
|
||
// }
|
||
vth() {
|
||
return window.sessionStorage.getItem('appheight') - 95
|
||
}
|
||
},
|
||
created() {
|
||
let data = window.sessionStorage.getItem('sysData')
|
||
let yudata = eval('(' + data + ')')
|
||
let str = yudata.dataReport.split('，')
|
||
this.quyuname = str[1]
|
||
var info = window.sessionStorage.getItem('Info')
|
||
info = eval('(' + info + ')')
|
||
this.formData.deptIndex = info.deptId
|
||
this.getAreaDept()
|
||
this.getclassificationData()
|
||
this.getVoltage()
|
||
this.getManufacturer()
|
||
this.getLoadType()
|
||
},
|
||
mounted() {
|
||
this.setHeight()
|
||
window.addEventListener('resize', this.setHeight)
|
||
let data = window.sessionStorage.getItem('sysData')
|
||
let yudata = eval('(' + data + ')')
|
||
let str = yudata.dataReport.split('，')
|
||
this.quyuname = str[0]
|
||
this.quyunames = str[1]
|
||
|
||
|
||
|
||
this.querfromdata()
|
||
|
||
},
|
||
beforeDestroy() {
|
||
window.removeEventListener('resize', this.setHeight)
|
||
},
|
||
methods: {
|
||
setHeight() {
|
||
this.bxecharts = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||
this.vh = window.sessionStorage.getItem('appheight') - 95 + 'px'
|
||
|
||
|
||
},
|
||
changeView() {
|
||
this.showBoxi = false
|
||
setTimeout(() => {
|
||
this.showBoxi = true
|
||
}, 0)
|
||
},
|
||
timechange() {
|
||
this.dd = true
|
||
},
|
||
closeHandle() {
|
||
if (this.view3) {
|
||
this.view3 = false
|
||
} else {
|
||
this.view3 = true
|
||
}
|
||
//console.log('关闭和展开');
|
||
const dom = document.getElementById('container')
|
||
const closeDom = document.getElementsByClassName('close')[0]
|
||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
||
dom.className = 'container expend'
|
||
} else {
|
||
dom.className = 'container close-container'
|
||
}
|
||
},
|
||
// 数据过滤
|
||
formFilter(row, column) {
|
||
if (column.property == 'eventType') {
|
||
let title = ''
|
||
dicData('Event_Statis', []).forEach(item => {
|
||
if (item.id == row.eventType) {
|
||
title = item.name
|
||
}
|
||
})
|
||
return title
|
||
}
|
||
},
|
||
multipleconditions() {
|
||
this.formInline = {}
|
||
this.dialogVisible = true
|
||
},
|
||
handleClose() {
|
||
//
|
||
this.dialogVisible = false
|
||
},
|
||
transientevent(data) {
|
||
this.row = data
|
||
this.falg = false
|
||
this.falg1 = false
|
||
this.falg3 = false
|
||
this.falg2 = true
|
||
alert('父组件单行列表触发方法' + this.row)
|
||
},
|
||
back() {
|
||
this.falg2 = false
|
||
this.falg = true
|
||
this.falg1 = true
|
||
this.falg3 = false
|
||
},
|
||
//里层波形tab标签页触发事件
|
||
bxhandleClick(tab, event) {
|
||
if (tab.name == 'ssbx') {
|
||
this.bxactiveName = 'ssbx'
|
||
} else if (tab.name == 'rmsbx') {
|
||
this.bxactiveName = 'rmsbx'
|
||
}
|
||
// console.log(tab, event);
|
||
},
|
||
//返回触发事件
|
||
backbxlb() {
|
||
this.view = true
|
||
this.view2 = false
|
||
},
|
||
//部门绑定区域触发区域树节点
|
||
handleNodeClick(data, node) {
|
||
this.deptName = data.name
|
||
this.deptId = data.id
|
||
this.formData.deptIndex = data.id
|
||
},
|
||
//时间格式转化
|
||
dateFormat(dateData1, dateData2) {
|
||
var timearr = []
|
||
var date = new Date(dateData1)
|
||
var y = date.getFullYear()
|
||
var m = date.getMonth() + 1
|
||
m = m < 10 ? '0' + m : m
|
||
var d = date.getDate()
|
||
d = d < 10 ? '0' + d : d
|
||
var h = date.getHours()
|
||
h = h < 10 ? '0' + h : h
|
||
var f = date.getMinutes()
|
||
f = f < 10 ? '0' + f : f
|
||
var s = date.getSeconds()
|
||
s = s < 10 ? '0' + s : s
|
||
this.formData.searchBeginTime = y + '-' + m + '-' + d
|
||
timearr.push(this.formData.startTime)
|
||
var date = new Date(dateData2)
|
||
var y = date.getFullYear()
|
||
var m = date.getMonth() + 1
|
||
m = m < 10 ? '0' + m : m
|
||
var d = date.getDate()
|
||
d = d < 10 ? '0' + d : d
|
||
var h = date.getHours()
|
||
h = h < 10 ? '0' + h : h
|
||
var f = date.getMinutes()
|
||
f = f < 10 ? '0' + f : f
|
||
var s = date.getSeconds()
|
||
s = s < 10 ? '0' + s : s
|
||
this.formData.searchEndTime = y + '-' + m + '-' + d
|
||
timearr.push(this.formData.endTime)
|
||
return timearr
|
||
},
|
||
queryData() {
|
||
//this.closeHandle()
|
||
this.loading = true
|
||
// this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||
if (this.$refs.timelist.intervald == 3) {
|
||
let timedate = this.$refs.timelist.timeValue[1]
|
||
let timedate1 = timedate.split('-')
|
||
|
||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
let strTime = this.$refs.timelist.timeValue[0]
|
||
let strTime1 = this.$refs.timelist.timeValue[1]
|
||
let str1 = strTime.split('-')
|
||
let str2 = strTime1.split('-')
|
||
var now = new Date()
|
||
let month = now.getMonth()
|
||
if (month == 0) {
|
||
month = 12
|
||
str1[0] = str1[0] - 1
|
||
str2[0] = str2[0] - 1
|
||
}
|
||
if (month < 10) {
|
||
month = '0' + month
|
||
}
|
||
this.formData.searchBeginTime = str1[0] + '-' + month + '-' + str1[2]
|
||
|
||
this.formData.searchEndTime = str2[0] + '-' + month + '-' + new Date(str2[0], month, 0).getDate()
|
||
|
||
} else {
|
||
this.formData.searchBeginTime = this.$refs.timelist.timeValue[0]
|
||
this.formData.searchEndTime = this.$refs.timelist.timeValue[1]
|
||
}
|
||
} else if (this.$refs.timelist.intervald == 4) {
|
||
let timedate = this.$refs.timelist.timeValue[1]
|
||
let timedate1 = timedate.split('-')
|
||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
// 获取前七天的日期
|
||
var previousDates = []
|
||
for (var i = 6; i >= 0; i--) {
|
||
//var previousDate = new Date(currentDate);
|
||
let strTime = this.$refs.timelist.timeValue[0]
|
||
var currentDate = new Date(strTime)
|
||
let previousDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||
previousDate.setDate(currentDate.getDate() - i)
|
||
previousDates.push(previousDate)
|
||
}
|
||
// 格式化日期
|
||
var formattedDates = previousDates.map(function (date) {
|
||
var year = date.getFullYear()
|
||
var month = (date.getMonth() + 1).toString().padStart(2, '0')
|
||
var day = date.getDate().toString().padStart(2, '0')
|
||
|
||
let d = year + '-' + month + '-' + day
|
||
// console.log("+++++++++++",d)
|
||
// 输出前七天的日期数组
|
||
return d
|
||
})
|
||
this.formData.searchBeginTime = formattedDates[0]
|
||
this.formData.searchEndTime = formattedDates[formattedDates.length - 1]
|
||
// console.log(formattedDates);
|
||
} else {
|
||
this.formData.searchBeginTime = this.$refs.timelist.timeValue[0]
|
||
this.formData.searchEndTime = this.$refs.timelist.timeValue[1]
|
||
}
|
||
} else if (this.$refs.timelist.intervald == 5) {
|
||
let timedate = this.$refs.timelist.timeValue[1]
|
||
let timedate1 = timedate.split('-')
|
||
if (timedate1[2] == '01' || timedate1[2] == '02' || timedate1[2] == '03') {
|
||
let strTime = this.$refs.timelist.timeValue[0]
|
||
let currentDate = new Date(Date.parse(strTime.replace(/-/g, '/')))
|
||
// console.log('当前日期（中国标准时间）：', currentDate);
|
||
// console.log("++++",currentDate)
|
||
|
||
// 向前推一天
|
||
currentDate.setDate(currentDate.getDate() - 1)
|
||
|
||
// 格式化日期字符串
|
||
const formatDate = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
let strTime2 = this.$refs.timelist.timeValue[1]
|
||
let currentDate2 = new Date(Date.parse(strTime2.replace(/-/g, '/')))
|
||
// console.log('当前日期（中国标准时间）：', currentDate);
|
||
// console.log("++++",currentDate)
|
||
|
||
// 向前推一天
|
||
currentDate.setDate(currentDate.getDate() - 1)
|
||
|
||
// 格式化日期字符串
|
||
const formatDate2 = date => {
|
||
const year = date.getFullYear()
|
||
const month = String(date.getMonth() + 1).padStart(2, '0')
|
||
const day = String(date.getDate()).padStart(2, '0')
|
||
return `${year}-${month}-${day}`
|
||
}
|
||
// console.log('当前日期：', formatDate(new Date())); // 当前日期
|
||
// console.log('向前推一天：', formatDate(currentDate)); // 一天前的日期
|
||
this.formData.searchBeginTime = formatDate(currentDate)
|
||
this.formData.searchEndTime = formatDate(currentDate2)
|
||
} else {
|
||
this.formData.searchBeginTime = this.$refs.timelist.timeValue[0]
|
||
this.formData.searchEndTime = this.$refs.timelist.timeValue[1]
|
||
}
|
||
|
||
//let estr = this.$refs.fff.timeValue[1]
|
||
} else {
|
||
this.formData.searchBeginTime = this.$refs.timelist.timeValue[0]
|
||
this.formData.searchEndTime = this.$refs.timelist.timeValue[1]
|
||
}
|
||
|
||
this.formData.pageSize = this.pageData.pageSize
|
||
this.formData.pageNum = this.pageData.pageNum
|
||
if (this.formData.searchValue !== '') {
|
||
this.formData.pageNum = 1
|
||
} else {
|
||
this.formData.pageNum = this.pageData.pageNum
|
||
}
|
||
api2.getTransientData(this.formData).then(res => {
|
||
if (res.code == 'A0000') {
|
||
this.pageData.total = res.data.total
|
||
let data = res.data.records
|
||
this.tableData = data
|
||
this.loading = false
|
||
}
|
||
})
|
||
},
|
||
//2次组件触发事件
|
||
querfromdata() {
|
||
//this.closeHandle()
|
||
this.dd = false
|
||
this.interval = this.$refs.timelist.intervald
|
||
|
||
this.loading = true
|
||
this.timeValue = this.$refs.timelist.timeValue
|
||
this.formData.searchBeginTime = this.$refs.timelist.timeValue[0]
|
||
this.formData.searchEndTime = this.$refs.timelist.timeValue[1]
|
||
this.formData.pageSize = this.pageData.pageSize
|
||
if (this.formData.searchValue !== '') {
|
||
this.formData.pageNum = 1
|
||
} else {
|
||
this.formData.pageNum = this.pageData.pageNum
|
||
}
|
||
this.formData.pageNum = this.pageData.pageNum
|
||
api2.getTransientData(this.formData).then(res => {
|
||
if (res.code == 'A0000') {
|
||
if (res.data.total > 0 && res.data.records.length == 0) {
|
||
this.punmData()
|
||
} else {
|
||
this.pageData.total = res.data.total
|
||
let data = res.data.records
|
||
this.tableData = data
|
||
this.loading = false
|
||
}
|
||
}
|
||
})
|
||
},
|
||
punmData() {
|
||
this.formData.pageNum = 1
|
||
this.pageData.pageNum = 1
|
||
this.dd = false
|
||
this.interval = this.$refs.timelist.intervald
|
||
this.loading = true
|
||
this.timeValue = this.$refs.timelist.timeValue
|
||
this.dateFormat(this.timeValue[0], this.timeValue[1])
|
||
this.formData.pageSize = this.pageData.pageSize
|
||
api2.getTransientData(this.formData).then(res => {
|
||
if (res.code == 'A0000') {
|
||
this.pageData.total = res.data.total
|
||
let data = res.data.records
|
||
this.tableData = data
|
||
this.loading = false
|
||
}
|
||
})
|
||
},
|
||
changePageNum(data) {
|
||
this.pageData.pageNum = data
|
||
this.queryData()
|
||
},
|
||
changePageSize(data) {
|
||
this.pageData.pageSize = data
|
||
this.queryData()
|
||
},
|
||
//开关触发
|
||
handleStatusChange(val) {
|
||
this.formData.monitorFlag = val
|
||
//this.fiveTreeData()
|
||
},
|
||
//获取区域
|
||
getAreaDept() {
|
||
api.getAreaDept().then(res => {
|
||
if (res.code == 'A0000') {
|
||
var data = res.data
|
||
this.deptName = res.data[0].name
|
||
data.forEach(element => {
|
||
this.idArr.push(element.id)
|
||
})
|
||
this.treeData = data
|
||
}
|
||
})
|
||
},
|
||
//字典暂降指标类型
|
||
getEventStatis() {
|
||
var code = 'Event_Statis'
|
||
this.EventStatislist = dicData(code, [])
|
||
/// this.formData.scale = this.voltageleveloption
|
||
},
|
||
//字典获取数据电压等级
|
||
getVoltage() {
|
||
var code = 'Dev_Voltage_Stand'
|
||
this.voltageleveloption = dicData(code, [])
|
||
this.formData.scale = this.voltageleveloption
|
||
},
|
||
//字典获取数据终端厂家
|
||
getManufacturer() {
|
||
var code = 'Dev_Manufacturers'
|
||
this.terminaloption = dicData(code, [])
|
||
this.formData.manufacturer = this.terminaloption
|
||
},
|
||
//字典获取数据干扰源类型
|
||
getLoadType() {
|
||
var code = 'Interference_Source'
|
||
this.interfereoption = dicData(code, [])
|
||
this.formData.loadType = this.interfereoption
|
||
},
|
||
//获取统计类型
|
||
getclassificationData() {
|
||
var code = 'Statistical_Type'
|
||
this.classificationData = dicData(code, ['Report_Type'])
|
||
this.formData.statisticalType = this.classificationData[0]
|
||
},
|
||
//导出
|
||
exportExcel() {},
|
||
//排序触发
|
||
sortchange({ column, field, order }) {
|
||
/* console.log("ddddd"+column.property)
|
||
//this.formData.sortName = column.property
|
||
this.formData.sortBy = column.property == 'startTime' ? 'start_time' : column.property == 'featureAmplitude' ? 'feature_amplitude' : column.property == 'firstMs' ? 'first_ms': column.property == 'duration' ? 'duration':column.property
|
||
console.log(this.formData.sortBy)
|
||
this.formData.orderBy = order == 'descending' ? 'desc':order == 'ascending' ? 'asc':order
|
||
this.punmData()*/
|
||
},
|
||
//切换统计类型
|
||
changeclasss(val) {
|
||
this.classt = val.code
|
||
},
|
||
|
||
//波形下载
|
||
download() {
|
||
let data = {
|
||
lineId: this.lineIds
|
||
// timeId: this.timeIds,
|
||
}
|
||
api.downloadWaveFile(data).then(response => {
|
||
let blob = new Blob([response], { type: 'application/zip' })
|
||
|
||
const url = window.URL.createObjectURL(blob)
|
||
const link = document.createElement('a') // 创建a标签
|
||
link.href = url
|
||
link.download = '波形分析下载' // 设置下载的文件名
|
||
document.body.appendChild(link)
|
||
link.click() //执行下载
|
||
document.body.removeChild(link) //释放标签
|
||
})
|
||
},
|
||
//多选
|
||
handleSelectionChange(val) {
|
||
if (val.length > 0) {
|
||
this.bxfalg = false
|
||
this.falg3 = true
|
||
//this.falg = false
|
||
this.falg1 = true
|
||
} else {
|
||
this.bxfalg = true
|
||
this.falg3 = true
|
||
// this.falg = true
|
||
this.falg1 = true
|
||
}
|
||
this.multipleSelection = []
|
||
this.lineIds = []
|
||
this.timeIds = []
|
||
val.forEach(item => {
|
||
this.lineIds.push(item.eventId)
|
||
this.timeIds.push(item.startTime)
|
||
})
|
||
this.multipleSelection = val
|
||
},
|
||
//波形
|
||
async handleClicktransient(row) {
|
||
this.loading=true
|
||
let data = {
|
||
id: row.eventId,
|
||
// id: '8e2d31762fc25e2918bf48f409b95c93',
|
||
systemType: 0,
|
||
type: 0
|
||
}
|
||
await api.getTransientAnalyseWave(data).then(res => {
|
||
if (res != undefined) {
|
||
this.wp = res.data
|
||
this.boxoList = row
|
||
this.view = false
|
||
this.view2 = true
|
||
}
|
||
})
|
||
this.loading=false
|
||
|
||
// this.$refs.child.getRmsBoXinFenXi()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less" scoped>
|
||
@import url('../../../styles/comStyle.less');
|
||
|
||
.xshou {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.container {
|
||
/* margin: auto; */
|
||
top: 0px;
|
||
right: 0;
|
||
width: 40%;
|
||
height: 0px;
|
||
z-index: 2000;
|
||
position: absolute;
|
||
background-color: #e4e7ebb9;
|
||
overflow: auto;
|
||
scroll-behavior: smooth;
|
||
-radius: 20px;
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
::-webkit-scrollbar {
|
||
display: block;
|
||
}
|
||
|
||
.expend {
|
||
animation: expend ease 5s forwards;
|
||
}
|
||
|
||
.close-container {
|
||
animation: no-expend ease 1s forwards;
|
||
}
|
||
|
||
@keyframes expend {
|
||
from {
|
||
top: 0px;
|
||
height: auto;
|
||
}
|
||
to {
|
||
height: auto;
|
||
top: 0px;
|
||
}
|
||
}
|
||
|
||
@keyframes no-expend {
|
||
from {
|
||
height: 20%;
|
||
top: 0px;
|
||
}
|
||
to {
|
||
top: 0px;
|
||
height: 0px;
|
||
}
|
||
}
|
||
|
||
.coles {
|
||
position: absolute;
|
||
right: 0;
|
||
font-size: 20px;
|
||
cursor: pointer;
|
||
}
|
||
</style>
|
||
<style lang="scss" scoped>
|
||
::v-deep.el-table__fixed {
|
||
// 左固定列
|
||
height: auto !important;
|
||
bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
|
||
right: 10px !important;
|
||
}
|
||
|
||
::v-deep .el-table__fixed-right {
|
||
// 右固定列
|
||
height: auto !important;
|
||
bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
|
||
margin-right: 8px;
|
||
}
|
||
|
||
::v-deep .el-table__fixed,
|
||
.el-table__fixed-right {
|
||
height: calc(100% - 10px) !important;
|
||
}
|
||
|
||
::v-deep.el-table__fixed-body-wrapper {
|
||
height: 100% !important;
|
||
}
|
||
|
||
::v-deep.el-table__fixed-body-wrapper .el-table__body {
|
||
/*滚动条高度*/
|
||
padding-bottom: 50px !important;
|
||
}
|
||
|
||
// ::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover>td {
|
||
// background: $themeColor-8 !important;
|
||
// color: #fff !important;
|
||
// }
|
||
|
||
// ::v-deep .el-table--d .el-table__body tr.el-table__row--d.current-row td {
|
||
// background-color: $themeColor !important;
|
||
// color: #fff !important;
|
||
// }
|
||
</style>
|