提交
This commit is contained in:
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="全网基准水平" name="first" :style="'height:' + vh + ';'">
|
||||
<Networklevel v-if="activeName == 'first'"></Networklevel>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="各渗透率光伏台区基准水平" name="second" :style="'height:' + vh + ';'">
|
||||
<Arealevel v-if="activeName == 'second'"></Arealevel>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Networklevel from './components/BaselineLevelAssessment/Networklevel.vue'
|
||||
import Arealevel from './components/BaselineLevelAssessment/Arealevel.vue'
|
||||
export default {
|
||||
name: 'pwjzsppg',
|
||||
components: { Networklevel, Arealevel },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
activeName: 'first',
|
||||
device: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
computed: {
|
||||
//计算表格高度
|
||||
// height(){
|
||||
// return '100vh'- this.$refs.form.offsetHeight +259;
|
||||
// }
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="告警统计" name="first" :style="'height:' + vh + ';'">
|
||||
<AlarmStatistics v-if="activeName == 'first'"></AlarmStatistics>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="告警明细查看" name="second" :style="'height:' + vh + ';'">
|
||||
<Alarmdetails v-if="activeName == 'second'"></Alarmdetails>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AlarmStatistics from './components/IndicatorAlarmStatistics/AlarmStatistics.vue'
|
||||
import Alarmdetails from './components/IndicatorAlarmStatistics/Alarmdetails.vue'
|
||||
export default {
|
||||
name: 'pwzbgjtj',
|
||||
components: { AlarmStatistics, Alarmdetails },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
activeName: 'first',
|
||||
device: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../styles/comStyle.less');
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row style="overflow-y: hidden">
|
||||
<el-col>
|
||||
<el-tabs
|
||||
:style="'height:' + vh1 + ';'"
|
||||
v-model.trim="activeName"
|
||||
@tab-click="handleClick"
|
||||
type="border-card"
|
||||
>
|
||||
<!-- 监测终端统计 -->
|
||||
<el-tab-pane
|
||||
label="监测点分类总览"
|
||||
name="first"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<Census v-if="activeName == 'first'"></Census>
|
||||
</el-tab-pane>
|
||||
<!-- 监测点统计 -->
|
||||
<el-tab-pane
|
||||
label="各单位分类总览"
|
||||
name="second"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<Census1 v-if="activeName == 'second'"></Census1>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Timslot from "./components/IndicatorClassification/Timeslot.vue";
|
||||
import Timslot1 from "./components/IndicatorClassification/Timeslot1.vue";
|
||||
import Census from "./components/IndicatorClassification/OverviewMonitor.vue";
|
||||
import Census1 from "./components/IndicatorClassification/OverviewClassification.vue";
|
||||
|
||||
export default {
|
||||
name:'pwzbflgl',
|
||||
components: { Timslot1, Timslot, Census, Census1 },
|
||||
data() {
|
||||
return {
|
||||
vh: "",
|
||||
vh1: "",
|
||||
activeName: "first",
|
||||
device: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio;
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 80 + "px";
|
||||
this.vh1 = window.sessionStorage.getItem("appheight") - 20 + "px";
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../styles/comStyle.less");
|
||||
</style>
|
||||
76
src/views/Distributionnetwork-analysis/StatisticalReport.vue
Normal file
76
src/views/Distributionnetwork-analysis/StatisticalReport.vue
Normal file
@@ -0,0 +1,76 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="暂态指标统计报表" name="second" :style="'height:' + vh + ';'">
|
||||
<Transient v-if="activeName == 'second'"></Transient>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="稳态指标统计报表" name="first" :style="'height:' + vh + ';'">
|
||||
<!-- v-if="id != '' ? true : false" -->
|
||||
<Steadystate ref="steadyState" :id="id"></Steadystate>
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane
|
||||
label="监测点分析报告"
|
||||
name="third"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<Analysisreport v-if="activeName=='third'"></Analysisreport>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Steadystate from './components/StatisticalReport/Steadystate.vue'
|
||||
import Transient from './components/StatisticalReport/Transient.vue'
|
||||
import Analysisreport from './components/StatisticalReport/Analysisreport.vue'
|
||||
export default {
|
||||
name: 'pwtjbb',
|
||||
components: { Steadystate, Transient, Analysisreport },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
activeName: 'second',
|
||||
device: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../styles/comStyle.less');
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
101
src/views/Distributionnetwork-analysis/SteadyStateIndicators.vue
Normal file
101
src/views/Distributionnetwork-analysis/SteadyStateIndicators.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
l
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model.trim="activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="稳态指标超标统计" name="first">
|
||||
<Total v-if="activeName == 'first'"></Total>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- <el-tab-pane label="稳态指标超标分类统计" name="second" >
|
||||
<Classification></Classification>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="稳态指标超标明细" name="third" >
|
||||
<Detailed></Detailed>
|
||||
</el-tab-pane> -->
|
||||
|
||||
<el-tab-pane label="稳态合格率统计" name="second">
|
||||
<PassRate v-if="activeName == 'second'"></PassRate>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="稳态指标历史趋势" name="third">
|
||||
<!-- v-if="id != '' ? true : false" -->
|
||||
<trend ref="trend" :id="id"></trend>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- <el-tab-pane label="稳态指标历史趋势" name="fifth" >
|
||||
<HistoricalTrends v-if="activeName=='fifth'"></HistoricalTrends>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Total from './components/SteadyStateIndicators/Total.vue'
|
||||
import PassRate from './components/SteadyStateIndicators/PassRate.vue'
|
||||
import trend from './components/SteadyStateIndicators/trend.vue'
|
||||
export default {
|
||||
name: 'pwwtzb',
|
||||
components: { Total, PassRate, trend },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
zoom: '',
|
||||
activeName: 'first',
|
||||
device: '',
|
||||
id: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
if (this.$route.params.id != undefined) {
|
||||
this.id = this.$route.params.id
|
||||
|
||||
if (this.id != '') {
|
||||
this.activeName = 'third'
|
||||
this.$nextTick(() => {
|
||||
// this.$refs.steadyState.getTemplateLists();
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 70 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../styles/comStyle.less');
|
||||
|
||||
// ::v-deep .el-table .cell {
|
||||
// text-align: center;
|
||||
// }
|
||||
// ::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
// padding: 10px;
|
||||
// }
|
||||
// ::v-deep .el-form-item--small .el-form-item__content,
|
||||
// .el-form-item--small .el-form-item__label {
|
||||
// height: 32px;
|
||||
// }
|
||||
// ::v-deep .el-form-item--small .el-form-item__content,
|
||||
// .el-form-item--small .el-form-item__label {
|
||||
// height: 32px;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
|
||||
<!-- 暂态事件统计 -->
|
||||
<el-tab-pane label="暂态事件统计" name="first" :style="'height:' + vh + ';'">
|
||||
<Incident v-if="activeName == 'first'"></Incident>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="暂态事件分布统计" name="second" :style="'height:' + vh + ';'">
|
||||
<Distribution v-if="activeName == 'second'"></Distribution>
|
||||
</el-tab-pane>
|
||||
<!-- 暂态事件明细 -->
|
||||
<el-tab-pane label="暂态事件明细" name="third" :style="'height:' + vh + ';'">
|
||||
<Definite v-if="activeName == 'third'"></Definite>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { tableheight } from "@/assets/commjs/common";
|
||||
import Incident from './components/TransientState/Incident.vue'
|
||||
import Distribution from './components/TransientState/Distribution.vue'
|
||||
import Definite from './components/TransientState/Definite.vue'
|
||||
export default {
|
||||
name: 'pwztzb',
|
||||
components: { Incident, Distribution, Definite },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
activeName: 'first' //区分是那个节点
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// if (tab.label == "暂态事件分布统计") {
|
||||
// this.echarts();
|
||||
// this.echarts2();
|
||||
// this.echarts4();
|
||||
// this.iticData();
|
||||
// this.semif();
|
||||
// this.echarts3();
|
||||
// }
|
||||
// this.onSubmit();
|
||||
// console.log(tab,event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,422 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval @time="time" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="台区:">
|
||||
<el-input
|
||||
v-model.trim="valuePlatformArea"
|
||||
placeholder="请输入台区"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="searchFn"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
ref="classification222"
|
||||
:data="
|
||||
arealevelData.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize
|
||||
)
|
||||
"
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderArealevel">
|
||||
<vxe-table-colgroup
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
align="center"
|
||||
min-width="200"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
align="center"
|
||||
min-width="90"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
align="center"
|
||||
min-width="90"
|
||||
>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwPermeabilityList } from "@/api/Distributionnetwork-analysis/BaselineLevelAssessment/BaselineLevelAssessment.js";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "./Timeslot.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
kai: true,
|
||||
start: "",
|
||||
end: "",
|
||||
vh: "",
|
||||
valuePlatformArea: "",
|
||||
height: null,
|
||||
isLoading: false,
|
||||
//台区水平评价表头
|
||||
tableHeaderArealevel: [
|
||||
{ prop: "orgName", label: "单位", width: 180 },
|
||||
{ prop: "psrName", label: "台区名称", width: 180 },
|
||||
{
|
||||
prop: "penetrationLevel",
|
||||
label: "分布式光伏台区渗透水平(0~25%)",
|
||||
children: [
|
||||
{
|
||||
prop: "zeroVoltage",
|
||||
label: "电压水平",
|
||||
children: [
|
||||
{ prop: "voltageAvg25", label: "平均值" },
|
||||
{ prop: "voltageSd25", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "zeroThreephase",
|
||||
label: "三相电压不平衡水平",
|
||||
width: 150,
|
||||
children: [
|
||||
{ prop: "unbalanceAvg25", label: "平均值" },
|
||||
{ prop: "unbalanceSd25", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "zeroHarmonic",
|
||||
label: "谐波水平",
|
||||
children: [
|
||||
{ prop: "vthdAvg25", label: "平均值" },
|
||||
{ prop: "vthdSd25", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "zeroFlicker",
|
||||
label: "长时闪变水平",
|
||||
children: [
|
||||
{ prop: "flickerAvg25", label: "平均值" },
|
||||
{ prop: "flickerSd25", label: "标准差" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "penetrationLevel",
|
||||
label: "分布式光伏台区渗透水平(25~50%)",
|
||||
children: [
|
||||
{
|
||||
prop: "quarterVoltage",
|
||||
label: "电压水平",
|
||||
children: [
|
||||
{ prop: "voltageAvg50", label: "平均值" },
|
||||
{ prop: "voltageSd50", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "quarterThreephase",
|
||||
label: "三相电压不平衡水平",
|
||||
width: 150,
|
||||
children: [
|
||||
{ prop: "unbalanceAvg50", label: "平均值" },
|
||||
{ prop: "unbalanceSd50", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "quarterHarmonic",
|
||||
label: "谐波水平",
|
||||
children: [
|
||||
{ prop: "vthdAvg50", label: "平均值" },
|
||||
{ prop: "vthdSd50", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "quarterFlicker",
|
||||
label: "长时闪变水平",
|
||||
children: [
|
||||
{ prop: "flickerAvg50", label: "平均值" },
|
||||
{ prop: "flickerSd50", label: "标准差" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "penetrationLevel",
|
||||
label: "分布式光伏台区渗透水平(50~75%)",
|
||||
children: [
|
||||
{
|
||||
prop: "ahalfVoltage",
|
||||
label: "电压水平",
|
||||
children: [
|
||||
{ prop: "voltageAvg75", label: "平均值" },
|
||||
{ prop: "voltageSd75", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "ahalfThreephase",
|
||||
label: "三相电压不平衡水平",
|
||||
width: 150,
|
||||
children: [
|
||||
{ prop: "unbalanceAvg75", label: "平均值" },
|
||||
{ prop: "unbalanceSd75", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "ahalfHarmonic",
|
||||
label: "谐波水平",
|
||||
children: [
|
||||
{ prop: "vthdAvg75", label: "平均值" },
|
||||
{ prop: "vthdSd75", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "ahalfFlicker",
|
||||
label: "长时闪变水平",
|
||||
children: [
|
||||
{ prop: "flickerAvg75", label: "平均值" },
|
||||
{ prop: "flickerSd75", label: "标准差" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "penetrationLevel",
|
||||
label: "分布式光伏台区渗透水平(75~100%)",
|
||||
children: [
|
||||
{
|
||||
prop: "threeFourthsVoltage",
|
||||
label: "电压水平",
|
||||
children: [
|
||||
{ prop: "voltageAvg99", label: "平均值" },
|
||||
{ prop: "voltageSd99", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "threeFourthsThreephase",
|
||||
label: "三相电压不平衡水平",
|
||||
width: 150,
|
||||
children: [
|
||||
{ prop: "unbalanceAvg99", label: "平均值" },
|
||||
{ prop: "unbalanceSd99", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "threeFourthsHarmonic",
|
||||
label: "谐波水平",
|
||||
children: [
|
||||
{ prop: "vthdAvg99", label: "平均值" },
|
||||
{ prop: "vthdSd99", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "threeFourthsFlicker",
|
||||
label: "长时闪变水平",
|
||||
children: [
|
||||
{ prop: "flickerAvg99", label: "平均值" },
|
||||
{ prop: "flickerSd99", label: "标准差" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "penetrationLevel",
|
||||
label: "分布式光伏台区渗透水平(100%)",
|
||||
children: [
|
||||
{
|
||||
prop: "hundredVoltage",
|
||||
label: "电压水平",
|
||||
children: [
|
||||
{ prop: "voltageAvg100", label: "平均值" },
|
||||
{ prop: "voltageSd100", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "hundredThreephase",
|
||||
label: "三相电压不平衡水平",
|
||||
width: 150,
|
||||
children: [
|
||||
{ prop: "unbalanceAvg100", label: "平均值" },
|
||||
{ prop: "unbalanceSd100", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "hundredHarmonic",
|
||||
label: "谐波水平",
|
||||
children: [
|
||||
{ prop: "vthdAvg100", label: "平均值" },
|
||||
{ prop: "vthdSd100", label: "标准差" },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "hundredFlicker",
|
||||
label: "长时闪变水平",
|
||||
children: [
|
||||
{ prop: "flickerAvg100", label: "平均值" },
|
||||
{ prop: "flickerSd100", label: "标准差" },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
arealevelData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: 20, // 总条数
|
||||
pageSize: 18, // 每页的数据条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.arealevel();
|
||||
// this.dictionaries();
|
||||
},
|
||||
mounted() {
|
||||
(this.$refs.interval.timeOptions = [
|
||||
// { label: "年份", value: 1 },
|
||||
// { label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]),
|
||||
(this.device = window.devicePixelRatio);
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.height = window.sessionStorage.getItem("appheight") - 170;
|
||||
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification222.exportData({
|
||||
filename: "export1", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.arealevelData.slice(
|
||||
(this.currentPage - 1) * this.pageSize,
|
||||
this.currentPage * this.pageSize
|
||||
), // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
time(val) {
|
||||
this.start = val[0];
|
||||
this.end = val[1];
|
||||
this.type = val[2];
|
||||
if (this.kai) {
|
||||
this.arealevel();
|
||||
}
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
},
|
||||
//获取数据
|
||||
arealevel() {
|
||||
this.isLoading = true;
|
||||
getPwPermeabilityList({
|
||||
type: 1,
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
endTime: this.end,
|
||||
startTime: this.start,
|
||||
id: this.id,
|
||||
psrName: this.valuePlatformArea.toString(),
|
||||
}).then((res) => {
|
||||
if (res.code == "A0001") {
|
||||
this.isLoading = false;
|
||||
this.total = 0;
|
||||
this.arealevelData = [];
|
||||
} else {
|
||||
this.isLoading = false;
|
||||
this.total = res.data.total;
|
||||
this.arealevelData = res.data.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.arealevel();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.arealevel();
|
||||
},
|
||||
//查询
|
||||
searchFn() {
|
||||
this.arealevel();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
// ::v-deep .el-form-item--small.el-form-item {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model.trim="valueLevel"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 225px"
|
||||
collapse-tags
|
||||
>
|
||||
<el-option
|
||||
v-for="item in level"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval @time="time"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="searchFn"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
stripe
|
||||
:data="
|
||||
networklevelData.slice(
|
||||
(currentPage - 1) * pageSize,
|
||||
currentPage * pageSize
|
||||
)
|
||||
"
|
||||
:height="height"
|
||||
ref="classification111"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderNetworklevel">
|
||||
<vxe-table-colgroup
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
align="center"
|
||||
>
|
||||
<template v-for="(val, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="val.prop"
|
||||
:title="val.label"
|
||||
:min-width="val.width"
|
||||
:key="index"
|
||||
></vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRMpBenchmarkLevelList } from "@/api/Distributionnetwork-analysis/BaselineLevelAssessment/BaselineLevelAssessment.js";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "./Timeslot.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
kai: true,
|
||||
start: "",
|
||||
end: "",
|
||||
vh: "",
|
||||
valueLevel: [],
|
||||
height: null,
|
||||
isLoading: false,
|
||||
//电压等级数据
|
||||
level: [],
|
||||
//全网水平评价表头
|
||||
tableHeaderNetworklevel: [
|
||||
{ prop: "orgName", label: "单位", width: 160 },
|
||||
{ prop: "voltageLevel", label: "电压等级(kV)", width: 120 },
|
||||
{
|
||||
prop: "voltage",
|
||||
label: "电压",
|
||||
children: [
|
||||
{ prop: "voltageAvg", label: "均值(V)", width: 100 },
|
||||
{ prop: "vthdSd", label: "标准差(V)", width: 100 },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "threePhase",
|
||||
label: "三相不平衡度",
|
||||
children: [
|
||||
{ prop: "unbalanceAvg", label: "均值(%)", width: 100 },
|
||||
{ prop: "unbalanceSd", label: "标准差(%)", width: 100 },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "harmonic ",
|
||||
label: "电压总谐波畸变率()",
|
||||
children: [
|
||||
{ prop: "vthdAvg", label: "均值(%)", width: 100 },
|
||||
{ prop: "vthdSd", label: "标准差(%)", width: 100 },
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "longTime ",
|
||||
label: "长时闪变",
|
||||
children: [
|
||||
{ prop: "flickerAvg", label: "均值", width: 100 },
|
||||
{ prop: "flickerSd", label: "标准差", width: 100 },
|
||||
],
|
||||
},
|
||||
],
|
||||
networklevelData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: 20, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.dictionaries();
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.level,'uiuiui')
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.height = window.sessionStorage.getItem("appheight") - 170;
|
||||
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification111.exportData({
|
||||
filename: "export1", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.networklevelData.slice(
|
||||
(this.currentPage - 1) * this.pageSize,
|
||||
this.currentPage * this.pageSize
|
||||
),
|
||||
});
|
||||
},
|
||||
time(val) {
|
||||
this.start = val[0];
|
||||
this.end = val[1];
|
||||
this.type = val[2];
|
||||
if (this.kai) {
|
||||
this.networklevel();
|
||||
}
|
||||
},
|
||||
//获取电压等级
|
||||
getclassificationData() {
|
||||
// debugger
|
||||
var code = "Dev_Voltage";
|
||||
this.classificationData = dicData(code, ["Load_Type"]);
|
||||
this.level = this.classificationData;
|
||||
this.level.forEach((i) => {
|
||||
this.valueLevel.push(i.id);
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id;
|
||||
},
|
||||
|
||||
//获取数据
|
||||
networklevel() {
|
||||
this.kai = false;
|
||||
this.isLoading = true;
|
||||
getPwRMpBenchmarkLevelList({
|
||||
type: this.type,
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
endTime: this.end,
|
||||
startTime: this.start,
|
||||
id: this.id,
|
||||
voltageLevel: this.valueLevel.toString(),
|
||||
}).then((res) => {
|
||||
if (res.code == "A0001") {
|
||||
this.isLoading = false;
|
||||
this.networklevelData = [];
|
||||
this.total = 0;
|
||||
} else {
|
||||
this.total = res.data.total;
|
||||
res.data.records.forEach((e) => {
|
||||
this.classificationData.forEach((i) => {
|
||||
if (e.voltageLevel == i.id) {
|
||||
e.voltageLevel = i.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.isLoading = false;
|
||||
this.networklevelData = res.data.records;
|
||||
}
|
||||
});
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.networklevel();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.networklevel();
|
||||
},
|
||||
//查询
|
||||
searchFn() {
|
||||
this.networklevel();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
</style>
|
||||
@@ -0,0 +1,792 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
|
||||
<el-form-item label="时间间隔:">
|
||||
<el-select
|
||||
style="width: 90px; "
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
style="width: 230px;"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
></el-button>
|
||||
<el-button @click="nowTime" icon="el-icon-video-pause" type="primary"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ruleForm:{},
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald:3,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.$emit("time",[startTime,endTime,val] );
|
||||
// console.log(val,'val')
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model.trim="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane
|
||||
label="区域告警管理"
|
||||
name="first"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<Regionalalarm v-if="activeName == 'first'"></Regionalalarm>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="监测点告警管理"
|
||||
name="second"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<MonitoringpointAlarm
|
||||
v-if="activeName == 'second'"
|
||||
></MonitoringpointAlarm>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane
|
||||
label="告警统计"
|
||||
name="third"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<AlarmStatistics v-if="activeName == 'third'"></AlarmStatistics>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Regionalalarm from "./AlarmStatistics/Regionalalarm.vue";
|
||||
import MonitoringpointAlarm from "./AlarmStatistics/MonitoringpointAlarm.vue";
|
||||
import AlarmStatistics from "./AlarmStatistics/AlarmStatistics.vue";
|
||||
export default {
|
||||
components: { Regionalalarm, MonitoringpointAlarm, AlarmStatistics },
|
||||
data() {
|
||||
return {
|
||||
vh: "",
|
||||
activeName: "first",
|
||||
device: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 135 + "px";
|
||||
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,140 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="4" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="researchFn">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
stripe
|
||||
:data="alarmStatisticsData"
|
||||
:height="height"
|
||||
ref="classification33"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<vxe-table-colgroup
|
||||
title="单位"
|
||||
align="center"
|
||||
field="orgName"
|
||||
min-width="150"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="在线监测点数(个)"
|
||||
align="center"
|
||||
min-width="150"
|
||||
field="onlineMonitorCount"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="告警监测点数(个)"
|
||||
align="center"
|
||||
min-width="150"
|
||||
field="alarmMonitorCount"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="告警监测点占比(%)"
|
||||
align="center"
|
||||
min-width="150"
|
||||
field="alarmMonitorRate"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="告警监测点占比同比(%)"
|
||||
align="center"
|
||||
min-width="150"
|
||||
field="alarmMonitorRateYoy"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import { getAllRStatPwAlarmCountList } from '@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
kai: true,
|
||||
start: '',
|
||||
end: '',
|
||||
vh: '',
|
||||
height: null,
|
||||
isLoading: false,
|
||||
|
||||
alarmStatisticsData: [],
|
||||
device: '',
|
||||
timeOptions: [{ label: '周', value: 4 }]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.alarmStatistics()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification33.exportData({
|
||||
filename: 'export1', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.alarmStatisticsData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
},
|
||||
|
||||
//获取数据
|
||||
alarmStatistics() {
|
||||
this.isLoading = true
|
||||
getAllRStatPwAlarmCountList({
|
||||
endTime: this.$refs.Timeinterval.timeValue[1],
|
||||
startTime: this.$refs.Timeinterval.timeValue[0],
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.isLoading = false
|
||||
this.alarmStatisticsData = res.data
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id
|
||||
},
|
||||
//查询
|
||||
researchFn() {
|
||||
this.alarmStatistics()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,402 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" @time="time" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select v-model="receiveUserId" clearable placeholder="请选择接监测点类别">
|
||||
<el-option
|
||||
v-for="item in ImplementationPeople"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="researchFn">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
stripe
|
||||
ref="classification22"
|
||||
:data="monitoringpointAlarmData"
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<vxe-table-colgroup
|
||||
title="所属单位"
|
||||
field="orgName"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="200"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="所属变电站"
|
||||
field="powerName"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="100"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="所属台区"
|
||||
field="powerDistributionAreaName"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="100"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="用户名称"
|
||||
field="powerClientName"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="100"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="监测点类别"
|
||||
field="monitorSort"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="120"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="监测点电压等级"
|
||||
field="voltageLevel"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="150"
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="稳态指标告警情况" align="center" show-overflow>
|
||||
<vxe-table-colgroup title="电压偏差" align="center" show-overflow>
|
||||
<vxe-table-colgroup title="告警情况" min-width="90" align="center" show-overflow>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.vdevAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="vdevSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="频率偏差" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="90"
|
||||
field="freqAlarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.freqAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="freqSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="三相电压不平衡度" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="90"
|
||||
field="unbalanceAlarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.unbalanceAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="unbalanceSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="谐波电压" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="90"
|
||||
field="valarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.valarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="vseverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="长时闪变" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="90"
|
||||
field="flickerAlarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.flickerAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="flickerSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="暂态指标告警情况" align="center" show-overflow>
|
||||
<vxe-table-colgroup title="电压暂降" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
field="sagAlarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sagAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="sagSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="短时中断" align="center" show-overflow>
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
field="interruptAlarmInfo"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="90"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.interruptAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="严重度"
|
||||
min-width="90"
|
||||
field="interruptSeverity"
|
||||
align="center"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="稳态指标评级结果"
|
||||
field="harmonicTypeGrade"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.harmonicTypeGrade == 0
|
||||
? '较差 '
|
||||
: scope.row.harmonicTypeGrade == 1
|
||||
? '中等'
|
||||
: '较好'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="暂态指标评级结果"
|
||||
field="eventTypeGrade"
|
||||
align="center"
|
||||
show-overflow
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.eventTypeGrade == 0
|
||||
? '较差 '
|
||||
: scope.row.eventTypeGrade == 1
|
||||
? '中等'
|
||||
: '较好'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 50, 100]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Timeinterval from './Timeslot.vue'
|
||||
import { getPwRMpMonitorAlarmCountMList } from '@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
kai: true,
|
||||
receiveUserId: '',
|
||||
start: '',
|
||||
end: '',
|
||||
vh: '',
|
||||
height: null,
|
||||
isLoading: false,
|
||||
valuePoint: '',
|
||||
formData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
total: undefined,
|
||||
monitoringpointAlarmData: [],
|
||||
ImplementationPeople: [],
|
||||
device: '',
|
||||
typeList: '',
|
||||
timeOptions: [{ label: '月份', value: 3 }]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.height = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点类别
|
||||
this.ImplementationPeople = dicData('Line_Sort', [])
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification22.exportData({
|
||||
filename: 'export1', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.monitoringpointAlarmData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
},
|
||||
time(val) {
|
||||
;(this.start = val[0]), (this.end = val[1])
|
||||
this.type = val[2]
|
||||
if (this.kai) {
|
||||
this.monitoringpointAlarm()
|
||||
}
|
||||
},
|
||||
//获取数据
|
||||
monitoringpointAlarm() {
|
||||
this.isLoading = true
|
||||
getPwRMpMonitorAlarmCountMList({
|
||||
endTime: this.end,
|
||||
startTime: this.start,
|
||||
id: this.id,
|
||||
pageNum: this.formData.pageNum,
|
||||
pageSize: this.formData.pageSize,
|
||||
measurementPointName: this.receiveUserId
|
||||
}).then(res => {
|
||||
this.isLoading = false
|
||||
var code = 'Line_Sort'
|
||||
this.typeList = dicData(code, [])
|
||||
let a = dicData('Dev_Voltage', [])
|
||||
// console.log(res.data,'RES.DATA',this.typeList,'typrlist')
|
||||
res.data.records.forEach(i => {
|
||||
i.monitorSort
|
||||
this.typeList.forEach(l => {
|
||||
if (l.id == i.monitorSort) {
|
||||
i.monitorSort = l.label
|
||||
}
|
||||
})
|
||||
a.forEach(g => {
|
||||
if (g.id == i.voltageLevel) {
|
||||
i.voltageLevel = g.label
|
||||
}
|
||||
})
|
||||
})
|
||||
this.monitoringpointAlarmData = res.data.records
|
||||
this.total = res.data.total
|
||||
})
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.monitoringpointAlarm()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.monitoringpointAlarm()
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id
|
||||
},
|
||||
//查询
|
||||
researchFn() {
|
||||
this.monitoringpointAlarm()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,262 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" @time="time" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="researchFn">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
stripe
|
||||
ref="classification1"
|
||||
:data="alarmStatisticsData"
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<vxe-table-colgroup
|
||||
title="单位"
|
||||
field="orgName"
|
||||
align="center"
|
||||
min-width="150"
|
||||
show-overflow
|
||||
></vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="稳态指标告警情况" align="center">
|
||||
<vxe-table-colgroup title="电压偏差" min-width="120" align="center">
|
||||
<vxe-table-colgroup title="告警情况" min-width="120" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.vdevAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="超标占比(%)"
|
||||
min-width="120"
|
||||
field="vdevAlarmRatio"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="频率偏差" align="center">
|
||||
<vxe-table-colgroup title="告警情况" min-width="120" field="freqAlarmInfo" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.freqAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="超标占比(%)"
|
||||
min-width="120"
|
||||
field="freqAlarmRatio"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="三相电压不平衡度" align="center">
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="120"
|
||||
field="unbalanceAlarmInfo"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.unbalanceAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="超标占比(%)"
|
||||
min-width="120"
|
||||
field="unbalanceAlarmRatio"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="谐波电压" align="center">
|
||||
<vxe-table-colgroup title="告警情况" min-width="120" field="valarmInfo" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.valarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="超标占比(%)"
|
||||
min-width="120"
|
||||
field="valarmRatio"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="长时闪变" align="center">
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
min-width="120"
|
||||
field="flickerAlarmInfo"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.flickerAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="超标占比(%)"
|
||||
min-width="120"
|
||||
field="flickerAlarmRatio"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="暂态指标告警情况" align="center">
|
||||
<vxe-table-colgroup title="电压暂降" align="center">
|
||||
<vxe-table-colgroup title="告警情况" field="sagAlarmInfo" align="center" min-width="130">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.sagAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="平均发生次数"
|
||||
min-width="120"
|
||||
field="sagAlarmAvgCount"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="短时中断" align="center">
|
||||
<vxe-table-colgroup
|
||||
title="告警情况"
|
||||
field="interruptAlarmInfo"
|
||||
align="center"
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.interruptAlarmInfo == 0 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="平均发生次数"
|
||||
min-width="120"
|
||||
field="interruptAlarmAvgCount"
|
||||
align="center"
|
||||
></vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup
|
||||
title="稳态指标评级结果"
|
||||
field="harmonicTypeGrade"
|
||||
align="center"
|
||||
min-width="160"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.harmonicTypeGrade == 0
|
||||
? '较差 '
|
||||
: scope.row.harmonicTypeGrade == 1
|
||||
? '中等'
|
||||
: '较好'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
<vxe-table-colgroup title="暂态指标评级结果" field="eventTypeGrade" align="center" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{
|
||||
scope.row.eventTypeGrade == 0
|
||||
? '较差 '
|
||||
: scope.row.eventTypeGrade == 1
|
||||
? '中等'
|
||||
: '较好'
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from './Timeslot.vue'
|
||||
import { getPwAllRStatAreaAlarmCountMList } from '@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
|
||||
kai: true,
|
||||
start: '',
|
||||
end: '',
|
||||
vh: '',
|
||||
height: null,
|
||||
isLoading: false,
|
||||
alarmStatisticsData: [],
|
||||
device: '',
|
||||
timeOptions: [{ label: '月份', value: 3 }]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification1.exportData({
|
||||
filename: 'export1', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.alarmStatisticsData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
},
|
||||
time(val) {
|
||||
;(this.start = val[0]), (this.end = val[1])
|
||||
this.type = val[2]
|
||||
if (this.kai) {
|
||||
this.alarmStatistics()
|
||||
}
|
||||
},
|
||||
//获取数据
|
||||
alarmStatistics() {
|
||||
this.kai = false
|
||||
this.isLoading = true
|
||||
getPwAllRStatAreaAlarmCountMList({
|
||||
endTime: this.end,
|
||||
startTime: this.start,
|
||||
id: this.id
|
||||
}).then(res => {
|
||||
this.isLoading = false
|
||||
this.alarmStatisticsData = res.data
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id
|
||||
},
|
||||
//查询
|
||||
researchFn() {
|
||||
this.alarmStatistics()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,793 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="ruleForm" class="demo-form-inline">
|
||||
<el-form-item label="时间间隔:">
|
||||
<el-select
|
||||
style="width: 90px;"
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
style="width: 230px;"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
></el-button>
|
||||
<el-button @click="nowTime" type="primary" icon="el-icon-video-pause"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
|
||||
></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
ruleForm:{},
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald:3,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.$emit("time",[startTime,endTime,val] );
|
||||
// console.log(val,'val')
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,356 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval @time="time" ></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="alarmdetails"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="dc"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle"
|
||||
>条件筛选<i
|
||||
:class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
|
||||
></i
|
||||
></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" label-width="110px">
|
||||
<el-form-item label="告警类型:" class="box1">
|
||||
<el-select
|
||||
v-model.trim="form.alarmType"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
>
|
||||
<el-option
|
||||
v-for="item in notify"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点类别:" class="box1">
|
||||
<el-select
|
||||
v-model="form.monitorSort"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点:" class="box">
|
||||
<el-input
|
||||
v-model.trim="form.valuePoint"
|
||||
placeholder="请输入"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
stripe
|
||||
ref="classification7"
|
||||
:data="alarmdetailsData"
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellstyle"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderAlarmdetails">
|
||||
<vxe-table-colgroup
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
show-overflow
|
||||
align="center"
|
||||
>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="alarmdetailsData.length"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "./AlarmStatistics/Timeslot.vue";
|
||||
import { getAlarmDetailList } from "@/api/Distributionnetwork-analysis/IndicatorAlarmStatistics/IndicatorAlarmStatistics";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
id: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
kai: true,
|
||||
start: "",
|
||||
end: "",
|
||||
vh: "",
|
||||
height: null,
|
||||
isLoading: false,
|
||||
view:false,
|
||||
form: {
|
||||
alarmType: "", //告警类型
|
||||
monitorSort: "", //监测点类别
|
||||
valuePoint: "", //监测点
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
|
||||
//告警类型
|
||||
notify: [],
|
||||
|
||||
tableHeaderAlarmdetails: [
|
||||
{ prop: "orgName", label: "单位", width: 160 },
|
||||
{ prop: "powerName", label: "所属变电站", width: 100 },
|
||||
{ prop: "powerDistributionAreaName", label: "所属台区", width: 100 },
|
||||
{ prop: "powerClientName", label: "用户名称", width: 100 },
|
||||
{ prop: "measurementPointName", label: "监测点名称", width: 100 },
|
||||
{ prop: "dataDate", label: "时间", width: 100 },
|
||||
{ prop: "alarmInfo", label: "告警描述", width: 100 },
|
||||
{ prop: "alarmType", label: "告警类型", width: 100 },
|
||||
{ prop: "voltageLevel", label: "监测点电压等级(kV)", width: 140 },
|
||||
{ prop: "monitorSort", label: "监测点类别", width: 100 },
|
||||
],
|
||||
alarmdetailsData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: 0, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
fvh: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.height = window.sessionStorage.getItem("appheight") - 170;
|
||||
|
||||
},
|
||||
dc() {
|
||||
this.$refs.classification7.exportData({
|
||||
filename: "export1", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
isFooter: true,
|
||||
data: this.alarmdetailsData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
time(val) {
|
||||
(this.start = val[0]), (this.end = val[1]);
|
||||
this.type = val[2];
|
||||
if (this.kai) {
|
||||
this.alarmdetails();
|
||||
}
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点类别
|
||||
var code = "Line_Sort";
|
||||
this.typeList = dicData(code, []);
|
||||
//告警类型
|
||||
var code1 = "alarm_Type";
|
||||
this.notify = dicData(code1, []);
|
||||
},
|
||||
|
||||
//获取主网运行指标统计数据
|
||||
alarmdetails() {
|
||||
this.isLoading = true;
|
||||
getAlarmDetailList({
|
||||
pageNum: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
alarmType: this.form.alarmType.toString(),
|
||||
endTime: this.end,
|
||||
startTime: this.start,
|
||||
id: this.id,
|
||||
monitorName: this.form.valuePoint,
|
||||
monitorSort: this.form.monitorSort.toString(),
|
||||
}).then((res) => {
|
||||
this.total = res.data.total;
|
||||
let a = dicData("Dev_Voltage", []);
|
||||
// console.log(this.notify,'ppoop')
|
||||
res.data.records.forEach((i) => {
|
||||
this.notify.forEach((l) => {
|
||||
if (l.id == i.alarmType) {
|
||||
i.alarmType = l.label;
|
||||
}
|
||||
});
|
||||
this.typeList.forEach((l) => {
|
||||
if (l.id == i.monitorSort) {
|
||||
i.monitorSort = l.label;
|
||||
}
|
||||
});
|
||||
a.forEach((l) => {
|
||||
if (l.id == i.voltageLevel) {
|
||||
i.voltageLevel = l.label;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
this.isLoading = false;
|
||||
this.alarmdetailsData = res.data.records;
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
this.id = data.id;
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.alarmdetails();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.alarmdetails();
|
||||
},
|
||||
closeHandle() {
|
||||
if (this.view) {
|
||||
this.view = false;
|
||||
} else {
|
||||
this.view = 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";
|
||||
}
|
||||
},
|
||||
cellstyle(row) {
|
||||
// console.log(row);
|
||||
if (
|
||||
row.row.monitoringPoint == "Ⅱ类监测点" ||
|
||||
row.row.monitoringPoint == "Ⅲ类监测点"
|
||||
) {
|
||||
row.row.substation = "/";
|
||||
}
|
||||
if (
|
||||
row.row.monitoringPoint == "Ⅰ类监测点" ||
|
||||
row.row.monitoringPoint == "Ⅲ类监测点"
|
||||
) {
|
||||
row.row.stationArea = "/";
|
||||
}
|
||||
if (
|
||||
row.row.monitoringPoint == "Ⅰ类监测点" ||
|
||||
row.row.monitoringPoint == "Ⅱ类监测点"
|
||||
) {
|
||||
row.row.userName = "/";
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,793 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="时间间隔:">
|
||||
<el-select
|
||||
style="width: 90px;"
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-date-picker
|
||||
style="width: 230px;"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
|
||||
></el-button>
|
||||
<el-button @click="nowTime" type="primary" icon="el-icon-video-pause"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
|
||||
></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald:3,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.$emit("time",[startTime,endTime,val] );
|
||||
// console.log(val,'val')
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.$emit("time",[startTime,endTime,this.intervald] );
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<div >
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<!-- 时间段 -->
|
||||
<el-form-item label="时间段:">
|
||||
<el-select v-model="intervald" @change="interchange" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- 时间 -->
|
||||
<el-form-item>
|
||||
<template style="display: inline;" v-if="buttonShow">
|
||||
<el-button :disabled="backDisabled" type="primary" icon="el-icon-d-arrow-left" @click="preClick"></el-button>
|
||||
<el-date-picker
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
@click="nowTime"
|
||||
align="right">
|
||||
</el-date-picker>
|
||||
<!-- <el-button @click="nowTime" type="primary">当前</el-button> -->
|
||||
<el-button :disabled="preDisabled" type="primary" icon="el-icon-d-arrow-right" @click="back" ></el-button>
|
||||
</template>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 查询导出 -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download">导出</el-button>
|
||||
</el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "TimeSlot",
|
||||
props:{
|
||||
name:{
|
||||
type:String,
|
||||
default:undefined
|
||||
},
|
||||
path:{
|
||||
type:String,
|
||||
default:undefined
|
||||
},
|
||||
tablename:{
|
||||
type:String,
|
||||
default:undefined
|
||||
},
|
||||
interval:{
|
||||
type:Number,
|
||||
default:undefined
|
||||
},
|
||||
type:{
|
||||
type:Number,
|
||||
default:undefined
|
||||
},
|
||||
falg:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
thb:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
interval(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.interval, endTime)
|
||||
this.timeValue = [startTime, endTime]
|
||||
this.pickDisabled = false
|
||||
this.buttonShow = true
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.interval, endTime)
|
||||
this.timeValue = [startTime, endTime]
|
||||
this.buttonShow = false
|
||||
this.pickDisabled = false
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '电铁'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '换流站'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '风电'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '光伏'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '其他非线性负荷'
|
||||
},
|
||||
{
|
||||
value: '选项6',
|
||||
label: '敏感重要高危用户'
|
||||
},
|
||||
{
|
||||
value: '选项7',
|
||||
label: '变电站'
|
||||
}, {
|
||||
value: '选项8',
|
||||
label: '跨省关口'
|
||||
},
|
||||
{
|
||||
value: '选项9',
|
||||
label: '其他'
|
||||
},
|
||||
],
|
||||
value: '',
|
||||
|
||||
options1: [{
|
||||
value: '选项1',
|
||||
label: '频率偏差'
|
||||
}, {
|
||||
value: '选项2',
|
||||
label: '电压偏差'
|
||||
}, {
|
||||
value: '选项3',
|
||||
label: '闪变'
|
||||
}, {
|
||||
value: '选项4',
|
||||
label: '谐波电压'
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '谐波电流'
|
||||
},
|
||||
{
|
||||
value: '选项6',
|
||||
label: '间谐波电压'
|
||||
},{
|
||||
value: '选项7',
|
||||
label: '三相电压不平衡度'
|
||||
},{
|
||||
value: '选项8',
|
||||
label: '负序电流'
|
||||
},
|
||||
{
|
||||
value: '选项7',
|
||||
label: '总稳态指标'
|
||||
},
|
||||
],
|
||||
value1: '',
|
||||
disabled:true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false,//时间组件只读控制se,
|
||||
// falg1:true,
|
||||
timeOptions: [
|
||||
{label: '年份', value: 1},
|
||||
{label: '季度', value: 2},
|
||||
{label: '月份', value: 3},
|
||||
{label: '周', value: 4},
|
||||
{label: '自定义', value: 5},
|
||||
// {label: '半年', value: 6},
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [ {
|
||||
text: '今日',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一周',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近一个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}, {
|
||||
text: '最近三个月',
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit('pick', [start, end]);
|
||||
}
|
||||
}]
|
||||
},
|
||||
intervald:this.interval,
|
||||
// tablenamed:this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue:[],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
// huanbibiFalg:false,
|
||||
// tonbiFalg:false
|
||||
};
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
mounted(){
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.interval, endTime)
|
||||
this.timeValue = [startTime, endTime]
|
||||
if(this.type==2){
|
||||
this.huangbiyear()
|
||||
}else if(!this.type){
|
||||
// this.querfromdata()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val){
|
||||
this.interval = val
|
||||
if(val==5){
|
||||
// this.tablenamed == 'tab1'
|
||||
this.disabled = false
|
||||
|
||||
}else{
|
||||
// this.tablenamed == 'tab2'
|
||||
this.disabled = true
|
||||
}
|
||||
},
|
||||
// 获取当前日期,精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if (month > 0 & month < 4) {// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {// 第四季度
|
||||
month = '10';
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = (start.getDay() == 0) ? 7 : start.getDay(); // 如果为周日,则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1);// 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) { // 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
//获取一个月有几天
|
||||
getDays(year, month) {
|
||||
let days = [31,28,31,30,31,30,31,31,30,31,30,31]
|
||||
if ( (year % 4 ===0) && (year % 100 !==0 || year % 400 ===0) ) {
|
||||
days[1] = 29
|
||||
}
|
||||
return days[month-1]
|
||||
},
|
||||
// 获取月份的天数
|
||||
// getDays(year, month) {
|
||||
// let max = new Date(year, month, 0).getDate();
|
||||
// return max;
|
||||
// },
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return time.getFullYear() + '-' + ((time.getMonth() + 1) < 10 ? '0' : '') + (time.getMonth() + 1) + '-' + (time.getDate() < 10 ? '0' : '') + time.getDate();
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.interval
|
||||
let startTime = this.timeValue[0]
|
||||
let endTime = this.timeValue[1]
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime]
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.interval
|
||||
let startTime = this.timeValue[0]
|
||||
let endTime = this.timeValue[1]
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear()
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate()
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后,大于当前的年份,是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后,等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后,依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份,是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后,超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月,以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if(month>=presentM){
|
||||
endTime =getEndTime();;
|
||||
}else{
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
|
||||
} else if(interval == 4){
|
||||
//根据开始时间推
|
||||
var start = new Date(year,month - 1,date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if(parseInt((end - new Date()) / 1000 / 60) > 24){ //相差小时大于24小时,即超过当天,置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
}else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份,是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
this.timeValue = [startTime, endTime]
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.interval
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime]
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true
|
||||
} else {
|
||||
this.preDisabled = false
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" :style="'height:' + vh + ';'">
|
||||
<el-tab-pane label="监测点报告" name="first">
|
||||
<MonitoringpointReport></MonitoringpointReport>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="区域报告" name="second">
|
||||
<Region />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MonitoringpointReport from '@/views/Distributionnetwork-analysis/components/StatisticalReport/Analysisreport/MonitoringpointReport.vue'
|
||||
import Region from '@/views/Distributionnetwork-analysis/components/StatisticalReport/Analysisreport/Region.vue'
|
||||
export default {
|
||||
components: { MonitoringpointReport, Region },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
#pane-first {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.block {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<div class="Inspection">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="监测点:">
|
||||
<el-input v-model.trim="form.a" placeholder="请输入" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col class="left" :style="'height:' + vh + ';'" :span="5"><Tree ref="tree" /></el-col>
|
||||
<el-col :span="19">
|
||||
<el-tabs v-model.trim="form.activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="非谐波" name="1" v-loading="loading"><Tab :list="list" /></el-tab-pane>
|
||||
<el-tab-pane label="谐波电压" name="2" v-loading="loading"><Tab :list="list" /></el-tab-pane>
|
||||
<el-tab-pane label="谐波电流" name="3" v-loading="loading"><Tab :list="list" /></el-tab-pane>
|
||||
<el-tab-pane label="合格率" name="4" v-loading="loading"><Tab :list="list" /></el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Tree from './tree.vue'
|
||||
import Tab from './tab.vue'
|
||||
import { MonitoringPoint } from '@/api/MonitoringPoint.js'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from '../../../../components/Timeinterval.vue'
|
||||
// import { dictypeData } from "@/api/user";
|
||||
export default {
|
||||
components: { Tree, Tab, Area, Timeinterval },
|
||||
props: {},
|
||||
name: 'InspectionPoint',
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
list: [],
|
||||
loading: true,
|
||||
form: {
|
||||
monitor: '', // 所属单位
|
||||
company: '', //监测点
|
||||
time: '', // 统计日期
|
||||
id: '', //树选中的id
|
||||
activeName: '1' //区分是那个节点
|
||||
},
|
||||
//所属单位数据数据
|
||||
|
||||
CompanyList: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// this.dictionaries()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 195 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
this.onSubmit()
|
||||
},
|
||||
// 字典表
|
||||
// dictionaries() {
|
||||
// dictypeData().then(res => {
|
||||
// res.data.forEach(item => {
|
||||
// if (item.name == "单位") {
|
||||
// this.CompanyList = item.children;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
this.form.id = this.$refs['tree'].id
|
||||
MonitoringPoint(this.form).then(res => {
|
||||
this.list = res.data
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
vhs() {
|
||||
return this.vh - 800
|
||||
}
|
||||
},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.Inspection {
|
||||
.left {
|
||||
padding: 10px 0;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #000;
|
||||
}
|
||||
}
|
||||
// ::v-deep .el-form-item {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,249 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-circle-plus-outline"
|
||||
>导出</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="list.data"
|
||||
:height="vh"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderNetwork">
|
||||
<el-table-column
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<el-table-column
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="list.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { RegionalReports } from "@/api/MonitoringPoint.js";
|
||||
// import { dictypeData } from "@/api/user";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "../../../../components/Timeinterval.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
company: "", //所属单位
|
||||
time: "", //时间
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
vh: undefined,
|
||||
isLoading: false,
|
||||
//全网水平评价表头
|
||||
tableHeaderNetwork: [
|
||||
{ prop: "company", label: "单位" },
|
||||
{ prop: "monitoringPoint", label: "监测点总数", width: "100" },
|
||||
{
|
||||
prop: "",
|
||||
label: "当月",
|
||||
children: [
|
||||
{ prop: "monthMonitor", label: "在线监测点", width: "100px" },
|
||||
{
|
||||
prop: "monthTransientMonitor",
|
||||
label: "监测到暂态时间监测点数",
|
||||
width: "110px",
|
||||
},
|
||||
{ prop: "monthTransientTimes", label: "暂态事件发生次数" },
|
||||
{ prop: "monthTransientFrequency", label: "暂态事件发生频次" },
|
||||
{
|
||||
prop: "monthProportion",
|
||||
label: "谐波电流超标监测点占比",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "monthSagMonitor",
|
||||
label: "监测到暂降事件监测点数",
|
||||
width: "110px",
|
||||
},
|
||||
{ prop: "monthSagTimes", label: "暂降事件发生次数" },
|
||||
{ prop: "monthSagFrequency", label: "暂降事件发生频次" },
|
||||
{
|
||||
prop: "monthRiseMonito",
|
||||
label: "监测到暂升事件监测点数",
|
||||
width: "110px",
|
||||
},
|
||||
{ prop: "monthRisetTimes", label: "暂升事件发生次数" },
|
||||
{ prop: "monthRiseFrequency", label: "暂升事件发生频次" },
|
||||
{
|
||||
prop: "monthInterruptMonitor",
|
||||
label: "监测到中断事件监测点数",
|
||||
width: "110px",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "",
|
||||
label: "当年",
|
||||
children: [
|
||||
{
|
||||
prop: "yearTransientMonitor",
|
||||
label: "累计监测到暂态事件监测点数",
|
||||
width: "120px",
|
||||
},
|
||||
{
|
||||
prop: "yearTransientTimes",
|
||||
label: "累计暂态事件发生次数",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "yearTransientFrequency",
|
||||
label: "累计暂态事件发生频次",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "yearSagMonitor",
|
||||
label: "累计监测到暂降事件监测点数",
|
||||
width: "120px",
|
||||
},
|
||||
{
|
||||
prop: "yearSagTimes",
|
||||
label: "累计暂降事件发生次数",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "yearSagFrequency",
|
||||
label: "累计暂降事件发生频次",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "yearRiseMonito",
|
||||
label: "累计监测到暂升事件监测点数",
|
||||
width: "120px",
|
||||
},
|
||||
{
|
||||
prop: "yearRisetTimes",
|
||||
label: "累计暂升事件发生次数",
|
||||
width: "110px",
|
||||
},
|
||||
{
|
||||
prop: "yearRiseFrequency",
|
||||
label: "累计暂升事件发生频次",
|
||||
width: "110px",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
//所属单位数据数据
|
||||
|
||||
CompanyList: [],
|
||||
list: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
// this.dictionaries()
|
||||
this.onSubmit();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 220;
|
||||
|
||||
},
|
||||
// 字典表
|
||||
// dictionaries() {
|
||||
// dictypeData().then(res => {
|
||||
// res.data.forEach(item => {
|
||||
// if (item.name == "单位") {
|
||||
// this.CompanyList = item.children;
|
||||
// }
|
||||
// });
|
||||
// });
|
||||
// },
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
},
|
||||
// 查询
|
||||
onSubmit() {
|
||||
this.isLoading = true;
|
||||
RegionalReports(this.form).then((res) => {
|
||||
this.list = res;
|
||||
this.isLoading = false;
|
||||
});
|
||||
}, //每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.form.pageSize = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.form.pageNum = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
// ::v-deep .el-form-item {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<div class="tab">
|
||||
<el-row>
|
||||
<el-col :span="24" class="title">{{ list.title }}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">统计报表时间</el-col>
|
||||
<el-col :span="20">{{ list.ReportTime }}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">检修时间</el-col>
|
||||
<el-col :span="20">{{ list.repairTime }}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">监测线路</el-col>
|
||||
<el-col :span="12">{{ list.detectionLine }}</el-col>
|
||||
<el-col :span="4">电压等级(kV)</el-col>
|
||||
<el-col :span="4">{{ list.voltage }}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4">PT变化</el-col>
|
||||
<el-col :span="4">{{ list.changePT }}</el-col>
|
||||
<el-col :span="4">CT变化</el-col>
|
||||
<el-col :span="4">{{ list.changeCT }}</el-col>
|
||||
<el-col :span="4">基准短路容量(MVA)</el-col>
|
||||
<el-col :span="4">{{ list.benchmark }}</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="4">母线最小短路容量(MVA)</el-col>
|
||||
<el-col :span="4">{{ list.busBar }}</el-col>
|
||||
<el-col :span="4">用户协议最小短路容量(MVA)</el-col>
|
||||
<el-col :span="4">{{ list.UserAgreement }}</el-col>
|
||||
<el-col :span="4">供电设备容量(MVA)</el-col>
|
||||
<el-col :span="4">{{ list.powerSupply }}</el-col>
|
||||
</el-row>
|
||||
<el-row>
|
||||
<el-col :span="4" class="bottom">工况</el-col>
|
||||
<el-col :span="20" class="bottom">{{ list.workingCondition }}</el-col>
|
||||
</el-row>
|
||||
<el-row v-for="(item, ind) in list.tableData" :key="ind">
|
||||
<el-row>
|
||||
<el-col :span="24" class="title tableTitle">{{
|
||||
list.tableTitle[ind]
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
<el-table
|
||||
stripe
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="item"
|
||||
border
|
||||
style="width: 100%"
|
||||
:height="vh / num"
|
||||
>
|
||||
<el-table-column prop="name" label="名称"> </el-table-column>
|
||||
<el-table-column prop="company" label="单位"> </el-table-column>
|
||||
<el-table-column label="最大值">
|
||||
<el-table-column prop="maxA" label="A"> </el-table-column>
|
||||
<el-table-column prop="maxB" label="B"> </el-table-column>
|
||||
<el-table-column prop="maxC" label="C"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="最小值">
|
||||
<el-table-column prop="minA" label="A"> </el-table-column>
|
||||
<el-table-column prop="minB" label="B"> </el-table-column>
|
||||
<el-table-column prop="minC" label="C"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="平均值">
|
||||
<el-table-column prop="averageA" label="A"> </el-table-column>
|
||||
<el-table-column prop="averageB" label="B"> </el-table-column>
|
||||
<el-table-column prop="averageC" label="C"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="95概率大值">
|
||||
<el-table-column prop="probabilityA" label="A"> </el-table-column>
|
||||
<el-table-column prop="probabilityB" label="B"> </el-table-column>
|
||||
<el-table-column prop="probabilityC" label="C"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="conclusion" label="结论"> </el-table-column>
|
||||
<el-table-column prop="Limit" label="国际限值"> </el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
list: {
|
||||
type: [Array, Object],
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
num: "",
|
||||
};
|
||||
},
|
||||
mounted() {},
|
||||
created() {},
|
||||
|
||||
methods: {},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
list() {
|
||||
if (this.list.tableData.length == 1) {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 390;
|
||||
} else {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 470;
|
||||
}
|
||||
this.num = this.list.tableData.length;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.tab {
|
||||
.el-row {
|
||||
.el-col {
|
||||
padding-left: 5px;
|
||||
font-size: 14px;
|
||||
border-top: 1px solid #ebeef5;
|
||||
border-left: 1px solid #ebeef5;
|
||||
|
||||
&:last-child {
|
||||
border-right: 1px solid #ebeef5;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 30px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.tableTitle {
|
||||
border-top: 3px solid #ebeef5 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-input
|
||||
placeholder="输入关键字进行过滤"
|
||||
clearable
|
||||
v-model="filterText"
|
||||
style="margin-bottom: 10px"
|
||||
></el-input>
|
||||
<el-tree
|
||||
:highlight-current="true"
|
||||
:expand-on-click-node="false"
|
||||
:style="'height: ' + (vh - 10) + 'px;'"
|
||||
class="filter-tree"
|
||||
:data="treeData"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
:filter-node-method="filterNode"
|
||||
@node-click="handleNodeClick"
|
||||
ref="tree"
|
||||
v-loading="loadingTree"
|
||||
></el-tree>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { pvTree } from '@/api/AccountOperation'
|
||||
export default {
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
vh: 0,
|
||||
filterText: '',
|
||||
loadingTree: true,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
treeList: [],
|
||||
treeData: []
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
created() {
|
||||
this.operationTree()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 180
|
||||
},
|
||||
// 树查询
|
||||
async operationTree() {
|
||||
this.loadingTree = true
|
||||
const data = await pvTree()
|
||||
this.treeData = data.data
|
||||
this.loadingTree = false
|
||||
},
|
||||
// 树点击事件
|
||||
handleNodeClick: function (data, node) {
|
||||
this.breadList = []
|
||||
this.treeList = data
|
||||
let selectNode = this.$refs.tree.getNode(node) // 获取点击当节点的dom的信息
|
||||
// console.log(data,'data',node,'node')
|
||||
this.$emit('nodeData', data)
|
||||
},
|
||||
// 树过滤
|
||||
|
||||
filterNode(value, data, node) {
|
||||
if (!value) {
|
||||
return true
|
||||
}
|
||||
let _array = [] //这里使用数组存储 只是为了存储值。
|
||||
this.getReturnNode(node, _array, value)
|
||||
let result = false
|
||||
_array.forEach(item => {
|
||||
result = result || item
|
||||
})
|
||||
return result
|
||||
},
|
||||
getReturnNode(node, _array, value) {
|
||||
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
|
||||
isPass ? _array.push(isPass) : ''
|
||||
this.index++
|
||||
if (!isPass && node.name != 1 && node.parent) {
|
||||
this.getReturnNode(node.parent, _array, value)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.el-tree {
|
||||
// background-color: #ccc;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 台账 -->
|
||||
<StandingBook v-show="flag" @ViewReport="ViewReport" />
|
||||
<!-- 报表 -->
|
||||
<reportForm v-if="!flag" :reportID="reportID" @close='flag=true'/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import reportForm from "./components/reportForm";
|
||||
import StandingBook from "./components/StandingBook";
|
||||
export default {
|
||||
components: { reportForm, StandingBook },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
flag: true,
|
||||
reportID: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
ViewReport(id) {
|
||||
this.reportID = id;
|
||||
this.flag = false;
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,631 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="Top" ref="top">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker
|
||||
v-show="tab == 'first-first'"
|
||||
v-model="value2"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
:picker-options="pickerOptions"
|
||||
>
|
||||
</el-date-picker>
|
||||
<el-date-picker
|
||||
v-show="tab == 'first-second'"
|
||||
value-format="yyyy-MM"
|
||||
v-model="value2"
|
||||
type="month"
|
||||
placeholder="选择月"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点名称">
|
||||
<el-input v-model="value" placeholder="请输入监测点名称">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="steady"
|
||||
>查询</el-button
|
||||
>
|
||||
|
||||
<!-- <el-button type="primary" icon="el-icon-download">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs
|
||||
:tab-position="tabPosition"
|
||||
v-model="active1"
|
||||
@tab-click="handleClick11"
|
||||
>
|
||||
<el-tab-pane label="暂态指标监测点日报" name="first-first">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="14" class="mt10">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
<span class="spanfont"
|
||||
>监测点电压暂降和短时中断分布情况</span
|
||||
>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData1"
|
||||
height="280px"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="残余电压" width="110">
|
||||
<el-table-column
|
||||
prop="featureAmplitude"
|
||||
label="U1(%)"
|
||||
width="110"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column label="t1">
|
||||
<el-table-column
|
||||
prop="duration100"
|
||||
min-width="100"
|
||||
label="(0.01,0.1]"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t2">
|
||||
<el-table-column
|
||||
prop="duration250"
|
||||
min-width="100"
|
||||
label="(0.1,0.25]"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t3">
|
||||
<el-table-column
|
||||
prop="duration500"
|
||||
min-width="100"
|
||||
label="(0.25,0.5]"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t4">
|
||||
<el-table-column
|
||||
prop="duration1000"
|
||||
min-width="100"
|
||||
label="(0.5,1]"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t5">
|
||||
<el-table-column prop="duration3000" label="(1,3]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t6">
|
||||
<el-table-column prop="duration10000" label="(3,10]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t7">
|
||||
<el-table-column prop="duration20000" label="(10,20]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t8">
|
||||
<el-table-column prop="duration60000" label="(20,60]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="10" class="mt10">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
<span class="spanfont">监测点电压暂升分布情况</span>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData11"
|
||||
height="280px"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="电压幅值" width="110">
|
||||
<el-table-column
|
||||
prop="featureAmplitude"
|
||||
label="U1(%)"
|
||||
width="110"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column label="t1">
|
||||
<el-table-column prop="duration500" label="(0.01,0.1]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t2">
|
||||
<el-table-column prop="duration5000" label="(0.1,0.25]">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t3">
|
||||
<el-table-column
|
||||
prop="duration60000"
|
||||
label="(0.25,0.5]"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24" class="mt10">
|
||||
<div
|
||||
style="
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
<span class="spanfont"> 监测点暂态事件发生次数</span>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData111"
|
||||
:height="height1"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column prop="date" label="时间">
|
||||
</el-table-column>
|
||||
<el-table-column prop="orgName" label="所属单位">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="voltageLevelName"
|
||||
label="监测点电压等级"
|
||||
min-width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="monitorName" label="监测点名称">
|
||||
</el-table-column>
|
||||
<el-table-column label="暂态事件发生次数">
|
||||
<el-table-column
|
||||
prop="shortInterruptionCount"
|
||||
label="短时中断"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltageDipCount" label="电压暂降">
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltageRiseCount" label="电压暂升">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="暂态指标监测点月报" name="first-second">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="14" class="mt10">
|
||||
<div style="font-size: 14px; font-weight: 600">
|
||||
<span class="spanfont"
|
||||
>监测点电压暂降和短时中断分布情况</span
|
||||
>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData2"
|
||||
height="280px"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="残余电压" min-width="110">
|
||||
<el-table-column
|
||||
prop="featureAmplitude"
|
||||
label="U1(%)"
|
||||
min-width="110"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column label="t1">
|
||||
<el-table-column prop="duration100" label="(0.01,0.1]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t2">
|
||||
<el-table-column prop="duration250" label="(0.1,0.25]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t3">
|
||||
<el-table-column prop="duration500" label="(0.25,0.5]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t4">
|
||||
<el-table-column prop="duration1000" label="(0.5,1]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t5">
|
||||
<el-table-column prop="duration3000" label="(1,3]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t6">
|
||||
<el-table-column prop="duration10000" label="(3,10]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t7">
|
||||
<el-table-column prop="duration20000" label="(10,20]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t8">
|
||||
<el-table-column prop="duration60000" label="(20,60]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="10" class="mt10">
|
||||
<div
|
||||
style="
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
<span class="spanfont">监测点电压暂升分布情况</span>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData22"
|
||||
height="280px "
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column label="电压幅值" min-width="110">
|
||||
<el-table-column
|
||||
prop="featureAmplitude"
|
||||
label="U1(%)"
|
||||
min-width="110"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column label="t1">
|
||||
<el-table-column prop="duration500" label="(0.01,0.1]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t2">
|
||||
<el-table-column prop="duration5000" label="(0.1,0.25]" min-width="100">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="t3">
|
||||
<el-table-column
|
||||
prop="duration60000"
|
||||
label="(0.25,0.5]"
|
||||
min-width="100"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24" class="mt10">
|
||||
<div
|
||||
style="
|
||||
margin-top: 5px;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
"
|
||||
>
|
||||
<span class="spanfont"> 监测点暂态事件发生次数</span>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="serialData222"
|
||||
:height="height1"
|
||||
style="width: 100%; height: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<el-table-column prop="date" label="时间">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orgName"
|
||||
label="所属单位"
|
||||
min-width="180"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="voltageLevelName"
|
||||
label="监测点电压等级"
|
||||
min-width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column prop="monitorName" label="监测点名称">
|
||||
</el-table-column>
|
||||
<el-table-column label="暂态事件发生次数">
|
||||
<el-table-column
|
||||
prop="shortInterruptionCount"
|
||||
label="短时中断"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltageDipCount" label="电压暂降">
|
||||
</el-table-column>
|
||||
<el-table-column prop="voltageRiseCount" label="电压暂升">
|
||||
</el-table-column>
|
||||
</el-table-column> </el-table
|
||||
></el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getEventDipShortDistribution,
|
||||
getEventRiseDistribution,
|
||||
getMonitorEventCount,
|
||||
} from "@/api/Distributionnetwork-analysis/StatisticalReport/Transient/Transient.js";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
components: { Area },
|
||||
data() {
|
||||
return {
|
||||
type: 5,
|
||||
areaid: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
||||
tab: "first-first",
|
||||
pickerOptions: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now();
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: "今天",
|
||||
onClick(picker) {
|
||||
picker.$emit("pick", new Date());
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "昨天",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "一周前",
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", date);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
pickerOptions1: {
|
||||
disabledDate(time) {
|
||||
return time.getTime() > Date.now() - 2678400000;
|
||||
},
|
||||
},
|
||||
value: "",
|
||||
value2: this.getEndTime(),
|
||||
voltageLevel: "",
|
||||
active_active: "first-first",
|
||||
zoom: undefined, //图表焦点校验
|
||||
vh: "",
|
||||
height: null,
|
||||
height1: null,
|
||||
device: "",
|
||||
getHeight: "",
|
||||
tabPosition: "top",
|
||||
active1: "first-first",
|
||||
isLoading: false,
|
||||
isLoading2: false,
|
||||
isLoading3: false,
|
||||
isLoading4: false,
|
||||
serialData: [],
|
||||
serialData1: [],
|
||||
serialData11: [],
|
||||
serialData111: [],
|
||||
serialData2: [],
|
||||
serialData22: [],
|
||||
serialData222: [],
|
||||
level: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.account();
|
||||
},
|
||||
mounted() {
|
||||
this.level = dicData("Dev_Voltage", ["Load_Type"]);
|
||||
this.device = window.devicePixelRatio;
|
||||
|
||||
//echarts图表调用
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.height = window.sessionStorage.getItem("appheight") - 215;
|
||||
this.height1 = window.sessionStorage.getItem("appheight") - 532;
|
||||
this.zoom = 1 / document.body.style.zoom;
|
||||
},
|
||||
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
getEndTime1() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month;
|
||||
return endTime;
|
||||
},
|
||||
handleClick11(tab) {
|
||||
this.tab = tab.name;
|
||||
if (tab.name == "first-second") {
|
||||
this.value2 = this.getEndTime1();
|
||||
this.type = 3;
|
||||
this.account();
|
||||
} else {
|
||||
this.type = 5;
|
||||
this.value2 = this.getEndTime();
|
||||
this.account();
|
||||
}
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
this.areaid = data.id;
|
||||
},
|
||||
|
||||
//方法调用获取稳态指标超标统计数据接口
|
||||
steady() {
|
||||
// console.log(this.tab, "tggtgtgtgt");
|
||||
if (this.tab.name == "first-second") {
|
||||
this.type = 5;
|
||||
this.account();
|
||||
} else {
|
||||
this.type = 3;
|
||||
|
||||
this.account();
|
||||
}
|
||||
},
|
||||
cellStyle(row, column, rowIndex, columnIndex) {
|
||||
// console.log(row);
|
||||
if (
|
||||
row.columnIndex == 2 ||
|
||||
row.columnIndex == 3 ||
|
||||
row.columnIndex == 4 ||
|
||||
row.columnIndex == 5
|
||||
) {
|
||||
return "font-weight: 100;";
|
||||
}
|
||||
},
|
||||
|
||||
//方法调用台账统计数据接口
|
||||
account() {
|
||||
this.isLoading = true;
|
||||
this.isLoading2 = true;
|
||||
//监测终端统计单位表格数据
|
||||
getEventDipShortDistribution({
|
||||
monitorName: this.value,
|
||||
type: this.type,
|
||||
startTime: this.value2,
|
||||
endTime: this.value2,
|
||||
id: this.areaid,
|
||||
}).then((res) => {
|
||||
this.isLoading = false;
|
||||
this.serialData1 = res.data;
|
||||
this.serialData2 = res.data;
|
||||
});
|
||||
getEventRiseDistribution({
|
||||
monitorName: this.value,
|
||||
type: this.type,
|
||||
startTime: this.value2,
|
||||
endTime: this.value2,
|
||||
id: this.areaid,
|
||||
}).then((res) => {
|
||||
this.isLoading = false;
|
||||
this.serialData11 = res.data;
|
||||
this.serialData22 = res.data;
|
||||
});
|
||||
getMonitorEventCount({
|
||||
monitorName: this.value,
|
||||
type: this.type,
|
||||
startTime: this.value2,
|
||||
endTime: this.value2,
|
||||
id: this.areaid,
|
||||
}).then((res) => {
|
||||
this.isLoading = false;
|
||||
this.serialData111 = res.data;
|
||||
this.serialData222 = res.data;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.prop {
|
||||
font-weight: 100;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点名称:" class="box">
|
||||
<el-input v-model.trim="valueName" placeholder="请选择" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点编号:" class="box">
|
||||
<el-input v-model.trim="valueNumber" placeholder="请选择" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="searchFn"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-download"
|
||||
>导出</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-refresh"
|
||||
@click="reset"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="typeface">监测点电压暂降和短时中断分布情况</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily1Data"
|
||||
:height="height"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="number" label="残余电压">
|
||||
<el-table-column
|
||||
prop="U1"
|
||||
label="U1(%)"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column prop="point1" label="t1">
|
||||
<el-table-column prop="t1" label="(0.01,0.1]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point2" label="t2">
|
||||
<el-table-column prop="t2" label="(0.1,0.25]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point3" label="t3">
|
||||
<el-table-column prop="t3" label="(0.25,0.5]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point4" label="t4">
|
||||
<el-table-column prop="t4" label="(0.5,1]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point5" label="t5">
|
||||
<el-table-column prop="t5" label="(1,3]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point6" label="t6">
|
||||
<el-table-column prop="t6" label="(3,10]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point7" label="t7">
|
||||
<el-table-column prop="t7" label="(10,20]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point8" label="t8">
|
||||
<el-table-column prop="t8" label="(20,60]"> </el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="typeface">监测点电压暂升分布情况</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily2Data"
|
||||
:height="h"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading1"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="number" label="电压幅值">
|
||||
<el-table-column prop="U1" label="U1(%)" width="120">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column prop="point1" label="t1">
|
||||
<el-table-column
|
||||
prop="t1"
|
||||
label="(0.01,0.1]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point2" label="t2">
|
||||
<el-table-column
|
||||
prop="t2"
|
||||
label="(0.1,0.25]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point3" label="t3">
|
||||
<el-table-column
|
||||
prop="t3"
|
||||
label="(0.25,0.5]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="typeface">监测点暂态事件发生次数</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily3Data"
|
||||
:height="h"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading2"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="time" label="时间"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="所属单位"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="voltageLevel"
|
||||
label="监测点电压等级"
|
||||
width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
label="监测点编号"
|
||||
></el-table-column>
|
||||
<el-table-column prop="name" label="监测点名称"></el-table-column>
|
||||
<el-table-column label="暂态事件发生次数">
|
||||
<el-table-column
|
||||
prop="interrupt"
|
||||
label="短时中断"
|
||||
></el-table-column>
|
||||
<el-table-column prop="sag" label="电压暂降"></el-table-column>
|
||||
<el-table-column prop="rise" label="电压暂升"></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "../../../../components/Timeinterval.vue";
|
||||
import {
|
||||
getDaily1Data,
|
||||
getDaily2Data,
|
||||
getDaily3Data,
|
||||
} from "@/api/Distributionnetwork-analysis/StatisticalReport/Transient/Transient";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
h: null,
|
||||
height: null,
|
||||
zoom: null,
|
||||
valueName: "",
|
||||
valueNumber: "",
|
||||
isLoading: false,
|
||||
isLoading1: false,
|
||||
isLoading2: false,
|
||||
daily1Data: [],
|
||||
daily2Data: [],
|
||||
daily3Data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.daily();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.zoom = window.devicePixelRatio;
|
||||
if (this.zoom == 1) {
|
||||
let heightd = window.sessionStorage.getItem("appheight") - 235;
|
||||
this.h = heightd / 2 + "px";
|
||||
this.height = window.sessionStorage.getItem("appheight") - 207;
|
||||
}
|
||||
if (this.zoom == 1.25) {
|
||||
let heightd = window.sessionStorage.getItem("appheight") - 235;
|
||||
this.h = heightd / 2 + "px";
|
||||
this.height = window.sessionStorage.getItem("appheight") - 207;
|
||||
}
|
||||
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
},
|
||||
//获取数据
|
||||
daily() {
|
||||
this.isLoading = true;
|
||||
this.isLoading1 = true;
|
||||
this.isLoading2 = true;
|
||||
getDaily1Data().then((res) => {
|
||||
this.isLoading = false;
|
||||
this.daily1Data = res.data;
|
||||
});
|
||||
getDaily2Data().then((res) => {
|
||||
this.isLoading1 = false;
|
||||
this.daily2Data = res.data;
|
||||
});
|
||||
getDaily3Data().then((res) => {
|
||||
this.isLoading2 = false;
|
||||
this.daily3Data = res.data;
|
||||
});
|
||||
},
|
||||
//查询
|
||||
searchFn() {
|
||||
this.daily();
|
||||
},
|
||||
//重置
|
||||
reset() {
|
||||
this.$refs.area.form.valueTitle = "全国";
|
||||
this.$refs.interval.intervald = 1;
|
||||
this.valueName = "";
|
||||
this.valueNumber = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
// ::v-deep .el-form-item {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
::v-deep .box {
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
.typeface {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,278 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点名称:" class="box">
|
||||
<el-input v-model.trim="valueName" placeholder="请选择" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点编号:" class="box">
|
||||
<el-input v-model.trim="valueNumber" placeholder="请选择" clearable>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="searchFn"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-download"
|
||||
>导出</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-refresh"
|
||||
@click="reset"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<div class="typeface">监测点电压暂降和短时中断分布情况</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily1Data"
|
||||
:height="height"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="number" label="残余电压">
|
||||
<el-table-column
|
||||
prop="U1"
|
||||
label="U1(%)"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column prop="point1" label="t1">
|
||||
<el-table-column prop="t1" label="(0.01,0.1]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point2" label="t2">
|
||||
<el-table-column prop="t2" label="(0.1,0.25]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point3" label="t3">
|
||||
<el-table-column prop="t3" label="(0.25,0.5]"></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point4" label="t4">
|
||||
<el-table-column prop="t4" label="(0.5,1]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point5" label="t5">
|
||||
<el-table-column prop="t5" label="(1,3]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point6" label="t6">
|
||||
<el-table-column prop="t6" label="(3,10]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point7" label="t7">
|
||||
<el-table-column prop="t7" label="(10,20]"> </el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point8" label="t8">
|
||||
<el-table-column prop="t8" label="(20,60]"> </el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="typeface">监测点电压暂升分布情况</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily2Data"
|
||||
:height="h"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading1"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="number" label="电压幅值">
|
||||
<el-table-column prop="U1" label="U1(%)" width="120">
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column label="持续时间t1(s)">
|
||||
<el-table-column prop="point1" label="t1">
|
||||
<el-table-column
|
||||
prop="t1"
|
||||
label="(0.01,0.1]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point2" label="t2">
|
||||
<el-table-column
|
||||
prop="t2"
|
||||
label="(0.1,0.25]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
<el-table-column prop="point3" label="t3">
|
||||
<el-table-column
|
||||
prop="t3"
|
||||
label="(0.25,0.5]"
|
||||
></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<div class="typeface">监测点暂态事件发生次数</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="daily3Data"
|
||||
:height="h"
|
||||
border
|
||||
style="width: 100%"
|
||||
v-loading="isLoading2"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="time" label="时间"> </el-table-column>
|
||||
<el-table-column
|
||||
prop="company"
|
||||
label="所属单位"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="voltageLevel"
|
||||
label="监测点电压等级"
|
||||
width="120"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
label="监测点编号"
|
||||
></el-table-column>
|
||||
<el-table-column prop="name" label="监测点名称"></el-table-column>
|
||||
<el-table-column label="暂态事件发生次数">
|
||||
<el-table-column
|
||||
prop="interrupt"
|
||||
label="短时中断"
|
||||
></el-table-column>
|
||||
<el-table-column prop="sag" label="电压暂降"></el-table-column>
|
||||
<el-table-column prop="rise" label="电压暂升"></el-table-column>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "../../../../components/Timeinterval.vue";
|
||||
import {
|
||||
getDaily1Data,
|
||||
getDaily2Data,
|
||||
getDaily3Data,
|
||||
} from "@/api/Distributionnetwork-analysis/StatisticalReport/Transient/Transient";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
h: null,
|
||||
height: null,
|
||||
zoom: null,
|
||||
valueName: "",
|
||||
valueNumber: "",
|
||||
isLoading: false,
|
||||
isLoading1: false,
|
||||
isLoading2: false,
|
||||
daily1Data: [],
|
||||
daily2Data: [],
|
||||
daily3Data: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.daily();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
|
||||
this.zoom = window.devicePixelRatio;
|
||||
if (this.zoom == 1) {
|
||||
let heightd = window.sessionStorage.getItem("appheight") - 235;
|
||||
this.h = heightd / 2 + "px";
|
||||
this.height = window.sessionStorage.getItem("appheight") - 207;
|
||||
}
|
||||
if (this.zoom == 1.25) {
|
||||
let heightd = window.sessionStorage.getItem("appheight") - 235;
|
||||
this.h = heightd / 2 + "px";
|
||||
this.height = window.sessionStorage.getItem("appheight") - 207;
|
||||
}
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
},
|
||||
//获取数据
|
||||
daily() {
|
||||
this.isLoading = true;
|
||||
this.isLoading1 = true;
|
||||
this.isLoading2 = true;
|
||||
getDaily1Data().then((res) => {
|
||||
this.isLoading = false;
|
||||
this.daily1Data = res.data;
|
||||
});
|
||||
getDaily2Data().then((res) => {
|
||||
this.isLoading1 = false;
|
||||
this.daily2Data = res.data;
|
||||
});
|
||||
getDaily3Data().then((res) => {
|
||||
this.isLoading2 = false;
|
||||
this.daily3Data = res.data;
|
||||
});
|
||||
},
|
||||
//查询
|
||||
searchFn() {
|
||||
this.daily();
|
||||
},
|
||||
//重置
|
||||
reset() {
|
||||
this.$refs.area.form.valueTitle = "全国";
|
||||
this.$refs.interval.intervald = 1;
|
||||
this.valueName = "";
|
||||
this.valueNumber = "";
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
// ::v-deep .el-form-item {
|
||||
// margin-bottom: 0;
|
||||
// }
|
||||
::v-deep .box {
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
.typeface {
|
||||
font-size: 18px;
|
||||
font-weight: 400;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,438 @@
|
||||
<template>
|
||||
<el-container style="position: relative" id="dept">
|
||||
<!-- <el-form ref="form" :inline="true" :model="form">
|
||||
<el-form-item> -->
|
||||
<!-- <div class="boxTop"> -->
|
||||
<el-button style="margin-top: -10px" type="primary" class="flag" icon="el-icon-close" @click="$emit('close')">
|
||||
返回
|
||||
</el-button>
|
||||
<!-- </div> -->
|
||||
<!-- </el-form-item>
|
||||
</el-form> -->
|
||||
<el-main id="drag-dept-right ">
|
||||
<div class="bm-view" id="container " :style="'height:' + (vh - 20) + 'px ;position: relative;'">
|
||||
<div class="boxTop">
|
||||
<el-form ref="form" :inline="true" :model="form">
|
||||
<el-form-item label="模板:">
|
||||
<el-select
|
||||
value-key="id"
|
||||
:popper-append-to-body="false"
|
||||
v-model="form.TemplateId"
|
||||
placeholder="请选择模板"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="报表类型:">
|
||||
<el-select
|
||||
v-model="form.TemplateId.reportForm"
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择报表类型"
|
||||
disabled
|
||||
>
|
||||
<el-option
|
||||
v-for="item in reportFormList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="3" />
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button class="buttons" type="primary" icon="el-icon-search" @click="Template">
|
||||
查询
|
||||
</el-button>
|
||||
|
||||
<el-button @click="downloadExcel" class="buttons" type="primary" icon="el-icon-download">
|
||||
导出excel
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div
|
||||
class="luckysheetBox"
|
||||
style="padding: 0; margin: 0"
|
||||
:style="`width:${vw - 50}px;height: ${vh - 200}px;`"
|
||||
></div>
|
||||
<div
|
||||
id="luckysheet"
|
||||
style="padding: 0; margin: 0"
|
||||
:style="`width:${vw - 40}px;height: ${vh - 130}px;margin-top: 50px;`"
|
||||
></div>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import jquery from 'jquery'
|
||||
import { getCustomReport, getTemplateByDept } from '@/api/templateConfiguration'
|
||||
import { exportExcel } from '@/views/components/luckyexcel/export'
|
||||
import Timeinterval from '@/views/components/cgytree/TimeintervalTemplat.vue'
|
||||
import TreeTemplat from '@/views/components/cgytree/TreeTemplat.vue'
|
||||
import LuckyExcel from 'luckyexcel'
|
||||
export default {
|
||||
components: { TreeTemplat, Timeinterval },
|
||||
props: {
|
||||
reportID: {
|
||||
type: String
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
options: [],
|
||||
zoom: '', //图表焦点校验
|
||||
form: {
|
||||
TemplateId: '',
|
||||
|
||||
reportForm: ''
|
||||
},
|
||||
reportFormList: [
|
||||
{
|
||||
value: '1',
|
||||
label: '分析报表'
|
||||
},
|
||||
{
|
||||
value: '2',
|
||||
label: '统计报表'
|
||||
},
|
||||
{
|
||||
value: '3',
|
||||
label: '自定义报表'
|
||||
}
|
||||
],
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
vw: undefined,
|
||||
view: true,
|
||||
checkbox: false,
|
||||
tablename: 1,
|
||||
treenode: '',
|
||||
statisticalList: {}, //树上面的选择框
|
||||
data_info: [], //点位信息
|
||||
map: null, //存储地图
|
||||
flag: true,
|
||||
showtoolbar: false, //富文本框头部显示
|
||||
cellRightClickConfig: {
|
||||
copy: false, // 复制
|
||||
copyAs: false, // 复制为
|
||||
paste: false, // 粘贴
|
||||
insertRow: false, // 插入行
|
||||
insertColumn: false, // 插入列
|
||||
deleteRow: false, // 删除选中行
|
||||
deleteColumn: false, // 删除选中列
|
||||
deleteCell: false, // 删除单元格
|
||||
hideRow: false, // 隐藏选中行和显示选中行
|
||||
hideColumn: false, // 隐藏选中列和显示选中列
|
||||
rowHeight: false, // 行高
|
||||
columnWidth: false, // 列宽
|
||||
clear: false, // 清除内容
|
||||
matrix: false, // 矩阵操作选区
|
||||
sort: false, // 排序选区
|
||||
filter: false, // 筛选选区
|
||||
chart: false, // 图表生成
|
||||
image: false, // 插入图片
|
||||
link: false, // 插入链接
|
||||
data: false, // 数据验证
|
||||
cellFormat: false // 设置单元格格式
|
||||
}, //控制右键菜单
|
||||
list: [
|
||||
// {
|
||||
// name: "Cell",
|
||||
// index: 0,
|
||||
// defaultRowHeight: 27,
|
||||
// defaultColWidth: 105,
|
||||
// },
|
||||
],
|
||||
deptId: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.getTemplateLists()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight')
|
||||
this.vw = document.getElementById('app-main-in').offsetWidth
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
async getTemplateLists() {
|
||||
await getTemplateByDept({ id: this.deptId }).then(res => {
|
||||
if (res != undefined && res.code == 'A0000') {
|
||||
res.data.forEach(item => {
|
||||
if (item.activation == 1) {
|
||||
this.form.TemplateId = item
|
||||
return
|
||||
}
|
||||
})
|
||||
this.options = res.data
|
||||
setTimeout(() => {
|
||||
this.Template()
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 选择模板
|
||||
async Template() {
|
||||
let _this = this
|
||||
await getCustomReport({
|
||||
startTime: this.$refs.Timeinterval.timeValue[0],
|
||||
endTime: this.$refs.Timeinterval.timeValue[1],
|
||||
type: this.$refs.Timeinterval.intervald,
|
||||
tempId: this.form.TemplateId.id,
|
||||
activation: this.form.TemplateId.activation,
|
||||
lineId: this.reportID
|
||||
// lineId: "8696be1d170e05b7d848accc059f4558",
|
||||
}).then(res => {
|
||||
// jquery.getJSON(res.data[1], null, function (list) {
|
||||
_this.list = res
|
||||
_this.init()
|
||||
//});
|
||||
})
|
||||
|
||||
// .then((res) => {
|
||||
// console.log("res", res.data);
|
||||
// let Datalist = JSON.parse(res.data);
|
||||
|
||||
// console.log(`13323`, JSON.parse(res.data));
|
||||
// this.list = Datalist;
|
||||
|
||||
// this.init();
|
||||
// });
|
||||
},
|
||||
|
||||
// 初始化插件
|
||||
init() {
|
||||
window.luckysheet.destroy()
|
||||
let options = {
|
||||
container: 'luckysheet', //luckysheet为容器id
|
||||
title: '',
|
||||
lang: 'zh',
|
||||
showinfobar: false,
|
||||
cellRightClickConfig: this.cellRightClickConfig,
|
||||
showtoolbar: this.showtoolbar,
|
||||
// column:8,
|
||||
// row:7,
|
||||
showtoolbarConfig: {
|
||||
textRotateMode: false // '文本旋转方式'
|
||||
},
|
||||
|
||||
data: this.list
|
||||
}
|
||||
|
||||
//console.log(options);
|
||||
luckysheet.create(options)
|
||||
},
|
||||
// 下载表格
|
||||
downloadExcel() {
|
||||
// const value = this.selected;;
|
||||
|
||||
exportExcel(luckysheet.getAllSheets(), '下载')
|
||||
// testaaa();
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
.wrap {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
#container {
|
||||
width: 100%;
|
||||
height: 83vh;
|
||||
border: 1px solid rgb(0, 183, 255);
|
||||
}
|
||||
#container2 {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
border: 3px solid pink;
|
||||
}
|
||||
#drag-dept-left {
|
||||
min-width: 220px;
|
||||
max-width: 35%;
|
||||
}
|
||||
.overview_scroll::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 1px;
|
||||
background: rgba(6, 70, 122, 0.013);
|
||||
}
|
||||
|
||||
.overview_scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 4px;
|
||||
margin-right: 5px;
|
||||
-webkit-box-shadow: inset 0 0 0px #0090b411;
|
||||
background: #03c1cf0e;
|
||||
}
|
||||
|
||||
/**拖拽条样式 */
|
||||
#drag-dept {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 10;
|
||||
right: 0;
|
||||
width: 4px;
|
||||
background-color: #04607c2a;
|
||||
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
#drag-dept i {
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 1px;
|
||||
background-color: #e9e9e9;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
.overview_scroll::-webkit-scrollbar {
|
||||
width: 2px;
|
||||
height: 1px;
|
||||
background: rgba(6, 70, 122, 0.013);
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 0px;
|
||||
}
|
||||
// .el-tabs--border-card > .el-tabs__header {
|
||||
// background-color: #124da5;
|
||||
// border-bottom: 2px solid #e4e7ed;
|
||||
// margin: 0;
|
||||
// }
|
||||
// .el-tabs__header {
|
||||
// padding: 0;
|
||||
// position: relative;
|
||||
// margin: 0 px;
|
||||
// }
|
||||
// .el-tabs--border-card > .el-tabs__content {
|
||||
// padding: 0px;
|
||||
// }
|
||||
// .el-tabs__content {
|
||||
// overflow: hidden;
|
||||
// position: relative;
|
||||
// }
|
||||
// .el-aside,
|
||||
// .el-main {
|
||||
// margin-top: 0px;
|
||||
// }
|
||||
// .el-main {
|
||||
// padding-top: 0px;
|
||||
// padding-bottom: 0;
|
||||
// padding-right: 0;
|
||||
// }
|
||||
::v-deep .boxDiv {
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
margin-left: 10px;
|
||||
span:first-child {
|
||||
font-weight: 600;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
::v-deep .button {
|
||||
margin-right: 5px;
|
||||
background-color: $themeColor;
|
||||
color: #fff;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
border: 0 solid #000;
|
||||
border-radius: 2px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.iconBox {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
width: 150px;
|
||||
height: 260px;
|
||||
padding: 10px;
|
||||
z-index: 2000;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
|
||||
background: rgba(255, 255, 255, 0.75) !important;
|
||||
|
||||
.div {
|
||||
display: flex;
|
||||
|
||||
margin-bottom: 5px;
|
||||
img {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
// span {
|
||||
// line-height: 20px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
.boxTop {
|
||||
position: absolute;
|
||||
top: -50px;
|
||||
left: 5px;
|
||||
z-index: 2000;
|
||||
}
|
||||
::v-deep .el-select-dropdown__list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 240px;
|
||||
}
|
||||
.luckysheetBox {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1500;
|
||||
// background-color: #000;
|
||||
}
|
||||
.anchorBL {
|
||||
display: none !important;
|
||||
}
|
||||
// ::v-deep .el-select {
|
||||
// width: 150px;
|
||||
// }
|
||||
.flag {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<!-- 区域暂态事件统计 -->
|
||||
<el-tab-pane label="区域稳态指标合格率统计" name="first">
|
||||
<Statistics v-if="activeName == 'first'"></Statistics>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 区域暂态指标分类统计 -->
|
||||
<el-tab-pane label="稳态指标合格率明细表" name="third">
|
||||
<detailed v-if="activeName == 'third'"></detailed>
|
||||
</el-tab-pane>
|
||||
<!-- 暂态事件明细 -->
|
||||
<!-- <el-tab-pane
|
||||
label="在线时间趋势图"
|
||||
name="trend"
|
||||
>
|
||||
<trend v-if="activeName=='trend'"></trend>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Statistics from './PassRate/Statistics.vue'
|
||||
import detailed from './PassRate/detailed.vue'
|
||||
|
||||
export default {
|
||||
components: { Statistics, detailed },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
activeName: 'first' //区分是那个节点
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 110 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
// if (tab.label == "暂态事件分布统计") {
|
||||
// this.echarts();
|
||||
// this.echarts2();
|
||||
// this.echarts4();
|
||||
// this.iticData();
|
||||
// this.semif();
|
||||
// this.echarts3();
|
||||
// }
|
||||
// this.onSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" @sendMessage="send"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select v-model="form.ids" clearable multiple collapse-tags placeholder="请选择监测点类别">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Passrate"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
:formatter="formFilter"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRStatOrgIndex } from '@/api/Distributionnetwork/steady-state/steady-state'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
item: ['', ''],
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
ids: [],
|
||||
startTime: '',
|
||||
type: ''
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'orgName', label: '单位', width: 150 },
|
||||
{ prop: 'monitorSort', label: '监测点类别', width: 100 },
|
||||
|
||||
{ prop: 'allCount', label: '累计有效接入监测点数', width: 160 },
|
||||
{ prop: 'freqPassRate', label: '频率合格率', width: 100 },
|
||||
{ prop: 'vdevPassRate', label: '电压偏差合格率', width: 120 },
|
||||
{ prop: 'flickerPassRate', label: '闪变合格率', width: 100 }
|
||||
],
|
||||
totalData: [],
|
||||
device: '',
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
// this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
},
|
||||
mounted() {
|
||||
// this.onSubmit();
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
send(data) {
|
||||
this.form.id = data
|
||||
this.onSubmit()
|
||||
// console.log(this.form.id,'11111111111');
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.onSubmit()
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true
|
||||
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
getPwRStatOrgIndex(this.form).then(res => {
|
||||
if (res.data == [] || res.data == null) {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = 0
|
||||
} else {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = this.totalData.length
|
||||
}
|
||||
})
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row) {
|
||||
if (row.column.property == 'monitorSort') {
|
||||
let title = ''
|
||||
this.typeList.forEach(item => {
|
||||
if (item.value == row.row.monitorSort) {
|
||||
title = item.label
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else {
|
||||
return row.row[row.column.property]
|
||||
}
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
// 监测点类别
|
||||
var Monitoring = 'Line_Sort'
|
||||
this.typeList = dicData(Monitoring, ['Load_Type'])
|
||||
this.typeList.forEach(item => {
|
||||
this.form.ids.push(item.id)
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Passrate.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,388 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="Area"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh-right"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
> -->
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle">
|
||||
条件筛选
|
||||
<i :class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||||
</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" label-width="110px">
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select
|
||||
v-model="form.monitorSort"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择监测点类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="所属变电站:">
|
||||
<el-select v-model="form.powerrIds" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in substationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点电压等级:">
|
||||
<el-select
|
||||
v-model="form.voltageLevels"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
style="width: 225px"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in VoltageList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="监测点名称:" class="box">
|
||||
<el-input v-model="form.monitorName" clearable placeholder="请填写内容"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Partslist"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
:formatter="formFilter"
|
||||
>
|
||||
<!-- <template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</template> -->
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRMpPassRateInfo } from '@/api/Distributionnetwork/steady-state/steady-state'
|
||||
import { getPmsPowerrInfoWithInOrg } from '@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
view: false,
|
||||
item: ['', ''],
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
monitorName: '',
|
||||
monitorSort: [],
|
||||
powerrIds: [],
|
||||
startTime: '',
|
||||
type: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
voltageLevels: []
|
||||
},
|
||||
formData: {
|
||||
deptIndex: '',
|
||||
manufacturer: [],
|
||||
monitorObjectType: [],
|
||||
monitorState: [],
|
||||
statisticalType: {},
|
||||
voltageLevel: [],
|
||||
upToGrid: ''
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
VoltageList: [], //电压等级数据
|
||||
substationData: [], //所属变电站
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'measurementPointName', label: '监测点名称', width: 150 },
|
||||
{ prop: 'monitorSort', label: '监测点类型', width: 100 },
|
||||
// { prop: "onlineMonitoring", label: "监测点编号" },
|
||||
{ prop: 'monitorVoltageName', label: '监测点电压等级', width: 120 },
|
||||
{ prop: 'orgName', label: '所属单位', width: 100 },
|
||||
{ prop: 'powerName', label: '所属电站', width: 100 },
|
||||
{ prop: 'freqPassRate', label: '频率合格率', width: 100 },
|
||||
{ prop: 'vdevPassRate', label: '电压合格率', width: 100 },
|
||||
{ prop: 'flickerPassRate', label: '长时闪变合格率', width: 100 }
|
||||
],
|
||||
totalData: [],
|
||||
device: '',
|
||||
total: undefined, // 总条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.Obtain()
|
||||
},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.onSubmit()
|
||||
},
|
||||
closeHandle() {
|
||||
if (this.view) {
|
||||
this.view = false
|
||||
} else {
|
||||
this.view = 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'
|
||||
}
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
getPwRMpPassRateInfo(this.form).then(res => {
|
||||
this.totalData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.isLoading1 = false
|
||||
})
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row, column) {
|
||||
if (row.column.property == 'monitorSort') {
|
||||
let title = ''
|
||||
this.typeList.forEach(item => {
|
||||
if (item.value == row.row.monitorSort) {
|
||||
title = item.label
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (row.column.property == 'monitorVoltageName') {
|
||||
let title = ''
|
||||
this.VoltageList.forEach(item => {
|
||||
if (item.value == row.row.monitorVoltageName) {
|
||||
title = item.label
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else {
|
||||
return row.row[row.column.property]
|
||||
}
|
||||
},
|
||||
// 重置
|
||||
resetForm() {
|
||||
this.form = {}
|
||||
this.$refs.interval.intervald = 1
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
// 监测点类别
|
||||
var Monitoring = 'Line_Sort'
|
||||
this.typeList = dicData(Monitoring, ['Load_Type'])
|
||||
this.typeList.forEach(item => {
|
||||
this.form.monitorSort.push(item.id)
|
||||
})
|
||||
//电压等级
|
||||
var Voltage = 'Dev_Voltage'
|
||||
this.VoltageList = dicData(Voltage, ['Load_Type'])
|
||||
this.VoltageList.forEach(item => {
|
||||
this.form.voltageLevels.push(item.id)
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
this.formData.deptIndex = data.id
|
||||
},
|
||||
//获取变电站
|
||||
Obtain() {
|
||||
this.form.powerrIds = []
|
||||
getPmsPowerrInfoWithInOrg(this.formData).then(res => {
|
||||
let obj = {}
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
if (!obj[res.data[i].id]) {
|
||||
this.substationData.push(res.data[i])
|
||||
obj[res.data[i].id] = true
|
||||
}
|
||||
}
|
||||
this.substationData.forEach(item => {
|
||||
this.form.powerrIds.push(item.id)
|
||||
})
|
||||
})
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Partslist.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<!-- 区域暂态事件统计 -->
|
||||
<el-tab-pane label="区域超标统计" name="first">
|
||||
<Exceedance v-if="activeName == 'first'"></Exceedance>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 区域暂态指标分类统计 -->
|
||||
<el-tab-pane label="区域超标分类统计" name="third">
|
||||
<classification v-if="activeName == 'third'"></classification>
|
||||
</el-tab-pane>
|
||||
<!-- 暂态事件明细 -->
|
||||
<el-tab-pane label="稳态指标超标明细" name="detailed">
|
||||
<detailed v-if="activeName == 'detailed'"></detailed>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="变电站（换流站）稳态指标超标分类统计表" name="fifth">
|
||||
<SubstationStatistics v-if="activeName == 'fifth'"></SubstationStatistics>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Exceedance from './Total/Exceedance.vue'
|
||||
import classification from './Total/classification.vue'
|
||||
import detailed from './Total/detailed.vue'
|
||||
import SubstationStatistics from './Total/SubstationStatistics.vue'
|
||||
|
||||
export default {
|
||||
components: { Exceedance, classification, detailed, SubstationStatistics },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
activeName: 'first' //区分是那个节点
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 130 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
// if (tab.label == "暂态事件分布统计") {
|
||||
// this.echarts();
|
||||
// this.echarts2();
|
||||
// this.echarts4();
|
||||
// this.iticData();
|
||||
// this.semif();
|
||||
// this.echarts3();
|
||||
// }
|
||||
// this.onSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,240 @@
|
||||
<template>
|
||||
<div id="echart" :style="`width:100%;height:${h};`" ref="fg" v-loading="isLoading1"></div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
trendChartData: {
|
||||
type: Array,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: undefined, //图表焦点校验
|
||||
h: null,
|
||||
isLoading1: false,
|
||||
type: {},
|
||||
deptId: '',
|
||||
dataDate: [],
|
||||
flickerTimes: [], //
|
||||
freqTimes: [],
|
||||
inegTimes: [],
|
||||
inuharmTimes: [],
|
||||
itimes: [],
|
||||
unbalanceTimes: [],
|
||||
vdevTimes: [],
|
||||
vtimes: []
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.province()
|
||||
})
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.zoom = window.devicePixelRatio
|
||||
if (this.zoom == 1) {
|
||||
let heightd = window.sessionStorage.getItem('appheight') - 300
|
||||
this.h = heightd + 'px'
|
||||
}
|
||||
if (this.zoom == 1.25) {
|
||||
let heightd = window.sessionStorage.getItem('appheight') - 405
|
||||
this.h = heightd + 'px'
|
||||
}
|
||||
},
|
||||
//echarts图
|
||||
async province() {
|
||||
this.isLoading1 = true
|
||||
// console.log(this.trendChartData,'1111111111111111111111');
|
||||
this.dataDate = []
|
||||
this.freqTimes = []
|
||||
this.vdevTimes = []
|
||||
this.flickerTimes = []
|
||||
this.vtimes = []
|
||||
this.itimes = []
|
||||
this.inuharmTimes = []
|
||||
this.unbalanceTimes = []
|
||||
this.inegTimes = []
|
||||
this.trendChartData.forEach(item => {
|
||||
this.dataDate.push(item.dataDate)
|
||||
this.freqTimes.push(item.freqTimes)
|
||||
this.vdevTimes.push(item.vdevTimes)
|
||||
this.flickerTimes.push(item.flickerTimes)
|
||||
this.vtimes.push(item.vtimes)
|
||||
this.itimes.push(item.itimes)
|
||||
this.inuharmTimes.push(item.inuharmTimes)
|
||||
this.unbalanceTimes.push(item.unbalanceTimes)
|
||||
this.inegTimes.push(item.inegTimes)
|
||||
})
|
||||
let echarts = require('echarts')
|
||||
let domID1 = document.getElementById('echart')
|
||||
let myChart = echarts.init(domID1)
|
||||
this.isLoading1 = false
|
||||
let option = {
|
||||
color: ['#00bfff', '#00fa9a', '#000080', '#87ceeb', '#daa520', '#d2691e', '#ff6347', '#7b68ee'],
|
||||
// title:{
|
||||
// text: '配网运行指标',
|
||||
// left: "1%",
|
||||
// // top: 5,
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '3%',
|
||||
top: '8%',
|
||||
bottom: '15%'
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
// dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ["line", "bar"] },
|
||||
// //restore: { show: true },
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
// data: ["日均", "累计"],
|
||||
// icon: 'rect',
|
||||
bottom: 10,
|
||||
left: '25%',
|
||||
itemGap: 20,
|
||||
itemWidth: 12,
|
||||
itemHeight: 8
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
// name: '电压等级\n(监测点数)',// 给X轴加单位
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: this.dataDate,
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
},
|
||||
itemStyle: {
|
||||
barWidth: '30'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value'
|
||||
}
|
||||
],
|
||||
dataZoom: [
|
||||
{
|
||||
show: true,
|
||||
height: 12,
|
||||
xAxisIndex: [0],
|
||||
bottom: '8%',
|
||||
start: 0,
|
||||
end: 100,
|
||||
handleIcon:
|
||||
'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
|
||||
handleSize: '110%',
|
||||
handleStyle: {
|
||||
color: '#d3dee5'
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff'
|
||||
},
|
||||
borderColor: '#90979c'
|
||||
},
|
||||
{
|
||||
type: 'inside',
|
||||
show: true,
|
||||
height: 15,
|
||||
start: 0,
|
||||
end: 100
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '频率偏差',
|
||||
type: 'line',
|
||||
data: this.freqTimes
|
||||
},
|
||||
{
|
||||
name: '电压偏差',
|
||||
type: 'line',
|
||||
data: this.vdevTimes
|
||||
},
|
||||
{
|
||||
name: '闪变',
|
||||
type: 'line',
|
||||
data: this.flickerTimes
|
||||
},
|
||||
{
|
||||
name: '谐波电压',
|
||||
type: 'line',
|
||||
data: this.vtimes
|
||||
},
|
||||
{
|
||||
name: '谐波电流',
|
||||
type: 'line',
|
||||
data: this.itimes
|
||||
},
|
||||
{
|
||||
name: '间谐波电压',
|
||||
type: 'line',
|
||||
data: this.inuharmTimes
|
||||
},
|
||||
{
|
||||
name: '三相电压不平衡度',
|
||||
type: 'line',
|
||||
data: this.unbalanceTimes
|
||||
},
|
||||
{
|
||||
name: '负序电流',
|
||||
type: 'line',
|
||||
data: this.inegTimes
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart)
|
||||
// myChart.resize();
|
||||
let _this = this
|
||||
_this.$erd.listenTo(_this.$refs.fg, element => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize()
|
||||
})
|
||||
})
|
||||
window.onresize = function () {
|
||||
myChart.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
.button {
|
||||
float: right;
|
||||
margin-top: 30px;
|
||||
margin-right: 30px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select
|
||||
v-model="form.ids"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择监测点类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Regionalstatistics"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
:formatter="formFilter"
|
||||
>
|
||||
<template v-for="(e, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="e.prop"
|
||||
:title="e.label"
|
||||
:min-width="e.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(val, index) in e.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="val.prop"
|
||||
:title="val.label"
|
||||
:min-width="val.width"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwAllRStatHarmonicOrg } from "@/api/Distributionnetwork/steady-state/steady-state";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: "",
|
||||
input: "",
|
||||
height: null,
|
||||
item: ["", ""],
|
||||
form: {
|
||||
endTime: "",
|
||||
id: "",
|
||||
ids: [],
|
||||
startTime: "",
|
||||
type: "",
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: "orgName", label: "单位", width: 180 },
|
||||
{ prop: "monitorSort", label: "监测点类别", width: 120 },
|
||||
{
|
||||
label: "有效监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "effectiveMeasurementAverage",
|
||||
label: "日均",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "effectiveMeasurementAccrued",
|
||||
label: "累计",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "超标监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "overLimitMeasurementAverage",
|
||||
label: "日均",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "overLimitMeasurementAccrued",
|
||||
label: "累计",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "超标监测点占比(%)",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "harmonicMeasurementRatioAverage",
|
||||
label: "日均",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "harmonicMeasurementRatioAccrued",
|
||||
label: "累计",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "averageOverDay", label: "稳态指标平均超标天数", width: 180 },
|
||||
],
|
||||
totalData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions : [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit();
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 215;
|
||||
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true;
|
||||
|
||||
(this.form.type = this.$refs.interval.intervald);
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.form.startTime = this.item[0];
|
||||
this.form.endTime = this.item[1];
|
||||
// console.log(this.form,'=========
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwAllRStatHarmonicOrg(this.form).then((res) => {
|
||||
if (res.data == [] || res.data == null) {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data;
|
||||
this.total = 0;
|
||||
} else {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data;
|
||||
this.total = this.totalData.length;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row) {
|
||||
// console.log(row);
|
||||
if (row.column.property == "monitorSort") {
|
||||
let title = "";
|
||||
this.typeList.forEach((item) => {
|
||||
if (item.value == row.row.monitorSort) {
|
||||
title = item.label;
|
||||
}
|
||||
});
|
||||
return title;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
// 监测点类别
|
||||
var Monitoring = "Line_Sort";
|
||||
this.typeList = dicData(Monitoring, ["Load_Type"]);
|
||||
this.typeList.forEach((item) => {
|
||||
this.form.ids.push(item.id);
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id;
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Regionalstatistics.exportData({
|
||||
filename: "export", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
</style>
|
||||
@@ -0,0 +1,282 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="变电站名称:">
|
||||
<el-select
|
||||
v-model="form.Ids"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in substationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent"
|
||||
>导出</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="
|
||||
totalData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
|
||||
"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="SubstationStatistics"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
show-overflow
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
show-overflow
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <template v-for="(item, index) in item.children">
|
||||
<vxe-table-column :field="item.prop" :title="item.label" :key="index" ></vxe-table-column>
|
||||
</template> -->
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPwRStatSubstationOrg,
|
||||
getPmsPowerrInfoWithInOrg,
|
||||
} from "@/api/Statistical-analysis/steadyStateIndicators/steadyStateIndicators";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: "",
|
||||
input: "",
|
||||
height: null,
|
||||
item: ["", ""],
|
||||
form: {
|
||||
endTime: "",
|
||||
id: "",
|
||||
startTime: "",
|
||||
type: 0,
|
||||
Ids: [],
|
||||
},
|
||||
formData: {
|
||||
deptIndex: "",
|
||||
manufacturer: [],
|
||||
monitorObjectType: [],
|
||||
monitorState: [],
|
||||
statisticalType: {},
|
||||
voltageLevel: [],
|
||||
upToGrid: "",
|
||||
},
|
||||
isLoading1: false,
|
||||
substationData: [], //变电站名称
|
||||
//区域超标统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: "cityName", label: "单位", width: `120px` },
|
||||
{ prop: "substationName", label: "变电站名称", width: `120px` },
|
||||
{
|
||||
prop: "effectiveMeasurementAccrued",
|
||||
label: "累计有效接入点数",
|
||||
width: `140px`,
|
||||
},
|
||||
{
|
||||
label: "平均超标天数",
|
||||
children: [
|
||||
{ prop: "freqAverageOverDay", label: "频率偏差", width: `120px` },
|
||||
{ prop: "vdevAverageOverDay", label: "电压偏差", width: `120px` },
|
||||
{ prop: "flickerAverageOverDay", label: "长时闪变", width: `120px` },
|
||||
{ prop: "vaverageOverDay", label: "谐波电压", width: `120px` },
|
||||
{ prop: "iaverageOverDay", label: "谐波电流", width: `120px` },
|
||||
{
|
||||
prop: "inuharmAverageOverDay",
|
||||
label: "间谐波电压",
|
||||
width: `120px`,
|
||||
},
|
||||
{
|
||||
prop: "unbalanceAverageOverDay",
|
||||
label: "三相电压不平衡度",
|
||||
width: `140px`,
|
||||
},
|
||||
{ prop: "inegAverageOverDay", label: "负序电流", width: `120px` },
|
||||
],
|
||||
},
|
||||
],
|
||||
totalData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions : [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
this.formData.deptIndex = JSON.parse(
|
||||
window.sessionStorage.getItem("Info")
|
||||
).deptId;
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.Obtain();
|
||||
this.onSubmit();
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 215;
|
||||
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
// transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true;
|
||||
|
||||
(this.form.type = this.$refs.interval.intervald);
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.form.startTime = this.item[0];
|
||||
this.form.endTime = this.item[1];
|
||||
// console.log(this.form,'===============================');
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRStatSubstationOrg(this.form).then((res) => {
|
||||
if (res.data == []) {
|
||||
this.total = 0;
|
||||
} else {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data;
|
||||
this.total = this.totalData.length;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id;
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
//获取变电站
|
||||
Obtain() {
|
||||
this.form.Ids = [];
|
||||
getPmsPowerrInfoWithInOrg(this.formData).then((res) => {
|
||||
// console.log(res,'=============================');
|
||||
// this.substationData=res.data
|
||||
// let arr=this.substationData
|
||||
// arr=[...new Set(arr)]
|
||||
// console.log(arr);
|
||||
let obj = {};
|
||||
for (var i = 0; i < res.data.length; i++) {
|
||||
if (!obj[res.data[i].id]) {
|
||||
this.substationData.push(res.data[i]);
|
||||
obj[res.data[i].id] = true;
|
||||
}
|
||||
}
|
||||
//console.log(this.substationData, "================");
|
||||
this.substationData.forEach((item) => {
|
||||
this.form.Ids.push(item.id);
|
||||
});
|
||||
});
|
||||
},
|
||||
//重置
|
||||
Reset() {
|
||||
this.$refs.area.form.valueTitle = "全国";
|
||||
this.$refs.interval.intervald = 1;
|
||||
this.form.substationName = "";
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.SubstationStatistics.exportData({
|
||||
filename: "export", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
</style>
|
||||
@@ -0,0 +1,533 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select v-model="form.ids" clearable multiple collapse-tags placeholder="请选择监测点类别">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Classifiedstatistics"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row[item.prop] == null ? '/' : scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row[item.prop] == null ? '/' : scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 70, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRStatSubstation } from '@/api/Distributionnetwork/steady-state/steady-state'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
item: ['', ''],
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
ids: [],
|
||||
startTime: '',
|
||||
type: ''
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'orgName', label: '单位', width: 180 },
|
||||
{ prop: 'monitorSort', label: '监测点类别', width: 120 },
|
||||
{
|
||||
label: '有效监测点数',
|
||||
children: [
|
||||
{ prop: 'effectiveMeasurementAverage', label: '日均', width: 70 },
|
||||
{ prop: 'effectiveMeasurementAccrued', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '超标监测点数',
|
||||
children: [
|
||||
{ prop: 'harmonicMeasurementAverage', label: '日均', width: 70 },
|
||||
{ prop: 'harmonicMeasurementAccrued', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '频率偏差',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued', label: '累计', width: 70, width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued', label: '累计', width: 70, width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压偏差',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage1', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued1', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage1', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued1', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage1', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued1', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage1', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued1', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay1', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '长时闪变',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage2', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued2', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage2', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued2', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage2', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued2', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage2', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued2', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay2', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电流',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage4', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued4', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage4', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued4', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage4', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued4', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage4', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued4', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay4', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '谐波电压',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage3', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued3', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage3', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued3', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage3', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued3', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage3', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued3', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay3', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '间谐波电压',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage5', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued5', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage5', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued5', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage5', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued5', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage5', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued5', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay5', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '三相电压不平衡度',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage6', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued6', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage6', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued6', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage6', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued6', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage6', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued6', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay6', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '负序电流',
|
||||
children: [
|
||||
{
|
||||
prop: 'monthVoltage',
|
||||
label: '监测点数',
|
||||
children: [
|
||||
{ prop: 'taverage7', label: '日均', width: 70 },
|
||||
{ prop: 'taccrued7', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '占比',
|
||||
children: [
|
||||
{ prop: 'oaverage7', label: '日均', width: 70 },
|
||||
{ prop: 'oaccrued7', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '同比',
|
||||
children: [
|
||||
{ prop: 'chainAverage7', label: '日均', width: 70 },
|
||||
{ prop: 'chainAccrued7', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{
|
||||
prop: 'onlineMonitoring',
|
||||
label: '环比',
|
||||
children: [
|
||||
{ prop: 'sameAverage7', label: '日均', width: 70 },
|
||||
{ prop: 'sameAccrued7', label: '累计', width: 70 }
|
||||
]
|
||||
},
|
||||
{ prop: 'averageOverDay7', label: '平均超标天数', width: 120 }
|
||||
]
|
||||
}
|
||||
// { prop: "onlineMonitoring", label: "稳态指标平均超标天数", width: 120, width: 180 },
|
||||
],
|
||||
totalData: [],
|
||||
device: '',
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.onSubmit()
|
||||
},
|
||||
transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true
|
||||
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRStatSubstation(this.form).then(res => {
|
||||
if (res.data == [] || res.data == null) {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = 0
|
||||
} else {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = this.totalData.length
|
||||
}
|
||||
})
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
var Monitoring = 'Line_Sort'
|
||||
this.typeList = dicData(Monitoring, ['Load_Type'])
|
||||
this.typeList.forEach(item => {
|
||||
this.form.ids.push(item.id)
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
},
|
||||
cellStyle(row) {
|
||||
this.typeList.forEach(item => {
|
||||
if (item.value == row.row.monitorSort) {
|
||||
row.row.monitorSort = item.label
|
||||
}
|
||||
})
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Classifiedstatistics.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,722 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
id="zbmx"
|
||||
:inline="true"
|
||||
ref="formf"
|
||||
:model="form"
|
||||
class="demo-form-inline"
|
||||
>
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-refresh-right"
|
||||
@click="resetForm"
|
||||
>重置</el-button
|
||||
> -->
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle"
|
||||
>条件筛选<i
|
||||
:class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
|
||||
></i
|
||||
></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" label-width="110px">
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model.trim="form.voltageLevels"
|
||||
placeholder="请选择"
|
||||
clearable
|
||||
multiple
|
||||
style="width: 225px"
|
||||
collapse-tags
|
||||
>
|
||||
<el-option
|
||||
v-for="item in VoltageList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="监测点名称:">
|
||||
<el-input
|
||||
v-model.trim="form.monitorName"
|
||||
placeholder="监测点名称"
|
||||
clearable
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item> -->
|
||||
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select
|
||||
v-model="form.monitorSort"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择监测点类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="Exceedancedetails"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<vxe-table-colgroup
|
||||
v-for="(item, index) in tableHeaderTotal"
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="item.label == '指标趋势图'"
|
||||
type="primary"
|
||||
size="small"
|
||||
style="color: blue; text-decoration: underline; cursor: pointer"
|
||||
@click="trendChartFn(scope.row)"
|
||||
>查看</span
|
||||
>
|
||||
<!-- <span v-if="item.label == '指标趋势图'">
|
||||
<vxe-button
|
||||
status="primary"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="trendChartFn(scope.row)"
|
||||
>查看</vxe-button
|
||||
></span
|
||||
> -->
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<vxe-table-column
|
||||
v-for="(item, index) in item.children"
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<!-- <template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
:field="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template> -->
|
||||
</vxe-table-column>
|
||||
</vxe-table-colgroup>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageNum"
|
||||
:page-sizes="[20, 30, 40, 80, 100]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="趋势图"
|
||||
:visible.sync="trendChart"
|
||||
width="70%"
|
||||
>
|
||||
<Echarts :trendChartData="trendChartData" ref="echarts"></Echarts>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getPwRMpPartHarmonicDetail,
|
||||
getRMpPartHarmonicDetailIcon,
|
||||
} from "@/api/Distributionnetwork/steady-state/steady-state";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Echarts from "./Echarts.vue";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval, Echarts },
|
||||
data() {
|
||||
return {
|
||||
fvh: "",
|
||||
vh: null,
|
||||
date: "",
|
||||
input: "",
|
||||
height: null,
|
||||
IdData: {},
|
||||
item: ["", ""],
|
||||
form: {
|
||||
endTime: "",
|
||||
id: "",
|
||||
startTime: "",
|
||||
monitorName: "",
|
||||
monitorSort: [],
|
||||
voltageLevels: [],
|
||||
powerrIds: [],
|
||||
type: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
classificationData: [],
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
VoltageList: [], //电压等级数据
|
||||
isLoading1: false,
|
||||
trendChart: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: "orgName", label: "所属单位", width: 180 },
|
||||
{ prop: "powerrName", label: "所属变电站", width: 120 },
|
||||
{ prop: "monitorVoltageName", label: "监测点电压等级", width: 160 },
|
||||
{ prop: "measurementPointName", label: "监测点名称", width: 120 },
|
||||
{ prop: "measurementPointId", label: "监测点编号", width: 120 },
|
||||
{ prop: "measurementOverDay", label: "监测点总超标天数", width: 160 },
|
||||
{ prop: "onlineMonitoring", label: "指标趋势图", width: 120 },
|
||||
{ prop: "freqOverDay", label: "频率偏差", width: 120 },
|
||||
{
|
||||
label: "电压偏差",
|
||||
children: [
|
||||
{
|
||||
prop: "vdevUpOverDay",
|
||||
label: "上偏差",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "vdevLowOverDay",
|
||||
label: "下偏差",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "vdevOverDay",
|
||||
label: "合计",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "vthdOverDay", label: "电压总谐波畸变率", width: 160 },
|
||||
{ prop: "voverDay", label: "谐波电压", width: 120 },
|
||||
{ prop: "ioverDay", label: "谐波电流", width: 120 },
|
||||
{
|
||||
label: "谐波电压含有率",
|
||||
children: [
|
||||
{
|
||||
prop: "v2OverDay",
|
||||
label: "2次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v3OverDay",
|
||||
label: "3次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v4OverDay",
|
||||
label: "4次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v5OverDay",
|
||||
label: "5次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v6OverDay",
|
||||
label: "6次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v7OverDay",
|
||||
label: "7次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v8OverDay",
|
||||
label: "8次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v9OverDay",
|
||||
label: "9次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v10OverDay",
|
||||
label: "10次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v11OverDay",
|
||||
label: "11次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v12OverDay",
|
||||
label: "12次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v13OverDay",
|
||||
label: "13次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v14OverDay",
|
||||
label: "14次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v15OverDay",
|
||||
label: "15次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v16OverDay",
|
||||
label: "16次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v17OverDay",
|
||||
label: "17次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v18OverDay",
|
||||
label: "18次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v19OverDay",
|
||||
label: "19次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v20OverDay",
|
||||
label: "20次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v21OverDay",
|
||||
label: "21次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v22OverDay",
|
||||
label: "22次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v23OverDay",
|
||||
label: "23次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v24OverDay",
|
||||
label: "24次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "v25OverDay",
|
||||
label: "25次",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "谐波电流幅值",
|
||||
children: [
|
||||
{
|
||||
prop: "i2OverDay",
|
||||
label: "2次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i3OverDay",
|
||||
label: "3次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i4OverDay",
|
||||
label: "4次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i5OverDay",
|
||||
label: "5次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i6OverDay",
|
||||
label: "6次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i7OverDay",
|
||||
label: "7次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i8OverDay",
|
||||
label: "8次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i9OverDay",
|
||||
label: "9次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i10OverDay",
|
||||
label: "10次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i11OverDay",
|
||||
label: "11次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i12OverDay",
|
||||
label: "12次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i13OverDay",
|
||||
label: "13次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i14OverDay",
|
||||
label: "14次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i15OverDay",
|
||||
label: "15次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i16OverDay",
|
||||
label: "16次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i17OverDay",
|
||||
label: "17次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i18OverDay",
|
||||
label: "18次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i19OverDay",
|
||||
label: "19次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i20OverDay",
|
||||
label: "20次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i21OverDay",
|
||||
label: "21次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i22OverDay",
|
||||
label: "22次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i23OverDay",
|
||||
label: "23次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i24OverDay",
|
||||
label: "24次",
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
prop: "i25OverDay",
|
||||
label: "25次",
|
||||
width: 80,
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "inuharmOverDay", label: "间谐波电压含有率", width: 160 },
|
||||
{ prop: "unbalanceOverDay", label: "三相电压不平衡度", width: 160 },
|
||||
{ prop: "inegOverDay", label: "负序电流", width: 120 },
|
||||
{ prop: "flickerOverDay", label: "长时闪变", width: 120 },
|
||||
],
|
||||
totalData: [],
|
||||
trendChartData: [], //趋势图
|
||||
device: "",
|
||||
view:false,
|
||||
total: undefined, // 总条数
|
||||
timeOptions : [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.fvh = document.getElementById("zbmx").offsetHeight;
|
||||
//console.log("++++++++++++++++++++++",this.fvh)
|
||||
this.device = window.devicePixelRatio;
|
||||
|
||||
this.onSubmit();
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 215;
|
||||
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val;
|
||||
this.onSubmit();
|
||||
},
|
||||
closeHandle() {
|
||||
if (this.view) {
|
||||
this.view = false;
|
||||
} else {
|
||||
this.view = 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";
|
||||
}
|
||||
},
|
||||
transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true;
|
||||
|
||||
(this.form.type = this.$refs.interval.intervald);
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.form.startTime = this.item[0];
|
||||
this.form.endTime = this.item[1];
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRMpPartHarmonicDetail(this.form).then((res) => {
|
||||
this.totalData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.isLoading1 = false;
|
||||
});
|
||||
},
|
||||
|
||||
//趋势图显示
|
||||
trendChartFn(row) {
|
||||
// console.log(row);
|
||||
this.trendChart = true;
|
||||
let form = {
|
||||
id: row.measurementPointId,
|
||||
startTime: this.form.startTime,
|
||||
endTime: this.form.endTime,
|
||||
};
|
||||
getRMpPartHarmonicDetailIcon(form).then((res) => {
|
||||
this.trendChartData = res.data;
|
||||
setTimeout(() => {
|
||||
this.$refs.echarts.province();
|
||||
}, 100);
|
||||
});
|
||||
},
|
||||
// 重置
|
||||
resetForm() {
|
||||
this.form = {};
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
// 监测点类别
|
||||
var Monitoring = "Line_Sort";
|
||||
this.typeList = dicData(Monitoring, ["Load_Type"]);
|
||||
this.typeList.forEach((item) => {
|
||||
this.form.monitorSort.push(item.id);
|
||||
});
|
||||
//电压等级
|
||||
var Voltage = "Dev_Voltage";
|
||||
this.VoltageList = dicData(Voltage, ["Load_Type"]);
|
||||
this.VoltageList.forEach((item) => {
|
||||
this.form.voltageLevels.push(item.id);
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id;
|
||||
},
|
||||
cellStyle(row) {
|
||||
this.VoltageList.forEach((item) => {
|
||||
if (row.row.monitorVoltageName == item.id) {
|
||||
row.row.monitorVoltageName = item.label;
|
||||
}
|
||||
});
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Exceedancedetails.exportData({
|
||||
filename: "export", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
::v-deep .vxe-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
::v-deep .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
.el-form-item__content {
|
||||
flex: 1 !important;
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.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>
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 台账 -->
|
||||
<StandingBook v-show="flag" @ViewReport="ViewReport" />
|
||||
<!-- 报表 --5-->
|
||||
<TrendChart v-if="!flag" :reportID="reportID" @close='flag=true'/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TrendChart from "./components/TrendChart";
|
||||
import StandingBook from "./components/StandingBook";
|
||||
export default {
|
||||
components: { TrendChart, StandingBook },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
flag: true,
|
||||
reportID: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
ViewReport(id) {
|
||||
this.reportID = id;
|
||||
this.flag = false;
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
@@ -0,0 +1,440 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select
|
||||
v-model="form.monitorSort"
|
||||
clearable
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择监测点类别"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in typeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="onSubmit"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent"
|
||||
>导出</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="classification"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row[item.prop] == null">/</span>
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row[item.prop] == null">/</span>
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row[item.prop] == null">/</span>
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRStatOrgClassified } from "@/api/Distributionnetwork/transient/transient";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: "",
|
||||
input: "",
|
||||
height: null,
|
||||
item: ["", ""],
|
||||
form: {
|
||||
monitorSort: [], //监测点类别
|
||||
endTime: "",
|
||||
startTime: "",
|
||||
id: "",
|
||||
type: "",
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: "orgName", label: "单位", width: "180" },
|
||||
{ prop: "measurementTypeClass", label: "监测点类别", width: "120" },
|
||||
{
|
||||
prop: "Effectiveaccess",
|
||||
label: "有效接入监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "effectiveMeasurementAverage",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "effectiveMeasurementAccrued",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "Transientmonitoring",
|
||||
label: "暂态监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "eventMeasurementAverage",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "eventMeasurementAccrued",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "暂态监测点占比(%)",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "eventMeasurementRatioAverage",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "eventMeasurementRatioAccrued",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "eventCount", label: "暂态发生次数", width: "120" },
|
||||
{ prop: "eventFreq", label: "暂态发生频次", width: "120" },
|
||||
{
|
||||
label: "短时中断",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
label: "监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayShortInterruptions",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeShortInterruptions",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "占比(%)",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayShortInterruptionsProportion",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeShortInterruptionsProportion",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
prop: "shortInterruptionsCount",
|
||||
label: "暂态发生次数",
|
||||
width: "120",
|
||||
},
|
||||
{
|
||||
prop: "shortInterruptionsFreq",
|
||||
label: "暂态发生频次",
|
||||
width: "120",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "电压暂升",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
label: "监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayVoltageRise",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeVoltageRise",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "占比(%)",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayVoltageRiseProportion",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeVoltageRiseProportion",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "voltageRiseCount", label: "暂态发生次数", width: "120" },
|
||||
{ prop: "voltageRiseFreq", label: "暂态发生频次", width: "120" },
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "电压暂降",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
label: "监测点数",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayVoltageDip",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeVoltageDip",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "占比(%)",
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: "dayVoltageDipProportion",
|
||||
label: "日均",
|
||||
width: "100",
|
||||
},
|
||||
{
|
||||
prop: "cumulativeVoltageDipProportion",
|
||||
label: "累计",
|
||||
width: "100",
|
||||
},
|
||||
],
|
||||
},
|
||||
{ prop: "voltageDipCount", label: "暂态发生次数", width: "120" },
|
||||
{ prop: "voltageDipFreq", label: "暂态发生频次", width: "120" },
|
||||
],
|
||||
},
|
||||
],
|
||||
totalData: [],
|
||||
device: "",
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem("Info")).deptId;
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 215;
|
||||
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
var code = "Line_Sort";
|
||||
this.typeList = dicData(code, []);
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
// console.log(`每页 ${val} 条`);
|
||||
this.currentPage = 1;
|
||||
this.pageSize = val;
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
// console.log(`当前页: ${val}`);
|
||||
this.currentPage = val;
|
||||
},
|
||||
transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true;
|
||||
|
||||
(this.form.type = this.$refs.interval.intervald);
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.form.startTime = this.item[0];
|
||||
this.form.endTime = this.item[1];
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRStatOrgClassified(this.form).then((res) => {
|
||||
if (res.data == [] || res.data == null) {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data;
|
||||
this.total = 0;
|
||||
} else {
|
||||
this.isLoading1 = false;
|
||||
this.totalData = res.data;
|
||||
this.total = this.totalData.length;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id;
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.classification.exportData({
|
||||
filename: "export", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
::v-deep .vxe-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
::v-deep .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
.el-form-item__content {
|
||||
flex: 1 !important;
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 表格 -->
|
||||
<div v-if="view">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点:">
|
||||
<el-input
|
||||
v-model="form.monitorName"
|
||||
clearable
|
||||
placeholder="请填写内容"
|
||||
onkeyup="value = value.replace(/[@&<>/?#$%&*]/,'')"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
class="boxing"
|
||||
icon="el-icon-download"
|
||||
@click="fn"
|
||||
>存在波形</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="PlatformData"
|
||||
:height="vh"
|
||||
size="mini"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
ref="EventDetails"
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
@checkbox-all="selectAllChangeEvent1"
|
||||
@checkbox-change="selectChangeEvent1"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<vxe-table-column type="checkbox" width="55"></vxe-table-column>
|
||||
<template v-for="(item, index) in tableHeaderPlatform">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:key="index"
|
||||
show-overflow
|
||||
:min-width="item.width"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
v-if="item.prop == 'Waveform'"
|
||||
@click="queryBxView(scope.row)"
|
||||
>{{ scope.row[item.prop] == 0 ? "不存在波形" : "存在波形" }}
|
||||
</el-button> -->
|
||||
<!-- <span v-if="item.prop == 'Waveform'" style="color: blue; text-decoration: underline; cursor: pointer;" @click="queryBxView(scope.row)">波形查看</span> -->
|
||||
<!-- <vxe-button v-if="item.prop == 'Waveform'" status="button" @click="queryBxView(scope.row)" >波形查看</vxe-button > -->
|
||||
<!-- <span v-else>{{ scope.row[item.prop] }}</span> -->
|
||||
<!-- <el-button v-if="scope.row.fileFlag == 0" type="primary" style="color: #000; background: #ccc;">暂无波形</el-button> -->
|
||||
<!-- <el-button
|
||||
v-if="item.prop == 'Waveform'"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-view"
|
||||
@click="queryBxView(scope.row)"
|
||||
>波形查看</el-button>
|
||||
<span v-else> {{ scope.row[item.prop] }}</span> -->
|
||||
<span v-if="item.prop === 'duration'">
|
||||
{{ scope.row[item.prop] / 1000 }}
|
||||
</span>
|
||||
<span v-else>{{ scope.row[item.prop] }}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="form.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
<el-form v-if="view2" :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="值类型选择:">
|
||||
<el-select v-if="view2" v-model="value" @change="changeView" placeholder="请选择值类型">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-button
|
||||
v-if="view2"
|
||||
@click="backbxlb"
|
||||
type="primary"
|
||||
class="el-icon-refresh-right"
|
||||
style="float: right"
|
||||
>
|
||||
返回
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-tabs :style="`height:${vhh}`" 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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { getSubstationData, getShapeData } from "@/api/TransientStateIndex";
|
||||
import {
|
||||
getPwRmpEventDetail,
|
||||
getTransientAnalyseWave,
|
||||
getTransientAnalyseWaves
|
||||
} from '@/api/Distributionnetwork/transient/transient'
|
||||
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
|
||||
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
// import boxis from "@/assets/commjs/boxi";
|
||||
import transientlistVue from '@/views/Event-boot/Region/transientlist.vue'
|
||||
export default {
|
||||
components: { rmsboxi, shushiboxi, Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
boxoList: {},
|
||||
view: true,
|
||||
view2: false,
|
||||
bxecharts: undefined,
|
||||
wp: {},
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
vhh: '',
|
||||
height: null,
|
||||
dialogVisible: false,
|
||||
item: ['', ''],
|
||||
form: {
|
||||
// monitorSort: [], //监测点类别
|
||||
monitorName: '', //监测点
|
||||
endTime: '',
|
||||
startTime: '',
|
||||
id: '',
|
||||
type: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
//电压等级
|
||||
Voltagelevel: [],
|
||||
//暂态指标
|
||||
Sagindex: [],
|
||||
//里层默认波形tab标签页
|
||||
bxactiveName: 'ssbx',
|
||||
value: 1,
|
||||
showBoxi: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: '一次值'
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: '二次值'
|
||||
}
|
||||
],
|
||||
|
||||
isLoading: false,
|
||||
//暂态分布明细
|
||||
tableHeaderPlatform: [
|
||||
{ prop: 'orgName', label: '单位', width: 140 },
|
||||
{ prop: 'subName', label: '所属变电站', width: 160 },
|
||||
{ prop: 'powerDistributionArea', label: '所属台区', width: 140 },
|
||||
{ prop: 'powerClient', label: '用户名称', width: 180 },
|
||||
{ prop: 'monitorSort', label: '监测点类别', width: 180 },
|
||||
{
|
||||
prop: 'monitorVoltageLevel',
|
||||
label: '监测点电压等级(kV)',
|
||||
width: 180
|
||||
},
|
||||
{ prop: 'monitorName', label: '监测点名称', width: 150 },
|
||||
{ prop: 'startTime', label: '暂态事件发生时间', width: 180 },
|
||||
{ prop: 'eventType', label: '暂态事件类型', width: 180 },
|
||||
{ prop: 'featureAmplitude', label: '特征幅值(%)', width: 180 },
|
||||
{ prop: 'duration', label: '持续时间(秒)', width: 180 }
|
||||
// { prop: "Waveform", label: "波形显示", width: 180 },
|
||||
],
|
||||
PlatformData: [],
|
||||
device: '',
|
||||
total: undefined, // 总条数
|
||||
multipleSelection: [],
|
||||
timeOptions : [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.getclassificationData()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
|
||||
// this.vh2 = window.sessionStorage.getItem('appheight') - 205;
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 165
|
||||
this.vhh = window.sessionStorage.getItem('appheight') - 140 + 'px'
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
|
||||
this.bxecharts = window.sessionStorage.getItem('appheight') - 210 + 'px'
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//电压等级
|
||||
this.Voltagelevel = dicData('Dev_Voltage', [])
|
||||
//暂态指标
|
||||
this.Sagindex = dicData('Event_Statis', [])
|
||||
},
|
||||
changeView() {
|
||||
this.showBoxi = false
|
||||
setTimeout(() => {
|
||||
this.showBoxi = true
|
||||
}, 0)
|
||||
},
|
||||
//里层波形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
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 165 + 'px'
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.boxi = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.isLoading = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
getPwRmpEventDetail(this.form).then(res => {
|
||||
// console.log("暂态事件分布明细:", res);
|
||||
this.PlatformData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
// // 表格多选
|
||||
// handleSelectionChange(val) {
|
||||
// this.multipleSelection = val;
|
||||
// },
|
||||
selectAllChangeEvent1(row) {
|
||||
this.multipleSelection = row.records
|
||||
// console.log(this.multipleSelection);
|
||||
},
|
||||
selectChangeEvent1(row) {
|
||||
this.multipleSelection1 = row.records
|
||||
// console.log(this.multipleSelection1);
|
||||
},
|
||||
|
||||
//波形查看触发按钮
|
||||
async queryBxView(e) {
|
||||
this.view = false
|
||||
this.view2 = true
|
||||
this.boxoList = e
|
||||
let from = {
|
||||
lineId: this.boxoList.eventId,
|
||||
systemType: 1,
|
||||
type: 1
|
||||
}
|
||||
await getTransientAnalyseWaves(from).then(res => {
|
||||
// console.log(res);
|
||||
this.wp = res.data
|
||||
setTimeout(() => {
|
||||
this.view = false
|
||||
this.view2 = true
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
}, 0)
|
||||
// this.initWaves()
|
||||
})
|
||||
//调取波形图
|
||||
this.$nextTick(() => {})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
},
|
||||
cellStyle(row) {
|
||||
// console.log(row,'================');
|
||||
// if(row.row.monitoringPoint=='Ⅱ类监测点' || row.row.monitoringPoint=='Ⅲ类监测点'){
|
||||
// row.row.substation = '/'
|
||||
// }
|
||||
// if(row.row.monitoringPoint=='Ⅰ类监测点' || row.row.monitoringPoint=='Ⅲ类监测点'){
|
||||
// row.row.platform = '/'
|
||||
// }
|
||||
// if(row.row.monitoringPoint=='Ⅱ类监测点' || row.row.monitoringPoint=='Ⅱ类监测点'){
|
||||
// row.row.username = '/'
|
||||
// }
|
||||
// if(row.columnIndex==11){
|
||||
// row.row.duration=row.row.duration/1000
|
||||
// }
|
||||
this.Voltagelevel.forEach(item => {
|
||||
if (item.value == row.row.monitorVoltageLevel) {
|
||||
row.row.monitorVoltageLevel = item.label
|
||||
} else {
|
||||
row.row.monitorVoltageLevel = ''
|
||||
}
|
||||
})
|
||||
this.Sagindex.forEach(item => {
|
||||
if (item.value == row.row.eventType) {
|
||||
row.row.eventType = item.label
|
||||
}
|
||||
})
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.EventDetails.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<!-- 区域暂态事件统计 -->
|
||||
<el-tab-pane label="ITIC曲线" name="first">
|
||||
<ITIC v-if="activeName == 'first'"></ITIC>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 区域暂态指标分类统计表 -->
|
||||
<el-tab-pane label="SEMI F47曲线" name="second">
|
||||
<SEMIF47 v-if="activeName == 'second'"></SEMIF47>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ITIC from './curve/ITIC.vue'
|
||||
import SEMIF47 from './curve/SEMIF47.vue'
|
||||
// import ClassifiedStatistics from "./Indicatorstatistics/ClassifiedStatistics.vue"
|
||||
|
||||
export default {
|
||||
components: { ITIC, SEMIF47 },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
activeName: 'first' //区分是那个节点
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 143 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
// if (tab.label == "暂态事件分布统计") {
|
||||
// this.echarts();
|
||||
// this.echarts2();
|
||||
// this.echarts4();
|
||||
// this.iticData();
|
||||
// this.semif();
|
||||
// this.echarts3();
|
||||
// }
|
||||
// this.onSubmit();
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
</style>
|
||||
@@ -0,0 +1,286 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类别:">
|
||||
<el-select v-model="form.monitorSort" clearable multiple collapse-tags placeholder="请选择监测点类别">
|
||||
<el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
stripe
|
||||
size="mini"
|
||||
border
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
ref="Eventstatistics"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:cell-style="cellStyle"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRStatOrg } from '@/api/Distributionnetwork/transient/transient'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
item: ['', ''],
|
||||
form: {
|
||||
monitorSort: [], //监测点类别
|
||||
endTime: '',
|
||||
startTime: '',
|
||||
id: '',
|
||||
type: ''
|
||||
},
|
||||
//监测点类别数据
|
||||
typeList: [],
|
||||
VoltageList: [], //电压等级数据
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'orgName', label: '单位', width: 180 },
|
||||
{ prop: 'monitorSort', label: '监测点类别', width: 120 },
|
||||
{
|
||||
label: '有效接入监测点数',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'effectiveMeasurementAverage',
|
||||
label: '日均',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: 'effectiveMeasurementAccrued',
|
||||
label: '累计',
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '监测到暂态事件监测点数',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'eventMeasurementAverage',
|
||||
label: '日均',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: 'eventMeasurementAccrued',
|
||||
label: '累计',
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '监测到暂态事件监测点占比(%)',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'eventMeasurementRatioAverage',
|
||||
label: '日均',
|
||||
width: 110
|
||||
},
|
||||
{
|
||||
prop: 'eventMeasurementRatioAccrued',
|
||||
label: '累计',
|
||||
width: 110
|
||||
}
|
||||
]
|
||||
},
|
||||
{ prop: 'eventCount', label: '暂态发生次数', width: 120 },
|
||||
{ prop: 'eventFreq', label: '暂态发生频次', width: 120 }
|
||||
],
|
||||
totalData: [],
|
||||
device: '',
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.getclassificationData()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
var code = 'Line_Sort'
|
||||
this.typeList = dicData(code, [])
|
||||
this.typeList.forEach(item => {
|
||||
this.form.monitorSort.push(item.id)
|
||||
})
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.onSubmit()
|
||||
},
|
||||
// transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRStatOrg(this.form).then(res => {
|
||||
if (res.data == [] || res.data == null) {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = 0
|
||||
} else {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = this.totalData.length
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
},
|
||||
cellStyle(row) {
|
||||
if (row.row.monitorSort == 'Ⅱ类监测点' || row.row.monitorSort == 'Ⅲ类监测点') {
|
||||
row.row.eventMeasurementRatioAverage = '/'
|
||||
row.row.eventMeasurementRatioAccrued = '/'
|
||||
row.row.eventFreq = '/'
|
||||
}
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.Eventstatistics.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
::v-deep .vxe-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
::v-deep .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
.el-form-item__content {
|
||||
flex: 1 !important;
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col>
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<!-- 区域暂态事件统计 -->
|
||||
<el-tab-pane label="区域暂态事件统计" name="first">
|
||||
<EventStatistics v-if="activeName == 'first'"></EventStatistics>
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 区域暂态指标分类统计 -->
|
||||
<el-tab-pane label="区域暂态指标分类统计" name="third">
|
||||
<ClassifiedStatistics
|
||||
v-if="activeName == 'third'"
|
||||
></ClassifiedStatistics>
|
||||
</el-tab-pane>
|
||||
<!-- 变电站暂态指标分类统计表 -->
|
||||
<el-tab-pane
|
||||
label="变电站暂态指标分类统计表"
|
||||
name="Substationstatistics"
|
||||
>
|
||||
<Substationstatistics
|
||||
v-if="activeName == 'Substationstatistics'"
|
||||
></Substationstatistics>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
// import { tableheight } from "@/assets/commjs/common";
|
||||
import EventStatistics from "./EventStatistics.vue";
|
||||
import ClassifiedStatistics from "./ClassifiedStatistics.vue";
|
||||
import Substationstatistics from "./Substationstatistics.vue";
|
||||
|
||||
export default {
|
||||
components: { EventStatistics, ClassifiedStatistics, Substationstatistics },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: "",
|
||||
input: "",
|
||||
height: null,
|
||||
activeName: "first", //区分是那个节点
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 143 + "px";
|
||||
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// if (tab.label == "暂态事件分布统计") {
|
||||
// this.echarts();
|
||||
// this.echarts2();
|
||||
// this.echarts4();
|
||||
// this.iticData();
|
||||
// this.semif();
|
||||
// this.echarts3();
|
||||
// }
|
||||
// this.onSubmit();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
::v-deep .el-table.el-table--small td {
|
||||
height: 40px;
|
||||
}
|
||||
::v-deep .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,288 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item label="变电站名称:">
|
||||
<el-input v-model="form.subName" clearable placeholder="请填写内容"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-refresh" @click="Reset">重置</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<vxe-table
|
||||
:data="totalData"
|
||||
:height="vh"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
size="mini"
|
||||
ref="substation"
|
||||
v-loading="isLoading1"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTotal">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
show-overflow-tooltip
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-colgroup
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
>
|
||||
<template v-for="(item, index) in item.children">
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
:field="item.prop"
|
||||
:title="item.label"
|
||||
:min-width="item.width"
|
||||
:key="index"
|
||||
></vxe-table-column>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table-colgroup>
|
||||
</template>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwRStatSubstation } from '@/api/Statistical-analysis/transientIndicators/transientIndicators'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
date: '',
|
||||
input: '',
|
||||
height: null,
|
||||
substationName: '',
|
||||
item: ['', ''],
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
startTime: '',
|
||||
type: 0,
|
||||
subName: ''
|
||||
},
|
||||
isLoading1: false,
|
||||
//暂态事件统计
|
||||
tableHeaderTotal: [
|
||||
{ prop: 'deptName', label: '单位', width: 180 },
|
||||
{ prop: 'substationName', label: '变电站名称', width: 180 },
|
||||
{
|
||||
label: '有效接入监测点数',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'effectiveMeasurementAverage',
|
||||
label: '日均',
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
prop: 'effectiveMeasurementAccrued',
|
||||
label: '累计',
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
},
|
||||
{ prop: 'eventCount', label: '暂态发生次数', width: 120 },
|
||||
{ prop: 'eventFreq', label: '暂态发生频次', width: 120 },
|
||||
{
|
||||
label: '短时中断',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'interruptCount',
|
||||
label: '次数',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
prop: 'interruptFreq',
|
||||
label: '频次',
|
||||
width: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压暂升',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'swellCount',
|
||||
label: '次数',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
prop: 'swellFreq',
|
||||
label: '频次',
|
||||
width: 80
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: '电压暂降',
|
||||
children: [
|
||||
// { prop: "monthVoltage", label: "谐波电流超标监测点占比(%)" ,width:200},
|
||||
{
|
||||
prop: 'sagCount',
|
||||
label: '次数',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
prop: 'sagFreq',
|
||||
label: '频次',
|
||||
width: 80
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
totalData: [],
|
||||
device: '',
|
||||
currentPage: 1, // 当前页码
|
||||
total: undefined, // 总条数
|
||||
pageSize: 20, // 每页的数据条数
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
mounted() {
|
||||
this.item = this.$refs.interval.timeValue
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 215
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.currentPage = val
|
||||
this.onSubmit()
|
||||
},
|
||||
// transient() {},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading1 = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
//方法调用获取暂态事件统计数据接口
|
||||
getPwRStatSubstation(this.form).then(res => {
|
||||
if (res.data == []) {
|
||||
this.total = 0
|
||||
} else {
|
||||
this.isLoading1 = false
|
||||
this.totalData = res.data
|
||||
this.total = this.totalData.length
|
||||
}
|
||||
})
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
},
|
||||
//重置
|
||||
Reset() {
|
||||
this.$refs.area.form.valueTitle = '全国'
|
||||
this.$refs.interval.intervald = 1
|
||||
this.form.sunName = ''
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.substation.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.totalData // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
::v-deep .vxe-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-row {
|
||||
width: 100%;
|
||||
}
|
||||
::v-deep .form {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
width: 48%;
|
||||
.el-form-item__content {
|
||||
flex: 1 !important;
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__inner {
|
||||
width: 100% !important;
|
||||
}
|
||||
.el-date-editor {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,211 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="queryFn">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="24" :style="'height:' + vhh + ';overflow:hidden'">
|
||||
<el-col :span="8">
|
||||
<!-- 剩余电压表格 -->
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="voltageData"
|
||||
:height="height"
|
||||
border
|
||||
align="center"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderVoltage">
|
||||
<el-table-column
|
||||
align="center"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:width="item.width"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<!-- echarts图1 -->
|
||||
<el-col :span="8">
|
||||
<ITICechartsLeft :form="form" ref="left"></ITICechartsLeft>
|
||||
</el-col>
|
||||
<!-- echarts图2 -->
|
||||
<el-col :span="8">
|
||||
<ITICechartsRight :form="form" ref="right"></ITICechartsRight>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :style="'height:' + vhh + ';overflow:hidden'">
|
||||
<div class="dw">
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="tolerateData"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTolerate">
|
||||
<el-table-column
|
||||
align="center"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:width="item.width"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<ITICecharts @transfer-data="transferData" :form="form" ref="echart"></ITICecharts>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwEventCategoryDetails } from '@/api/Distributionnetwork/transient/transient'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import ITICechartsLeft from './components/ITICechartsLeft.vue'
|
||||
import ITICechartsRight from './components/ITICechartsRight.vue'
|
||||
import ITICecharts from '../curve/components/ITICecharts.vue'
|
||||
export default {
|
||||
components: {
|
||||
Area,
|
||||
Timeinterval,
|
||||
ITICechartsLeft,
|
||||
ITICechartsRight,
|
||||
ITICecharts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: null,
|
||||
vhh: '',
|
||||
item: ['', ''],
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
startTime: '',
|
||||
type: ''
|
||||
},
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
],
|
||||
//暂态事件分布统计表格数据
|
||||
tableHeaderVoltage: [
|
||||
{ prop: 'featureAmplitude', label: '剩余电压(%)', width: 120 },
|
||||
{ prop: 'duration20', label: '20ms' },
|
||||
{ prop: 'duration100', label: '100ms' },
|
||||
{ prop: 'duration500', label: '500ms' },
|
||||
{ prop: 'duration1000', label: '1s' },
|
||||
{ prop: 'duration3000', label: '3s' },
|
||||
{ prop: 'duration20000', label: '20s' },
|
||||
{ prop: 'duration60000', label: '60s' },
|
||||
{ prop: 'duration180000', label: '180s' }
|
||||
],
|
||||
voltageData: [],
|
||||
//可容忍表格数据
|
||||
tableHeaderTolerate: [
|
||||
{ prop: 'toleranceName', label: '名称' },
|
||||
{ prop: 'totalEvents', label: '事件总数' },
|
||||
{ prop: 'tolerable', label: '可容忍' },
|
||||
{ prop: 'Intolerable', label: '不可容忍' }
|
||||
],
|
||||
tolerateData: [],
|
||||
isLoading: false,
|
||||
device: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
// this.item=this.$refs.interval.timeValue;
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.device = window.devicePixelRatio
|
||||
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let vh = window.sessionStorage.getItem('appheight') - 250
|
||||
this.vhh = (window.sessionStorage.getItem('appheight') - 180) / 2 + 'px'
|
||||
this.height = vh / 2 + 'px'
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
// console.log(this.form,'===============================');
|
||||
getPwEventCategoryDetails(this.form).then(res => {
|
||||
// console.log(res,'==================');
|
||||
this.isLoading = false
|
||||
this.voltageData = res.data
|
||||
})
|
||||
// this.$refs.left.echarts()
|
||||
},
|
||||
//获取数据
|
||||
transferData(data, pointIData, pointIunData) {
|
||||
// console.log(data,pointIData,pointIunData,1111);
|
||||
let obj = [
|
||||
{
|
||||
toleranceName: '事件个数',
|
||||
totalEvents: data.data.totalNumberOfEvents,
|
||||
tolerable: pointIData.length,
|
||||
Intolerable: pointIunData.length
|
||||
}
|
||||
]
|
||||
this.tolerateData = obj
|
||||
},
|
||||
//查询
|
||||
queryFn() {
|
||||
this.onSubmit()
|
||||
this.$refs.left.echarts()
|
||||
this.$refs.right.echarts()
|
||||
this.$refs.echart.iticData()
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
.dw {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
width: 500px;
|
||||
z-index: 2;
|
||||
top: -10px;
|
||||
}
|
||||
::v-deep .el-col .el-col-8 {
|
||||
padding-right: 0 !important;
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval" :timeOptions="timeOptions"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="queryFn">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row :gutter="24" :style="'height:' + vhh + ';overflow:hidden'">
|
||||
<el-col :span="8">
|
||||
<!-- 剩余电压表格 -->
|
||||
<el-table
|
||||
stripe
|
||||
highlight-current-row
|
||||
:data="voltageData"
|
||||
:height="height"
|
||||
border
|
||||
align="center"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderVoltage">
|
||||
<el-table-column
|
||||
align="center"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<!-- echarts图1 -->
|
||||
<el-col :span="8">
|
||||
<SEMIF47echartsLeft :form="form" ref="left"></SEMIF47echartsLeft>
|
||||
</el-col>
|
||||
<!-- echarts图2 -->
|
||||
<el-col :span="8">
|
||||
<SEMIF47echartsRight :form="form" ref="right"></SEMIF47echartsRight>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :style="'height:' + vhh + ';overflow:hidden'">
|
||||
<div class="dw">
|
||||
<el-table
|
||||
stripe
|
||||
:data="tolerateData"
|
||||
border
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<template v-for="(item, index) in tableHeaderTolerate">
|
||||
<el-table-column
|
||||
align="center"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:key="index"
|
||||
:min-width="item.width"
|
||||
></el-table-column>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<SEMIF47echarts @transfer-data="transferData" :form="form" ref="echart"></SEMIF47echarts>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwEventCategoryDetails } from '@/api/Distributionnetwork/transient/transient'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import SEMIF47echartsLeft from './components/SEMIF47echartsLeft.vue'
|
||||
import SEMIF47echartsRight from '../curve/components/SEMIF47echartsRight.vue'
|
||||
import SEMIF47echarts from '../curve/components/SEMIF47echarts.vue'
|
||||
export default {
|
||||
components: {
|
||||
Area,
|
||||
Timeinterval,
|
||||
SEMIF47echartsLeft,
|
||||
SEMIF47echartsRight,
|
||||
SEMIF47echarts
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
height: null,
|
||||
item: ['', ''],
|
||||
vhh: '',
|
||||
form: {
|
||||
endTime: '',
|
||||
id: '',
|
||||
startTime: '',
|
||||
type: ''
|
||||
},
|
||||
timeOptions: [
|
||||
{ label: '年份', value: 1 },
|
||||
{ label: '季度', value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
],
|
||||
//暂态事件分布统计表格数据
|
||||
tableHeaderVoltage: [
|
||||
{ prop: 'featureAmplitude', label: '剩余电压(%)', width: 120 },
|
||||
{ prop: 'duration20', label: '20ms' },
|
||||
{ prop: 'duration100', label: '100ms' },
|
||||
{ prop: 'duration500', label: '500ms' },
|
||||
{ prop: 'duration1000', label: '1s' },
|
||||
{ prop: 'duration3000', label: '3s' },
|
||||
{ prop: 'duration20000', label: '20s' },
|
||||
{ prop: 'duration60000', label: '60s' },
|
||||
{ prop: 'duration180000', label: '180s' }
|
||||
],
|
||||
voltageData: [],
|
||||
//可容忍表格数据
|
||||
tableHeaderTolerate: [
|
||||
{ prop: 'toleranceName', label: '名称' },
|
||||
{ prop: 'totalEvents', label: '事件总数' },
|
||||
{ prop: 'tolerable', label: '可容忍' },
|
||||
{ prop: 'Intolerable', label: '不可容忍' }
|
||||
],
|
||||
tolerateData: [],
|
||||
isLoading: false,
|
||||
device: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.form.id = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
},
|
||||
mounted() {
|
||||
// this.item=this.$refs.interval.timeValue;
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.device = window.devicePixelRatio
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let vh = window.sessionStorage.getItem('appheight') - 250
|
||||
this.vhh = (window.sessionStorage.getItem('appheight') - 180) / 2 + 'px'
|
||||
this.height = vh / 2 + 'px'
|
||||
},
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.isLoading = true
|
||||
this.form.type = this.$refs.interval.intervald
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.form.startTime = this.item[0]
|
||||
this.form.endTime = this.item[1]
|
||||
// console.log(this.form,'===============================');
|
||||
getPwEventCategoryDetails(this.form).then(res => {
|
||||
// console.log(res,'==================');
|
||||
this.isLoading = false
|
||||
this.voltageData = res.data
|
||||
})
|
||||
},
|
||||
//获取数据
|
||||
transferData(data, pointIData, pointIunData) {
|
||||
let obj = [
|
||||
{
|
||||
toleranceName: '事件个数',
|
||||
totalEvents: data.data.totalNumberOfEvents,
|
||||
tolerable: pointIData.length,
|
||||
Intolerable: pointIunData.length
|
||||
}
|
||||
]
|
||||
this.tolerateData = obj
|
||||
},
|
||||
//查询
|
||||
queryFn() {
|
||||
this.onSubmit()
|
||||
this.$refs.left.echarts()
|
||||
this.$refs.right.echarts()
|
||||
this.$refs.echart.semif()
|
||||
},
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.form.id = data.id
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
|
||||
.dw {
|
||||
position: absolute;
|
||||
right: 50px;
|
||||
width: 500px;
|
||||
z-index: 2;
|
||||
top: -10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,469 @@
|
||||
<template>
|
||||
<div
|
||||
id="itic"
|
||||
style="width: 100%; height: 100%;"
|
||||
|
||||
ref="fg13"
|
||||
v-loading="isLoading"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwEventFeatureAmplitudeCurve } from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props:{
|
||||
form:{
|
||||
type:Object,
|
||||
default:undefined
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: '', //图表焦点校验
|
||||
h: null,
|
||||
isLoading: false,
|
||||
//ITIC模拟数据
|
||||
datalist: [
|
||||
|
||||
],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: "#ffffff",
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110],
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90],
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80],
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.iticData();
|
||||
});
|
||||
|
||||
// console.log(this.time[0],'1234567');
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let domID1 = document.getElementById("itic");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')- 180)/2 + 'px'
|
||||
},0)
|
||||
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0;
|
||||
var unstandI = 0;
|
||||
var standF = 0;
|
||||
var unstandF = 0;
|
||||
this.pointI = [];
|
||||
this.pointIun = [];
|
||||
this.pointF = [];
|
||||
this.pointFun = [];
|
||||
var total = 0;
|
||||
// console.log(this.datalist);
|
||||
total = this.datalist.length;
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = [];
|
||||
var xx = this.datalist[i].duration / 1000;
|
||||
var yy = this.datalist[i].featureAmplitude;
|
||||
var time = this.datalist[i].startTime.replace("T", " ");
|
||||
// var company = this.datalist[i].gdName;
|
||||
// var substation = this.datalist[i].subName;
|
||||
// var index = this.datalist[i].lineId;
|
||||
point = [xx, yy, time];
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0;
|
||||
line = 230 - 30000 * xx;
|
||||
if (yy > line) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++;
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
} else {
|
||||
standI++;
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++;
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "green" } },
|
||||
});
|
||||
} else {
|
||||
unstandF++;
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: "red" } },
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//itic曲线图
|
||||
async iticData() {
|
||||
this.isLoading= true;
|
||||
const data = await getPwEventFeatureAmplitudeCurve(this.form)
|
||||
// console.log(data);
|
||||
this.datalist = data.data.eventFeatureAmplitudeCurveDataList;
|
||||
this.gongfunction();
|
||||
let white = "#000";
|
||||
const echarts = require("echarts");
|
||||
let domID1 = document.getElementById("itic");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')- 180)/2 + 'px'
|
||||
},0)
|
||||
let myChartes = echarts.init(domID1);
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
this.isLoading = false;
|
||||
let option = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "ITIC曲线",
|
||||
x: "center",
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "25%",
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "0%",
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
show: true,
|
||||
formatter: function (a) {
|
||||
// console.log(a);
|
||||
let relVal = "";
|
||||
// relVal =
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>供电公司:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[3] +
|
||||
// "</font><br/>";
|
||||
// relVal +=
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>变电站:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[4] +
|
||||
// "</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>发生时刻:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[2] +
|
||||
"</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>持续时间:" +
|
||||
" " +
|
||||
" " +
|
||||
(a.value[0]).toFixed(3) +
|
||||
"s</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>特征幅值:" +
|
||||
" " +
|
||||
" " +
|
||||
a.value[1] +
|
||||
"%</font>";
|
||||
return relVal;
|
||||
},
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
// backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: ["上限", "下限", "可容忍事件", "不可容忍事件"],
|
||||
|
||||
x: "1%",
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: "middle",
|
||||
},
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||
},
|
||||
},
|
||||
color: ["#FF8C00", "#00BFFF", "green", "red"],
|
||||
xAxis: [
|
||||
{
|
||||
type: "log",
|
||||
min: "0.001",
|
||||
max: "1000",
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
name: "s",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:echartsColor.WordColor
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: "%",
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "上限",
|
||||
type: "line",
|
||||
data: this.top,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "下限",
|
||||
type: "line",
|
||||
data: this.bot,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointI,
|
||||
},
|
||||
{
|
||||
name: "不可容忍事件",
|
||||
type: "scatter",
|
||||
symbol: "circle",
|
||||
data: this.pointIun,
|
||||
},
|
||||
],
|
||||
};
|
||||
let pointIData=this.pointI
|
||||
let pointIunData=this.pointIun
|
||||
this.$emit('transfer-data', data,pointIData,pointIunData)
|
||||
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg13, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<div
|
||||
id="left"
|
||||
style="width: 100%;"
|
||||
|
||||
ref="fg11"
|
||||
v-loading="Loading"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwDurationLineChart } from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props:{
|
||||
form:{
|
||||
type:Object,
|
||||
default:undefined
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: '', //图表焦点校验
|
||||
h: null,
|
||||
Loading: false,
|
||||
dataListX:[],
|
||||
dataListY:[],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.echarts();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let domID1 = document.getElementById("left");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
|
||||
},
|
||||
async echarts() {
|
||||
this.Loading= true;
|
||||
this.dataListX=[]
|
||||
this.dataListY=[]
|
||||
const data = await getPwDurationLineChart(this.form)
|
||||
data.data.forEach(item => {
|
||||
this.dataListX.push(item.name)
|
||||
this.dataListY.push(item.value)
|
||||
});
|
||||
this.Loading= false;
|
||||
let echarts = require("echarts");
|
||||
let domID1 = document.getElementById("left");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
let myChart = echarts.init(domID1);
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
myChart.clear()
|
||||
let option = {
|
||||
title: {
|
||||
text: "持续时间的概率分布函数 ",
|
||||
left: "center",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
bottom: "14%",
|
||||
right: "3%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.dataListX,
|
||||
name: "暂降持续时间(s)",
|
||||
nameLocation: "middle",
|
||||
boundaryGap: false,
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:echartsColor.WordColor,
|
||||
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
|
||||
},
|
||||
yAxis: {
|
||||
// type: "value",
|
||||
name: "概率分布",
|
||||
nameGap: '20',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.dataListY,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
|
||||
// myChart.resize();
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg11, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div
|
||||
id="right"
|
||||
style="width: 100%; height: 100%;"
|
||||
|
||||
ref="fg12"
|
||||
v-loading="isLoading"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwFeatureAmplitudeLineChart } from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props:{
|
||||
form:{
|
||||
type:Object,
|
||||
default:undefined
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: '', //图表焦点校验
|
||||
h: null,
|
||||
isLoading: false,
|
||||
dataListX:[],
|
||||
dataListY:[],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.echarts();
|
||||
});
|
||||
|
||||
// console.log(this.time[0],'1234567');
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let domID1 = document.getElementById("right");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 80)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
|
||||
},
|
||||
async echarts() {
|
||||
this.isLoading = true;
|
||||
this.dataListX=[]
|
||||
this.dataListY=[]
|
||||
const data = await getPwFeatureAmplitudeLineChart(this.form)
|
||||
if(data.data==null){
|
||||
this.isLoading = false;
|
||||
}else{
|
||||
data.data.forEach(item => {
|
||||
this.dataListX.push(item.name)
|
||||
this.dataListY.push(item.value)
|
||||
});
|
||||
this.isLoading = false;
|
||||
}
|
||||
let echarts = require("echarts");
|
||||
let domID1 = document.getElementById("right");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 80)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
let myChart = echarts.init(domID1);
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
//backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "暂降幅值的概率分布函数 ",
|
||||
left: "center",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
bottom: "14%",
|
||||
right: "4%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.dataListX,
|
||||
name: "暂降幅值",
|
||||
nameLocation: "middle",
|
||||
boundaryGap: false,
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:echartsColor.WordColor
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
tooltip: { trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0},
|
||||
yAxis: {
|
||||
name: "概率分布",
|
||||
nameGap: '20',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.dataListY,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
// myChart.resize();
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg12, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
@@ -0,0 +1,457 @@
|
||||
<template>
|
||||
<div id="semif" style="width: 100%; height: 100%" ref="fg20" v-loading="isLoading"></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwEventFeatureAmplitudeCurve } from '@/api/Distributionnetwork/transient/transient'
|
||||
export default {
|
||||
props: {
|
||||
form: {
|
||||
type: Object,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: undefined, //图表焦点校验
|
||||
h: null,
|
||||
isLoading: false,
|
||||
//ITIC模拟数据
|
||||
datalist: [],
|
||||
pointI: [],
|
||||
pointIun: [],
|
||||
pointF: [],
|
||||
pointFun: [],
|
||||
white: '#ffffff',
|
||||
top: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110]
|
||||
],
|
||||
bot: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90]
|
||||
],
|
||||
part: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.zoom = window.devicePixelRatio
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.semif()
|
||||
})
|
||||
|
||||
// console.log(this.time[0],'1234567');
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
if (this.zoom == 1) {
|
||||
let heightd = window.sessionStorage.getItem('appheight') - 125
|
||||
this.h = heightd / 2 + 'px'
|
||||
}
|
||||
if (this.zoom == 1.25) {
|
||||
let heightd = window.sessionStorage.getItem('appheight') - 320
|
||||
this.h = heightd / 2 + 'px'
|
||||
}
|
||||
let domID1 = document.getElementById('semif')
|
||||
setTimeout(() => {
|
||||
domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 180) / 2 + 'px'
|
||||
}, 0)
|
||||
},
|
||||
//公共的方法
|
||||
gongfunction() {
|
||||
var standI = 0
|
||||
var unstandI = 0
|
||||
var standF = 0
|
||||
var unstandF = 0
|
||||
this.pointI = []
|
||||
this.pointIun = []
|
||||
this.pointF = []
|
||||
this.pointFun = []
|
||||
var total = 0
|
||||
// console.log(this.datalist);
|
||||
total = this.datalist.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < this.datalist.length; i++) {
|
||||
var point = []
|
||||
var xx = this.datalist[i].duration / 1000
|
||||
var yy = this.datalist[i].featureAmplitude
|
||||
var time = this.datalist[i].startTime.replace('T', ' ')
|
||||
// var company = this.datalist[i].gdName;
|
||||
// var substation = this.datalist[i].subName;
|
||||
// var index = this.datalist[i].lineId;
|
||||
point = [xx, yy, time]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0
|
||||
line = 230 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
this.pointIun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
this.pointI.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
this.pointF.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
this.pointFun.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
//itic曲线图
|
||||
async semif() {
|
||||
this.isLoading = true
|
||||
const data = await getPwEventFeatureAmplitudeCurve(this.form)
|
||||
// console.log(data);
|
||||
this.datalist = data.data.eventFeatureAmplitudeCurveDataList
|
||||
this.gongfunction()
|
||||
let white = '#000'
|
||||
const echarts = require('echarts')
|
||||
let domID1 = document.getElementById('semif')
|
||||
setTimeout(() => {
|
||||
domID1.style.width = window.sessionStorage.getItem('appwidth') - 40 + 'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 180) / 2 + 'px'
|
||||
}, 0)
|
||||
let myChartes = echarts.init(domID1)
|
||||
this.isLoading = false
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
let option = {
|
||||
//backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: 'F47曲线',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '25%',
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '0%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
// trigger: "item",
|
||||
show: true,
|
||||
formatter: function (a) {
|
||||
// console.log(a);
|
||||
let relVal = ''
|
||||
// relVal =
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>供电公司:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[3] +
|
||||
// "</font><br/>";
|
||||
// relVal +=
|
||||
// "<font style='color:" +
|
||||
// white +
|
||||
// "'>变电站:" +
|
||||
// " " +
|
||||
// " " +
|
||||
// a.value[4] +
|
||||
// "</font><br/>";
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>发生时刻:" +
|
||||
' ' +
|
||||
' ' +
|
||||
a.value[2] +
|
||||
'</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
white +
|
||||
"'>持续时间:" +
|
||||
' ' +
|
||||
' ' +
|
||||
a.value[0].toFixed(3) +
|
||||
's</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" + white + "'>特征幅值:" + ' ' + ' ' + a.value[1] + '%</font>'
|
||||
return relVal
|
||||
},
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
// backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true }
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['分割线', '可容忍事件', '不可容忍事件'],
|
||||
// selectedMode: false,
|
||||
left: '1%',
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
color: ['yellow', 'green', 'red'],
|
||||
xAxis: [
|
||||
{
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
name: 's',
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
// max: function (value) {
|
||||
// return value.max + 20;
|
||||
// },
|
||||
splitNumber: 10,
|
||||
minInterval: 0.1,
|
||||
name: '%',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0
|
||||
},
|
||||
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '分割线',
|
||||
type: 'line',
|
||||
data: this.part,
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: this.pointF
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: this.pointFun
|
||||
}
|
||||
]
|
||||
}
|
||||
let pointFData = this.pointF
|
||||
let pointFunData = this.pointFun
|
||||
this.$emit('transfer-data', data, pointFData, pointFunData)
|
||||
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes)
|
||||
setTimeout(() => {
|
||||
myChartes.resize()
|
||||
}, 100)
|
||||
let _this = this
|
||||
_this.$erd.listenTo(_this.$refs.fg20, element => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize()
|
||||
})
|
||||
})
|
||||
window.onresize = function () {
|
||||
myChartes.resize()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
@@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<div
|
||||
id="left"
|
||||
style="width: 100%; height: 100%;"
|
||||
|
||||
ref="fg21"
|
||||
v-loading="isLoading1"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwDurationLineChart } from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props:{
|
||||
form:{
|
||||
type:Object,
|
||||
default:undefined
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: undefined, //图表焦点校验
|
||||
h: null,
|
||||
isLoading1: false,
|
||||
dataListX:[],
|
||||
dataListY:[],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.echarts();
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let domID1 = document.getElementById("left");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
|
||||
},
|
||||
async echarts() {
|
||||
this.isLoading1 = true;
|
||||
this.dataListX=[]
|
||||
this.dataListY=[]
|
||||
const data = await getPwDurationLineChart(this.form)
|
||||
data.data.forEach(item => {
|
||||
this.dataListX.push(item.name)
|
||||
this.dataListY.push(item.value)
|
||||
});
|
||||
this.isLoading1 = false;
|
||||
let echarts = require("echarts");
|
||||
let domID1 = document.getElementById("left");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight')-185)/2 + 'px'
|
||||
},0)
|
||||
let myChart = echarts.init(domID1);
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
// backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "持续时间的概率分布函数 ",
|
||||
left: "center",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
bottom: "14%",
|
||||
right: "3%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.dataListX,
|
||||
name: "暂降持续时间(s)",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:echartsColor.WordColor
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
yAxis: {
|
||||
// type: "value",
|
||||
name: "概率分布",
|
||||
nameGap: '20',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
tooltip: { axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0},
|
||||
series: [
|
||||
{
|
||||
data: this.dataListY,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
// myChart.resize();
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg21, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@@ -0,0 +1,187 @@
|
||||
<template>
|
||||
<div
|
||||
id="right"
|
||||
style="width: 100%; height: 100%;"
|
||||
|
||||
ref="fg19"
|
||||
v-loading="isLoading"
|
||||
></div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getPwFeatureAmplitudeLineChart } from "@/api/Distributionnetwork/transient/transient";
|
||||
export default {
|
||||
props:{
|
||||
form:{
|
||||
type:Object,
|
||||
default:undefined
|
||||
},
|
||||
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
device: null,
|
||||
zoom: undefined, //图表焦点校验
|
||||
h: null,
|
||||
isLoading: false,
|
||||
dataListX:[],
|
||||
dataListY:[],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.echarts();
|
||||
});
|
||||
|
||||
// console.log(this.time[0],'1234567');
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let domID1 = document.getElementById("right");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 185)/2 + 'px'
|
||||
},0)
|
||||
|
||||
},
|
||||
async echarts() {
|
||||
this.isLoading = true;
|
||||
this.dataListX=[]
|
||||
this.dataListY=[]
|
||||
const data = await getPwFeatureAmplitudeLineChart(this.form)
|
||||
data.data.forEach(item => {
|
||||
this.dataListX.push(item.name)
|
||||
this.dataListY.push(item.value)
|
||||
});
|
||||
this.isLoading = false;
|
||||
let echarts = require("echarts");
|
||||
let domID1 = document.getElementById("right");
|
||||
setTimeout(()=>{
|
||||
domID1.style.width = (window.sessionStorage.getItem('appwidth') - 50)/3 +'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 185)/2 + 'px'
|
||||
},0)
|
||||
let myChart = echarts.init(domID1);
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor);
|
||||
let option = {
|
||||
//backgroundColor: "#f9f9f9", //地图背景色深蓝
|
||||
title: {
|
||||
text: "暂降幅值的概率分布函数 ",
|
||||
left: "center",
|
||||
top: 0,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: "10%",
|
||||
left: "10%",
|
||||
bottom: "14%",
|
||||
right: "3%",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: this.dataListX,
|
||||
name: "暂降幅值",
|
||||
nameLocation: "middle",
|
||||
nameTextStyle: {
|
||||
padding: 5,
|
||||
color:echartsColor.WordColor
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
label: {
|
||||
color: "#fff",
|
||||
fontSize: 16,
|
||||
},
|
||||
},
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontStyle: "normal",
|
||||
opacity: 0.35,
|
||||
fontSize: 14,
|
||||
},
|
||||
backgroundColor: "rgba(0,0,0,0.35)",
|
||||
borderWidth: 0
|
||||
},
|
||||
yAxis: {
|
||||
name: "概率分布",
|
||||
nameGap: '20',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
padding: 0,
|
||||
},
|
||||
minInterval: 1,
|
||||
type: "value",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread,
|
||||
},
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: [echartsColor.thread],
|
||||
type: "dashed",
|
||||
opacity: 0.5,
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: this.dataListY,
|
||||
type: "line",
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] },
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor,
|
||||
},
|
||||
fontSize: 12,
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
// myChart.resize();
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg19, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChart.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
||||
@@ -0,0 +1,919 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-form ref="form">
|
||||
<el-col :span="6">
|
||||
<el-form-item label-width="80px" label="数据类型">
|
||||
<el-select style="width: 180px" v-model="valueType" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in [
|
||||
{ value: 'MAX', label: '最大值' },
|
||||
{ value: 'MIN', label: '最小值' },
|
||||
{ value: 'AVG', label: '平均值' },
|
||||
{ value: 'CP95', label: 'CP95值' }
|
||||
]"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
<el-button type="primary" size="mini" @click="initData">获取</el-button>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="14">
|
||||
<el-form-item label-width="120px" label="数据刷新时间">
|
||||
<el-tag>{{ timeId }}</el-tag>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="4" style="text-align: right">
|
||||
<el-button type="primary" size="small" class="flag" icon="el-icon-close" @click="$emit('close')">
|
||||
返回
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="基本电能质量数据" name="0">
|
||||
<el-table
|
||||
:data="energyQualityData"
|
||||
border
|
||||
highlight-current-row
|
||||
:height="rowvh"
|
||||
header-cell-class-name="table_header"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" align="center" label="数据名称"></el-table-column>
|
||||
<el-table-column prop="A" align="center" label="A/AB/0"></el-table-column>
|
||||
<el-table-column prop="B" align="center" label="B/BC/+"></el-table-column>
|
||||
<el-table-column prop="C" align="center" label="C/CA/-"></el-table-column>
|
||||
<el-table-column prop="D" align="center" label="Total"></el-table-column>
|
||||
</el-table>
|
||||
<!-- <div :style="'height:' + rowvh + '; overflow-y:auto'">
|
||||
<table id="areaTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-middle">数据名称</th>
|
||||
<th class="table-middle">A/AB/0</th>
|
||||
<th class="table-middle">B/BC/+</th>
|
||||
<th class="table-middle">C/CA/-</th>
|
||||
<th class="table-middle">Total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>相电压总有效值(V)</td>
|
||||
<td>{{ data.PhV_phsA }}</td>
|
||||
<td>{{ data.PhV_phsB }}</td>
|
||||
<td>{{ data.PhV_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流总有效值(A)</td>
|
||||
<td>{{ data.A_phsA }}</td>
|
||||
<td>{{ data.A_phsB }}</td>
|
||||
<td>{{ data.A_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>线电压总有效值(V)</td>
|
||||
<td>{{ data.PPV_phsAB }}</td>
|
||||
<td>{{ data.PPV_phsBC }}</td>
|
||||
<td>{{ data.PPV_phsCA }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>相电压偏差(%)</td>
|
||||
<td>{{ data.PhVDev_phsA }}</td>
|
||||
<td>{{ data.PhVDev_phsB }}</td>
|
||||
<td>{{ data.PhVDev_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>线电压偏差(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>频率(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{ data.Freq }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>频率偏差(Hz)</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>-</td>
|
||||
<td>{{ data.FreqDev }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电压序分量(V)</td>
|
||||
<td>{{ data.SeqV_C0 }}</td>
|
||||
<td>{{ data.SeqV_C1 }}</td>
|
||||
<td>{{ data.SeqV_C2 }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流序分量(A)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总有功功率(W)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{ data.TotW }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总无功功率(Var)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{ data.TotVar }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>总视在功率(VA)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{ data.TotVA }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>视在功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>{{ data.TotPF }}</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>位移功率因数</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电压波动</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>短时闪变</td>
|
||||
<td>{{ data.PstPhV_phsA }}</td>
|
||||
<td>{{ data.PstPhV_phsB }}</td>
|
||||
<td>{{ data.PstPhV_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>长时闪变</td>
|
||||
<td>{{ data.PltPhV_phsA }}</td>
|
||||
<td>{{ data.PltPhV_phsB }}</td>
|
||||
<td>{{ data.PltPhV_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电压谐波畸变率(%)</td>
|
||||
<td>{{ data.ThdPhV_phsA }}</td>
|
||||
<td>{{ data.ThdPhV_phsB }}</td>
|
||||
<td>{{ data.ThdPhV_phsC }}</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>电流谐波畸变率(%)</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>/</td>
|
||||
<td>-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> -->
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="谐波电压含有率" name="1">
|
||||
<el-table
|
||||
:data="containmentRate"
|
||||
border
|
||||
highlight-current-row
|
||||
:height="rowvh"
|
||||
header-cell-class-name="table_header"
|
||||
stripe
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column prop="name" align="center" label="谐波次数"></el-table-column>
|
||||
<el-table-column prop="A" align="center" label="A/AB"></el-table-column>
|
||||
<el-table-column prop="B" align="center" label="B/BC"></el-table-column>
|
||||
<el-table-column prop="C" align="center" label="C/CA"></el-table-column>
|
||||
|
||||
</el-table>
|
||||
<!-- <div :style="'height:' + rowvh + '; overflow-y:auto'">
|
||||
<table :style="'height:' + rowvh">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>谐波次数</th>
|
||||
<th>A/AB</th>
|
||||
<th>B/BC</th>
|
||||
<th>C/CA</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>基波 (%)</td>
|
||||
<td>100.000</td>
|
||||
<td>100.000</td>
|
||||
<td>100.000</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2次 (%)</td>
|
||||
<td>{{ data.HRPhV_H2_phsA ? data.HRPhV_H2_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H2_phsB ? data.HRPhV_H2_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H2_phsC ? data.HRPhV_H2_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3次 (%)</td>
|
||||
<td>{{ data.HRPhV_H3_phsA ? data.HRPhV_H3_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H3_phsB ? data.HRPhV_H3_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H3_phsC ? data.HRPhV_H3_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4次 (%)</td>
|
||||
<td>{{ data.HRPhV_H4_phsA ? data.HRPhV_H4_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H4_phsB ? data.HRPhV_H4_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H4_phsC ? data.HRPhV_H4_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5次 (%)</td>
|
||||
<td>{{ data.HRPhV_H5_phsA ? data.HRPhV_H5_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H5_phsB ? data.HRPhV_H5_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H5_phsC ? data.HRPhV_H5_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6次 (%)</td>
|
||||
<td>{{ data.HRPhV_H6_phsA ? data.HRPhV_H6_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H6_phsB ? data.HRPhV_H6_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H6_phsC ? data.HRPhV_H6_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>7次 (%)</td>
|
||||
<td>{{ data.HRPhV_H7_phsA ? data.HRPhV_H7_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H7_phsB ? data.HRPhV_H7_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H7_phsC ? data.HRPhV_H7_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>8次 (%)</td>
|
||||
<td>{{ data.HRPhV_H8_phsA ? data.HRPhV_H8_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H8_phsB ? data.HRPhV_H8_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H8_phsC ? data.HRPhV_H8_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>9次 (%)</td>
|
||||
<td>{{ data.HRPhV_H9_phsA ? data.HRPhV_H9_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H9_phsB ? data.HRPhV_H9_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H9_phsC ? data.HRPhV_H9_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>10次 (%)</td>
|
||||
<td>{{ data.HRPhV_H10_phsA ? data.HRPhV_H10_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H10_phsB ? data.HRPhV_H10_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H10_phsC ? data.HRPhV_H10_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>11次 (%)</td>
|
||||
<td>{{ data.HRPhV_H11_phsA ? data.HRPhV_H11_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H11_phsB ? data.HRPhV_H11_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H11_phsC ? data.HRPhV_H11_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>12次 (%)</td>
|
||||
<td>{{ data.HRPhV_H12_phsA ? data.HRPhV_H12_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H12_phsB ? data.HRPhV_H12_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H12_phsC ? data.HRPhV_H12_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>13次 (%)</td>
|
||||
<td>{{ data.HRPhV_H13_phsA ? data.HRPhV_H13_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H13_phsB ? data.HRPhV_H13_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H13_phsC ? data.HRPhV_H13_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>14次 (%)</td>
|
||||
<td>{{ data.HRPhV_H14_phsA ? data.HRPhV_H14_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H14_phsB ? data.HRPhV_H14_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H14_phsC ? data.HRPhV_H14_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>15次 (%)</td>
|
||||
<td>{{ data.HRPhV_H15_phsA ? data.HRPhV_H15_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H15_phsB ? data.HRPhV_H15_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H15_phsC ? data.HRPhV_H15_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>16次 (%)</td>
|
||||
<td>{{ data.HRPhV_H16_phsA ? data.HRPhV_H16_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H16_phsB ? data.HRPhV_H16_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H16_phsC ? data.HRPhV_H16_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>17次 (%)</td>
|
||||
<td>{{ data.HRPhV_H17_phsA ? data.HRPhV_H17_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H17_phsB ? data.HRPhV_H17_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H17_phsC ? data.HRPhV_H17_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>18次 (%)</td>
|
||||
<td>{{ data.HRPhV_H18_phsA ? data.HRPhV_H18_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H18_phsB ? data.HRPhV_H18_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H18_phsC ? data.HRPhV_H18_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>19次 (%)</td>
|
||||
<td>{{ data.HRPhV_H19_phsA ? data.HRPhV_H19_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H19_phsB ? data.HRPhV_H19_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H19_phsC ? data.HRPhV_H19_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>20次 (%)</td>
|
||||
<td>{{ data.HRPhV_H20_phsA ? data.HRPhV_H20_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H20_phsB ? data.HRPhV_H20_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H20_phsC ? data.HRPhV_H20_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>21次 (%)</td>
|
||||
<td>{{ data.HRPhV_H21_phsA ? data.HRPhV_H21_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H21_phsB ? data.HRPhV_H21_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H21_phsC ? data.HRPhV_H21_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>22次 (%)</td>
|
||||
<td>{{ data.HRPhV_H22_phsA ? data.HRPhV_H22_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H22_phsB ? data.HRPhV_H22_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H22_phsC ? data.HRPhV_H22_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>23次 (%)</td>
|
||||
<td>{{ data.HRPhV_H23_phsA ? data.HRPhV_H23_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H23_phsB ? data.HRPhV_H23_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H23_phsC ? data.HRPhV_H23_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>24次 (%)</td>
|
||||
<td>{{ data.HRPhV_H24_phsA ? data.HRPhV_H24_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H24_phsB ? data.HRPhV_H24_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H24_phsC ? data.HRPhV_H24_phsC : '/' }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>25次 (%)</td>
|
||||
<td>{{ data.HRPhV_H25_phsA ? data.HRPhV_H25_phsA : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H25_phsB ? data.HRPhV_H25_phsB : '/' }}</td>
|
||||
<td>{{ data.HRPhV_H25_phsC ? data.HRPhV_H25_phsC : '/' }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div> -->
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="谐波频谱" name="2">
|
||||
<div style="width: 100%">
|
||||
<div id="pinPuChar" :style="'height:' + rowvh + ';width:' + rowvw + ';'"></div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getMonitorOverLimit,
|
||||
getPmsInfo
|
||||
} from '@/api/Distributionnetwork-analysis/IndicatorClassification/IndicatorClassification.js'
|
||||
export default {
|
||||
name: 'RealDataPms',
|
||||
props: {
|
||||
reportID: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
activeName: 0,
|
||||
rowvh: '',
|
||||
rowvw: '',
|
||||
timeId: '',
|
||||
energyQualityData: [],
|
||||
containmentRate: [],
|
||||
vEchar: null,
|
||||
serviseV: [],
|
||||
message: {},
|
||||
valueType: 'AVG',
|
||||
overLimitData:[]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.rowvw = window.sessionStorage.getItem('appwidth') - 100 + 'px'
|
||||
this.setHeight()
|
||||
this.initData()
|
||||
},
|
||||
mounted() {
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.rowvh = window.sessionStorage.getItem('appheight') - 100 + 'px'
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
console.log(tab, event)
|
||||
if (tab.name == 2) {
|
||||
this.initVEchart()
|
||||
}
|
||||
},
|
||||
thStyleFun() {
|
||||
return 'text-align:center'
|
||||
},
|
||||
cellStyleFun() {
|
||||
return 'text-align:center'
|
||||
},
|
||||
initVEchart() {
|
||||
var pinPuX = []
|
||||
for (let i = 2; i < 26; i++) {
|
||||
pinPuX.push(i + '次')
|
||||
}
|
||||
this.serviseV = []
|
||||
for (let i = 2; i < 26; i++) {
|
||||
let temValV =
|
||||
(Number(this.data['HRPhV_H' + i + '_phsA']) +
|
||||
Number(this.data['HRPhV_H' + i + '_phsB']) +
|
||||
Number(this.data['HRPhV_H' + i + '_phsC'])) /
|
||||
3
|
||||
this.serviseV.push(temValV.toFixed(3))
|
||||
}
|
||||
const echarts = require('echarts')
|
||||
// 基于准备好的dom，初始化echarts实例
|
||||
this.vEchar = echarts.init(document.getElementById('pinPuChar'))
|
||||
this.vEchar.clear()
|
||||
|
||||
// 指定图表的配置项和数据
|
||||
let option = {
|
||||
title: {
|
||||
left: 'center',
|
||||
text: '2~25次谐波电压含有率',
|
||||
textStyle: {
|
||||
color: 'black'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
label: {
|
||||
backgroundColor: '#283b56'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
left: '80px',
|
||||
verticalAlign: 'top',
|
||||
enabled: true,
|
||||
itemDistance: 5,
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [0, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
name: '次数',
|
||||
data: pinPuX,
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#000000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '%',
|
||||
boundaryGap: true,
|
||||
axisLine: {
|
||||
show: true,
|
||||
onZero: false,
|
||||
lineStyle: {
|
||||
color: '#000000'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000000'
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '谐波电压含有率',
|
||||
type: 'bar',
|
||||
data: this.serviseV,
|
||||
color: '#339966'
|
||||
},
|
||||
{
|
||||
color: '#FF9900',
|
||||
name: '限值',
|
||||
type: 'bar',
|
||||
data: this.overLimitData
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
// 使用刚指定的配置项和数据显示图表。
|
||||
this.vEchar.setOption(option)
|
||||
this.vEchar.resize()
|
||||
},
|
||||
|
||||
initData() {
|
||||
let params = {
|
||||
valueType: this.valueType,
|
||||
monitorId: this.reportID
|
||||
}
|
||||
getPmsInfo(params).then(res => {
|
||||
let obj = res.data
|
||||
this.data = JSON.parse(obj.pmsContent)
|
||||
this.timeId = obj.timeId
|
||||
this.energyQualityData = [
|
||||
{
|
||||
name: '相电压总有效值',
|
||||
A: this.data.PhV_phsA,
|
||||
B: this.data.PhV_phsB,
|
||||
C: this.data.PhV_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '电流总有效值(A)',
|
||||
A: this.data.A_phsA,
|
||||
B: this.data.A_phsB,
|
||||
C: this.data.A_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '线电压总有效值(V)',
|
||||
A: this.data.PPV_phsAB,
|
||||
B: this.data.PPV_phsBC,
|
||||
C: this.data.PPV_phsCA,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '相电压偏差(%)',
|
||||
A: this.data.PhVDev_phsA,
|
||||
B: this.data.PhVDev_phsB,
|
||||
C: this.data.PhVDev_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '线电压偏差(%)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: '/'
|
||||
},
|
||||
{
|
||||
name: '频率(Hz)',
|
||||
A: '-',
|
||||
B: '-',
|
||||
C: '-',
|
||||
D: this.data.Freq
|
||||
},
|
||||
{
|
||||
name: '频率偏差(Hz)',
|
||||
A: '-',
|
||||
B: '-',
|
||||
C: '-',
|
||||
D: this.data.FreqDev
|
||||
},
|
||||
{
|
||||
name: '电压序分量(V)',
|
||||
A: this.data.SeqV_C0,
|
||||
B: this.data.SeqV_C1,
|
||||
C: this.data.SeqV_C2,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '电流序分量(A)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: '/'
|
||||
},
|
||||
{
|
||||
name: '总有功功率(W)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: this.data.TotW
|
||||
},
|
||||
{
|
||||
name: '总无功功率(Var)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: this.data.TotVar
|
||||
},
|
||||
{
|
||||
name: '总视在功率(VA)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: this.data.TotVA
|
||||
},
|
||||
{
|
||||
name: '视在功率因数',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: this.data.TotPF
|
||||
},
|
||||
{ name: '位移功率因数', A: '/', B: '/', C: '/', D: '/' },
|
||||
{ name: '电压波动', A: '/', B: '/', C: '/', D: '/' },
|
||||
{
|
||||
name: '短时闪变',
|
||||
A: this.data.PstPhV_phsA,
|
||||
B: this.data.PstPhV_phsB,
|
||||
C: this.data.PstPhV_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '长时闪变',
|
||||
A: this.data.PltPhV_phsA,
|
||||
B: this.data.PltPhV_phsB,
|
||||
C: this.data.PltPhV_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '电压谐波畸变率(%)',
|
||||
A: this.data.ThdPhV_phsA,
|
||||
B: this.data.ThdPhV_phsB,
|
||||
C: this.data.ThdPhV_phsC,
|
||||
D: '-'
|
||||
},
|
||||
{
|
||||
name: '电流谐波畸变率(%)',
|
||||
A: '/',
|
||||
B: '/',
|
||||
C: '/',
|
||||
D: '/'
|
||||
}
|
||||
]
|
||||
this.containmentRate = [
|
||||
{
|
||||
name: '基波 (%)',
|
||||
A: '100.000',
|
||||
B: '100.000',
|
||||
C: '100.000'
|
||||
},
|
||||
{
|
||||
name: '2次 (%)',
|
||||
A: this.data.HRPhV_H2_phsA ? this.data.HRPhV_H2_phsA : '/',
|
||||
B: this.data.HRPhV_H2_phsB ? this.data.HRPhV_H2_phsB : '/',
|
||||
C: this.data.HRPhV_H2_phsC ? this.data.HRPhV_H2_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '3次 (%)',
|
||||
A: this.data.HRPhV_H3_phsA ? this.data.HRPhV_H3_phsA : '/',
|
||||
B: this.data.HRPhV_H3_phsB ? this.data.HRPhV_H3_phsB : '/',
|
||||
C: this.data.HRPhV_H3_phsC ? this.data.HRPhV_H3_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '4次 (%)',
|
||||
A: this.data.HRPhV_H4_phsA ? this.data.HRPhV_H4_phsA : '/',
|
||||
B: this.data.HRPhV_H4_phsB ? this.data.HRPhV_H4_phsB : '/',
|
||||
C: this.data.HRPhV_H4_phsC ? this.data.HRPhV_H4_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '5次 (%)',
|
||||
A: this.data.HRPhV_H5_phsA ? this.data.HRPhV_H5_phsA : '/',
|
||||
B: this.data.HRPhV_H5_phsB ? this.data.HRPhV_H5_phsB : '/',
|
||||
C: this.data.HRPhV_H5_phsC ? this.data.HRPhV_H5_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '6次 (%)',
|
||||
A: this.data.HRPhV_H6_phsA ? this.data.HRPhV_H6_phsA : '/',
|
||||
B: this.data.HRPhV_H6_phsB ? this.data.HRPhV_H6_phsB : '/',
|
||||
C: this.data.HRPhV_H6_phsC ? this.data.HRPhV_H6_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '7次 (%)',
|
||||
A: this.data.HRPhV_H7_phsA ? this.data.HRPhV_H7_phsA : '/',
|
||||
B: this.data.HRPhV_H7_phsB ? this.data.HRPhV_H7_phsB : '/',
|
||||
C: this.data.HRPhV_H7_phsC ? this.data.HRPhV_H7_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '8次 (%)',
|
||||
A: this.data.HRPhV_H8_phsA ? this.data.HRPhV_H8_phsA : '/',
|
||||
B: this.data.HRPhV_H8_phsB ? this.data.HRPhV_H8_phsB : '/',
|
||||
C: this.data.HRPhV_H8_phsC ? this.data.HRPhV_H8_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '9次 (%)',
|
||||
A: this.data.HRPhV_H9_phsA ? this.data.HRPhV_H9_phsA : '/',
|
||||
B: this.data.HRPhV_H9_phsB ? this.data.HRPhV_H9_phsB : '/',
|
||||
C: this.data.HRPhV_H9_phsC ? this.data.HRPhV_H9_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '10次 (%)',
|
||||
A: this.data.HRPhV_H10_phsA ? this.data.HRPhV_H10_phsA : '/',
|
||||
B: this.data.HRPhV_H10_phsB ? this.data.HRPhV_H10_phsB : '/',
|
||||
C: this.data.HRPhV_H10_phsC ? this.data.HRPhV_H10_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '11次 (%)',
|
||||
A: this.data.HRPhV_H11_phsA ? this.data.HRPhV_H11_phsA : '/',
|
||||
B: this.data.HRPhV_H11_phsB ? this.data.HRPhV_H11_phsB : '/',
|
||||
C: this.data.HRPhV_H11_phsC ? this.data.HRPhV_H11_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '12次 (%)',
|
||||
A: this.data.HRPhV_H12_phsA ? this.data.HRPhV_H12_phsA : '/',
|
||||
B: this.data.HRPhV_H12_phsB ? this.data.HRPhV_H12_phsB : '/',
|
||||
C: this.data.HRPhV_H12_phsC ? this.data.HRPhV_H12_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '13次 (%)',
|
||||
A: this.data.HRPhV_H13_phsA ? this.data.HRPhV_H13_phsA : '/',
|
||||
B: this.data.HRPhV_H13_phsB ? this.data.HRPhV_H13_phsB : '/',
|
||||
C: this.data.HRPhV_H13_phsC ? this.data.HRPhV_H13_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '14次 (%)',
|
||||
A: this.data.HRPhV_H14_phsA ? this.data.HRPhV_H14_phsA : '/',
|
||||
B: this.data.HRPhV_H14_phsB ? this.data.HRPhV_H14_phsB : '/',
|
||||
C: this.data.HRPhV_H14_phsC ? this.data.HRPhV_H14_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '15次 (%)',
|
||||
A: this.data.HRPhV_H15_phsA ? this.data.HRPhV_H15_phsA : '/',
|
||||
B: this.data.HRPhV_H15_phsB ? this.data.HRPhV_H15_phsB : '/',
|
||||
C: this.data.HRPhV_H15_phsC ? this.data.HRPhV_H15_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '16次 (%)',
|
||||
A: this.data.HRPhV_H16_phsA ? this.data.HRPhV_H16_phsA : '/',
|
||||
B: this.data.HRPhV_H16_phsB ? this.data.HRPhV_H16_phsB : '/',
|
||||
C: this.data.HRPhV_H16_phsC ? this.data.HRPhV_H16_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '17次 (%)',
|
||||
A: this.data.HRPhV_H17_phsA ? this.data.HRPhV_H17_phsA : '/',
|
||||
B: this.data.HRPhV_H17_phsB ? this.data.HRPhV_H17_phsB : '/',
|
||||
C: this.data.HRPhV_H17_phsC ? this.data.HRPhV_H17_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '18次 (%)',
|
||||
A: this.data.HRPhV_H18_phsA ? this.data.HRPhV_H18_phsA : '/',
|
||||
B: this.data.HRPhV_H18_phsB ? this.data.HRPhV_H18_phsB : '/',
|
||||
C: this.data.HRPhV_H18_phsC ? this.data.HRPhV_H18_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '19次 (%)',
|
||||
A: this.data.HRPhV_H19_phsA ? this.data.HRPhV_H19_phsA : '/',
|
||||
B: this.data.HRPhV_H19_phsB ? this.data.HRPhV_H19_phsB : '/',
|
||||
C: this.data.HRPhV_H19_phsC ? this.data.HRPhV_H19_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '20次 (%)',
|
||||
A: this.data.HRPhV_H20_phsA ? this.data.HRPhV_H20_phsA : '/',
|
||||
B: this.data.HRPhV_H20_phsB ? this.data.HRPhV_H20_phsB : '/',
|
||||
C: this.data.HRPhV_H20_phsC ? this.data.HRPhV_H20_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '21次 (%)',
|
||||
A: this.data.HRPhV_H21_phsA ? this.data.HRPhV_H21_phsA : '/',
|
||||
B: this.data.HRPhV_H21_phsB ? this.data.HRPhV_H21_phsB : '/',
|
||||
C: this.data.HRPhV_H21_phsC ? this.data.HRPhV_H21_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '22次 (%)',
|
||||
A: this.data.HRPhV_H22_phsA ? this.data.HRPhV_H22_phsA : '/',
|
||||
B: this.data.HRPhV_H22_phsB ? this.data.HRPhV_H22_phsB : '/',
|
||||
C: this.data.HRPhV_H22_phsC ? this.data.HRPhV_H22_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '23次 (%)',
|
||||
A: this.data.HRPhV_H23_phsA ? this.data.HRPhV_H23_phsA : '/',
|
||||
B: this.data.HRPhV_H23_phsB ? this.data.HRPhV_H23_phsB : '/',
|
||||
C: this.data.HRPhV_H23_phsC ? this.data.HRPhV_H23_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '24次 (%)',
|
||||
A: this.data.HRPhV_H24_phsA ? this.data.HRPhV_H24_phsA : '/',
|
||||
B: this.data.HRPhV_H24_phsB ? this.data.HRPhV_H24_phsB : '/',
|
||||
C: this.data.HRPhV_H24_phsC ? this.data.HRPhV_H24_phsC : '/'
|
||||
},
|
||||
{
|
||||
name: '25次 (%)',
|
||||
A: this.data.HRPhV_H25_phsA ? this.data.HRPhV_H25_phsA : '/',
|
||||
B: this.data.HRPhV_H25_phsB ? this.data.HRPhV_H25_phsB : '/',
|
||||
C: this.data.HRPhV_H25_phsC ? this.data.HRPhV_H25_phsC : '/'
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
let overLimit = {
|
||||
id: this.reportID
|
||||
}
|
||||
getMonitorOverLimit(overLimit).then(res => {
|
||||
let data = res.data
|
||||
this.overLimitData =[]
|
||||
for(let i =2;i<26;i++){
|
||||
let tem ='uharm'+i;
|
||||
this.overLimitData.push(data[tem])
|
||||
}
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
overflow-y: auto; /* 启用竖向滚动 */
|
||||
}
|
||||
|
||||
table caption {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid #999;
|
||||
text-align: center;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
table thead tr {
|
||||
background-color: #008c8c;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
table tbody tr:nth-child(odd) {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
table tbody tr:hover {
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
table tbody tr td:first-child {
|
||||
color: #3d34fc;
|
||||
}
|
||||
|
||||
table tfoot tr td {
|
||||
text-align: right;
|
||||
padding-right: 20px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,671 @@
|
||||
<template>
|
||||
<div class="Inspection">
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
|
||||
<el-form-item label="监测点名称:">
|
||||
<el-input clearable v-model="form.searchValue" placeholder="请输入监测点名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点状态:">
|
||||
<el-select clearable v-model.trim="form.monitorState" placeholder="请选择监测点状态">
|
||||
<el-option v-for="item in options" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点类型:" v-if="activeName == 3">
|
||||
<el-select clearable v-model.trim="form.treeType" placeholder="请选择监测点类型">
|
||||
<el-option v-for="item in Subcategory" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">
|
||||
查询
|
||||
</el-button>
|
||||
|
||||
<el-button type="primary" icon="el-icon-download">导出历史数据</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-left: 0; position: relative">
|
||||
<i v-if="colSpan == 24" class="el-icon-caret-right" @click="colSpan = 19"></i>
|
||||
<el-col v-show="colSpan != 24" class="left" :style="'height:' + (vh + 55) + 'px;'" :span="5">
|
||||
<i class="el-icon-caret-left" v-if="colSpan == 19" @click="colSpan = 24"></i>
|
||||
<el-input placeholder="输入关键字进行过滤" clearable v-model="filterText"
|
||||
style="margin-bottom: 10px"></el-input>
|
||||
<el-tree class="treeEl" :highlight-current="true" :expand-on-click-node="false"
|
||||
:style="'height: ' + (vh - 10) + 'px;overflow-y: auto;'" :data="treeData" :props="defaultProps"
|
||||
node-key="id" default-expand-all :filter-node-method="filterNode" @node-click="handleNodeClick"
|
||||
ref="tree" v-loading="loadingTree"></el-tree>
|
||||
</el-col>
|
||||
<el-col :span="colSpan" style="padding-right: 0">
|
||||
<!-- 发电 -->
|
||||
<el-table stripe highlight-current-row :data="tableData" border :height="vh + 'px'"
|
||||
header-cell-class-name="table_header" :header-cell-style="thStyleFun" :cell-style="cellStyleFun"
|
||||
@selection-change="handleSelectionChange">
|
||||
<el-table-column show-overflow-tooltip label="序号" width="60">
|
||||
<template scope="scope">
|
||||
<span>{{ (form.pageNum - 1) * form.pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="id" label="用户编号" min-width="190"></el-table-column>
|
||||
|
||||
<el-table-column show-overflow-tooltip prop="name" label="用户名称" width="200"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="orgName" label="组织机构名称"
|
||||
width="180"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="operationName" label="运维单位名称"
|
||||
min-width="180"></el-table-column>
|
||||
|
||||
|
||||
<el-table-column show-overflow-tooltip prop="isUpToGrid" label="是否上送网公司监测点" min-width="180">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.isUpToGrid == 1 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column show-overflow-tooltip prop="userType" label="用户分类" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="industryType" label="行业分类" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="electricityType" label="用电类别" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="contractCapacity" label="合同容量"
|
||||
min-width="120"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="operatingCapacity" label="运行容量"
|
||||
min-width="120"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="productionShift" label="生产班次" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="loadNature" label="负荷性质" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="voltageLevel" label="供电电压" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="highIndustryType" label="高耗能行业类别" min-width="160"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="powerTransmissionDate" label="送电日期"
|
||||
min-width="120"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="importanceLevel" label="重要性等级" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="eccStat" label="用电客户状态" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="userTag" label="用户标签"
|
||||
min-width="150"></el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="ifSensitiveUser" label="是否敏感用户" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ifSensitiveUser == 1 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="ifPowerQuality" label="是否影响电能质量" min-width="160">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ifPowerQuality == 1 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="ifKeyCustomers" label="是否重要客户" min-width="120">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.ifKeyCustomers == 1 ? '是' : '否' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column show-overflow-tooltip prop="sensitiveType" label="敏感用户类别" min-width="120"
|
||||
:formatter="formFilter"></el-table-column>
|
||||
|
||||
<el-table-column fixed="right" label="操作" width="350">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" icon="el-icon-view" size="mini"
|
||||
@click="ViewReport(scope.row)">
|
||||
历史趋势
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-data-line" size="mini"
|
||||
@click="ViewRealData(scope.row)">
|
||||
准实时数据
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination background class="mt10" align="right" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" :current-page="form.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]" :page-size="form.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
typeTree,
|
||||
getOneMonitorByOrgId,
|
||||
getTwoMonitorByOrgId,
|
||||
getThreeYongMonitorByOrgId,
|
||||
delPvLineDetail,
|
||||
getPvDeviceById,
|
||||
delDistributionMonitor,
|
||||
pvDisOrLv
|
||||
} from '@/api/AccountOperation'
|
||||
|
||||
import terminalDialog from '@/views/Account-management/components/StandingBook/terminalDialog.vue'
|
||||
import { getPhotovoltaicAccountData } from '@/api/distributed'
|
||||
import { getDicDataByTypeName } from '@/api/admin/dept'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import { getPvLvUserList, updateLvUser, delPvLvUser } from '@/api/LowVoltageUserAccount'
|
||||
export default {
|
||||
components: {
|
||||
terminalDialog
|
||||
},
|
||||
props: {},
|
||||
name: 'InspectionPoint',
|
||||
data() {
|
||||
return {
|
||||
value: 0,
|
||||
colSpan: 19,
|
||||
vh: 0,
|
||||
activeName: '3',
|
||||
list: [],
|
||||
title: '',
|
||||
loading: false,
|
||||
loadingTree: true,
|
||||
formInline: {},
|
||||
flag: true,
|
||||
form: {
|
||||
dataType: 1,
|
||||
searchValue: '',
|
||||
monitorState: '',
|
||||
orgId: '',
|
||||
treeType: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
Subcategory: [
|
||||
{
|
||||
id: 0,
|
||||
name: '用电用户'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: '发电用户'
|
||||
}
|
||||
],
|
||||
|
||||
breadList: [], //存储树点击的父节点
|
||||
options: [],
|
||||
// 监测点类型 数组
|
||||
typeList: [],
|
||||
|
||||
shwoMainNetworkAddition: false,
|
||||
MainNetworkAddition: false,
|
||||
tableData: [],
|
||||
multipleSelection: [], //表格多选
|
||||
filterText: '',
|
||||
treeData: [],
|
||||
treeList: null, //保存 树点击节点
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'name'
|
||||
},
|
||||
total: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 110
|
||||
this.operationTree()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
|
||||
this.options = dicData('Line_State', [])
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 110
|
||||
},
|
||||
|
||||
// 树查询
|
||||
async operationTree() {
|
||||
this.loadingTree = true
|
||||
const data = await typeTree()
|
||||
this.treeData = data.data
|
||||
this.treeList = this.treeData[0]
|
||||
setTimeout(() => {
|
||||
this.$refs.tree.setCurrentKey(this.treeData[0].id)
|
||||
this.onSubmit()
|
||||
}, 0)
|
||||
|
||||
this.loadingTree = false
|
||||
},
|
||||
|
||||
|
||||
|
||||
// 表格查询
|
||||
onSubmit() {
|
||||
this.form.orgId = this.treeList.id
|
||||
this.flag = this.form.treeType == 0 ? false : true
|
||||
|
||||
this.loading = true
|
||||
if (this.activeName == 1) {
|
||||
getOneMonitorByOrgId(this.form).then(res => {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
})
|
||||
} else if (this.activeName == 2) {
|
||||
getTwoMonitorByOrgId(this.form).then(res => {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
})
|
||||
} else if (this.activeName == 3) {
|
||||
// getThreeYongMonitorByOrgId
|
||||
getThreeYongMonitorByOrgId(this.form).then(res => {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
})
|
||||
}
|
||||
|
||||
// if (this.treeList != null) {
|
||||
// this.form.id = this.treeList.id;
|
||||
// this.form.level = this.treeList.level;
|
||||
// }
|
||||
// pvLineDetail(this.form).then((res) => {
|
||||
// this.tableData = res.data.records;
|
||||
// this.total = res.data.total;
|
||||
|
||||
// });
|
||||
},
|
||||
|
||||
// 树过滤
|
||||
filterNode(value, data, node) {
|
||||
if (!value) {
|
||||
return true
|
||||
}
|
||||
let _array = [] //这里使用数组存储 只是为了存储值。
|
||||
this.getReturnNode(node, _array, value)
|
||||
let result = false
|
||||
_array.forEach(item => {
|
||||
result = result || item
|
||||
})
|
||||
return result
|
||||
},
|
||||
getReturnNode(node, _array, value) {
|
||||
let isPass = node.data && node.data.name && node.data.name.indexOf(value) !== -1
|
||||
isPass ? _array.push(isPass) : ''
|
||||
this.index++
|
||||
if (!isPass && node.name != 1 && node.parent) {
|
||||
this.getReturnNode(node.parent, _array, value)
|
||||
}
|
||||
},
|
||||
// 树点击事件
|
||||
handleNodeClick: function (data, node) {
|
||||
this.breadList = []
|
||||
this.treeList = data
|
||||
this.form.orgId = this.treeList.id
|
||||
let selectNode = this.$refs.tree.getNode(node) // 获取点击当节点的dom的信息
|
||||
|
||||
this.getparentsNode(selectNode) //调用递归函数
|
||||
},
|
||||
// 递归
|
||||
getparentsNode(node) {
|
||||
if (!node.parent) {
|
||||
// for (let i = 0; i <= this.breadList.length; i++) {
|
||||
// this.breadList[i] = `-` + this.breadList[i];
|
||||
// }
|
||||
this.breadList.forEach((item, ind) => {
|
||||
this.breadList[ind] = ` > ` + item
|
||||
})
|
||||
this.breadList = this.breadList.join('')
|
||||
return
|
||||
}
|
||||
|
||||
this.breadList.unshift(node.label)
|
||||
|
||||
this.getparentsNode(node.parent) //调用递归
|
||||
},
|
||||
|
||||
// filterNode(value, data) {
|
||||
// if (!value) return true;
|
||||
// return data.label.indexOf(value) !== -1;
|
||||
// },
|
||||
// 表格多选
|
||||
handleSelectionChange(val) {
|
||||
this.multipleSelection = []
|
||||
val.forEach(item => {
|
||||
this.multipleSelection.push(item.id)
|
||||
})
|
||||
// this.multipleSelection = val;
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.form.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.form.pageNum = val
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
thStyleFun() {
|
||||
return 'text-align:center'
|
||||
},
|
||||
cellStyleFun() {
|
||||
return 'text-align:center'
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row, column) {
|
||||
if (column.property == 'voltageLevel') {
|
||||
let title = ''
|
||||
dicData('Dev_Voltage', []).forEach(item => {
|
||||
if (item.id == row.voltageLevel) {
|
||||
title = item.label
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'monitorState') {
|
||||
let title = ''
|
||||
dicData('Line_State', []).forEach(item => {
|
||||
if (item.id == row.monitorState) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'monitorType') {
|
||||
let title = ''
|
||||
dicData('Line_Type', []).forEach(item => {
|
||||
if (item.id == row.monitorType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'potentialTransFormerType') {
|
||||
let title = ''
|
||||
dicData('Voltage_Transformer', []).forEach(item => {
|
||||
if (item.id == row.potentialTransFormerType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'neutralGroundingMode') {
|
||||
let title = ''
|
||||
dicData('Neutral_Point', []).forEach(item => {
|
||||
if (item.id == row.neutralGroundingMode) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'monitorObjectType') {
|
||||
let title = ''
|
||||
dicData('Monitoring_Labels', []).forEach(item => {
|
||||
if (item.id == row.monitorObjectType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'terminalWiringMethod') {
|
||||
let title = ''
|
||||
dicData('Dev_Connect', []).forEach(item => {
|
||||
if (item.id == row.terminalWiringMethod) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'monitorTag') {
|
||||
let title = ''
|
||||
dicData('Monitoring_Labels', []).forEach(item => {
|
||||
if (item.id == row.monitorTag) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'regionalism') {
|
||||
let title = ''
|
||||
dicData('Area', []).forEach(item => {
|
||||
if (item.id == row.regionalism) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
return title
|
||||
} else if (column.property == 'state') {
|
||||
let title = ''
|
||||
dicData('Line_State', []).forEach(item => {
|
||||
if (item.id == row.state) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'userType') {
|
||||
let title = ''
|
||||
dicData('User_Class', []).forEach(item => {
|
||||
if (item.id == row.userType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'industryType') {
|
||||
let title = ''
|
||||
dicData('Business_Type', []).forEach(item => {
|
||||
if (item.id == row.industryType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'electricityType') {
|
||||
let title = ''
|
||||
dicData('Ele_Class', []).forEach(item => {
|
||||
if (item.id == row.electricityType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'productionShift') {
|
||||
let title = ''
|
||||
dicData('Production_Shifts', []).forEach(item => {
|
||||
if (item.id == row.productionShift) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'loadNature') {
|
||||
let title = ''
|
||||
dicData('Load_Type', []).forEach(item => {
|
||||
if (item.id == row.loadNature) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'highIndustryType') {
|
||||
let title = ''
|
||||
dicData('High_Cate', []).forEach(item => {
|
||||
if (item.id == row.highIndustryType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'importanceLevel') {
|
||||
let title = ''
|
||||
dicData('Importance_Level', []).forEach(item => {
|
||||
if (item.id == row.importanceLevel) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'eccStat') {
|
||||
let title = ''
|
||||
dicData('Ecc_Stat', []).forEach(item => {
|
||||
if (item.id == row.eccStat) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'sensitiveType') {
|
||||
let title = ''
|
||||
dicData('Sensitive_User_Type', []).forEach(item => {
|
||||
if (item.id == row.sensitiveType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'connectionMode') {
|
||||
let title = ''
|
||||
dicData('Connection_Mode', []).forEach(item => {
|
||||
if (item.id == row.connectionMode) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'gcStat') {
|
||||
let title = ''
|
||||
dicData('Ecc_Stat', []).forEach(item => {
|
||||
if (item.id == row.gcStat) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'powerStationType') {
|
||||
let title = ''
|
||||
dicData('Power_Station_Type', []).forEach(item => {
|
||||
if (item.id == row.powerStationType) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'powerGenerationMode') {
|
||||
let title = ''
|
||||
dicData('Power_Generation', []).forEach(item => {
|
||||
if (item.id == row.powerGenerationMode) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else if (column.property == 'powerCategory') {
|
||||
let title = ''
|
||||
dicData('Power_Category', []).forEach(item => {
|
||||
if (item.id == row.powerCategory) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
|
||||
return title
|
||||
} else {
|
||||
return row[column.property]
|
||||
}
|
||||
},
|
||||
// 查看报表
|
||||
ViewReport(row) {
|
||||
this.$emit('ViewReport', row.id)
|
||||
},
|
||||
|
||||
ViewRealData(row) {
|
||||
this.$emit('ViewRealData', row.id)
|
||||
}
|
||||
// // 查看趋势图
|
||||
// trend(row) {
|
||||
// if (this.form.dataType == 0) {
|
||||
// // 主网
|
||||
// this.$router.push({
|
||||
// path: "/Statistical-analysis/steadyStateIndicators",
|
||||
// name: "steadyStateIndicators",
|
||||
// params: {
|
||||
// id: row.id,
|
||||
// },
|
||||
// });
|
||||
// } else {
|
||||
// // 配网
|
||||
// this.$router.push({
|
||||
// path: "/Distributionnetwork-analysis/SteadyStateIndicators",
|
||||
// name: "SteadyStateIndicators",
|
||||
// params: {
|
||||
// id: row.id,
|
||||
// },
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
|
||||
.Inspection {
|
||||
margin-right: 10px;
|
||||
//box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.left {
|
||||
position: relative;
|
||||
padding: 10px 0;
|
||||
// overflow-y: auto;
|
||||
border: 1px solid $themeColor !important;
|
||||
|
||||
.el-icon-caret-left {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: -5px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.el-table__fixed {
|
||||
// 左固定列
|
||||
height: auto !important;
|
||||
bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
::v-deep .el-table__fixed-right {
|
||||
// 右固定列
|
||||
height: auto !important;
|
||||
bottom: 10px; // 改为自动高度后，设置与父容器的底部距离，高度会动态改变，值可以设置比滚动条的高度稍微大一些
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
::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;
|
||||
// }
|
||||
// // .el-icon-caret-right {
|
||||
// // position: absolute;
|
||||
// // top: 50%;
|
||||
// // left: -5px;
|
||||
// // cursor: pointer;
|
||||
// // font-size: 16px;
|
||||
// // }</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<!-- 台账 -->
|
||||
<StandingBook v-show="flag" @ViewReport="ViewReport" @ViewRealData="ViewRealData" />
|
||||
<!-- 报表 --5-->
|
||||
<TrendChart v-if="trendFlag" :reportID="reportID" @close='flag=true;trendFlag=false;realFlag=false'/>
|
||||
|
||||
<RealDataPms v-if="realFlag" :reportID="reportID" @close='flag=true;trendFlag=false;realFlag=false'/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import TrendChart from "./components/historicalTrendChart/TrendChart";
|
||||
import StandingBook from "./components/historicalTrendChart/StandingBook";
|
||||
import RealDataPms from "./components/historicalTrendChart/RealDataPms";
|
||||
export default {
|
||||
components: { TrendChart, StandingBook,RealDataPms },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
flag: true,
|
||||
realFlag:false,
|
||||
trendFlag:false,
|
||||
reportID: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
ViewReport(id) {
|
||||
this.reportID = id;
|
||||
this.flag = false;
|
||||
this.trendFlag = true
|
||||
this.realFlag = false
|
||||
},
|
||||
|
||||
ViewRealData(id) {
|
||||
this.reportID = id;
|
||||
this.flag = false;
|
||||
this.trendFlag = false
|
||||
this.realFlag = true
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user