新增阿克苏 echart地图json
This commit is contained in:
guanj
@@ -1,88 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<!--终端运维日志 -->
|
||||
|
||||
<Table ref="tableRef"></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ledgerChangePush } from '@/api/device-boot/terminalTree'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const fontdveoption = dictData.getBasicData('Dev_Ops')
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/pqsTerminalLogs/getList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
// { title: '名称', field: 'name', width: '200' },
|
||||
{
|
||||
title: '日志类型',
|
||||
field: 'logsType',
|
||||
width: '100',
|
||||
formatter: (row: any) => {
|
||||
return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '更改人员',
|
||||
field: 'createBy',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '更改时间',
|
||||
field: 'updateTime',
|
||||
width: '140'
|
||||
},
|
||||
|
||||
{ title: '描述', field: 'terminalDescribe' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
<template>
|
||||
<div>
|
||||
<!--终端运维日志 -->
|
||||
|
||||
<Table ref="tableRef"></Table>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { ledgerChangePush } from '@/api/device-boot/terminalTree'
|
||||
import { getTimeOfTheMonth } from '@/utils/formatTime'
|
||||
const prop = defineProps({
|
||||
width: { type: String },
|
||||
height: { type: String },
|
||||
timeKey: { type: String }
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const fontdveoption = dictData.getBasicData('Dev_Ops')
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/pqsTerminalLogs/getList',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
// { title: '名称', field: 'name', width: '200' },
|
||||
{
|
||||
title: '日志类型',
|
||||
field: 'logsType',
|
||||
width: '100',
|
||||
formatter: (row: any) => {
|
||||
return fontdveoption.find((item: any) => item.id == row.cellValue)?.name
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
title: '更改人员',
|
||||
field: 'createBy',
|
||||
width: '100'
|
||||
},
|
||||
{
|
||||
title: '更改时间',
|
||||
field: 'updateTime',
|
||||
width: '140'
|
||||
},
|
||||
|
||||
{ title: '描述', field: 'terminalDescribe' }
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.searchBeginTime = getTimeOfTheMonth(prop.timeKey)[0]
|
||||
tableStore.table.params.searchEndTime = getTimeOfTheMonth(prop.timeKey)[1]
|
||||
},
|
||||
loadCallback: () => {
|
||||
tableStore.table.height = `calc(${prop.height} - 80px)`
|
||||
}
|
||||
})
|
||||
|
||||
const tableRef = ref()
|
||||
provide('tableRef', tableRef)
|
||||
tableStore.table.params.type = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => prop.timeKey,
|
||||
val => {
|
||||
tableStore.index()
|
||||
}
|
||||
)
|
||||
|
||||
const addMenu = () => {}
|
||||
</script>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,124 +1,124 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
|
||||
<TableHeader date-picker area showExport>
|
||||
<template #select>
|
||||
<!-- <el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择电压等级" value-key="id">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
|
||||
clearable placeholder="请选择终端厂家" value-key="id">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择干扰源类型" value-key="id">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/station'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/warnSubstationDetail',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'provinceCompany', title: '地级区', minWidth: "100px", },
|
||||
{ field: 'cityCompany', title: '地区公司', minWidth: "100px", },
|
||||
{ field: 'plantName', title: '变电站名称', minWidth: "180px", },
|
||||
{ field: 'plantVoltageLevel', title: '电压等级', minWidth: "100px", },
|
||||
{ field: 'onlineMonitorCounts', title: '在线监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
|
||||
{ field: 'alertMonitorCounts', title: '告警监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
|
||||
{ field: 'alertCounts', title: '告警次数', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'alertAlarmFrequency', title: '告警频次(次/点)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "150px", },
|
||||
{
|
||||
title: '各项稳态指标告警频次(次/点)', children: [
|
||||
{ field: 'frequencyDeviation', title: '频率偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'voltageDeviation', title: '电压偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'harmonicVoltage', title: '谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'harmonicCurrent', title: '谐波电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'threePhaseVoltageUnbalance', title: '三相电压不平衡度', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "180px", },
|
||||
{ field: 'flicker', title: '闪变', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'negative', title: '负序电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'interHarmonic', title: '间谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
]
|
||||
}, {
|
||||
title: '各项暂态指标告警频次(次/点)', children: [
|
||||
{ field: 'shortInterruption', title: '短时中断', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'voltageDip', title: '电压暂降', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
{ field: 'voltageSwell', title: '电压暂升', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "100px", },
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
|
||||
<TableHeader date-picker area showExport>
|
||||
<template #select>
|
||||
<!-- <el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择电压等级" value-key="id">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
|
||||
clearable placeholder="请选择终端厂家" value-key="id">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择干扰源类型" value-key="id">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/station'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/warnSubstationDetail',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'provinceCompany', title: '地级区', minWidth: "100px", },
|
||||
{ field: 'cityCompany', title: '地区公司', minWidth: "100px", },
|
||||
{ field: 'plantName', title: '变电站名称', minWidth: "180px", },
|
||||
{ field: 'plantVoltageLevel', title: '电压等级', minWidth: "100px", },
|
||||
{ field: 'onlineMonitorCounts', title: '在线监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
|
||||
{ field: 'alertMonitorCounts', title: '告警监测点数量(个)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
|
||||
{ field: 'alertCounts', title: '告警次数', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'alertAlarmFrequency', title: '告警频次(次/点)', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "90px", },
|
||||
{
|
||||
title: '各项稳态指标告警频次(次/点)', children: [
|
||||
{ field: 'frequencyDeviation', title: '频率偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'voltageDeviation', title: '电压偏差', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'harmonicVoltage', title: '谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'harmonicCurrent', title: '谐波电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'threePhaseVoltageUnbalance', title: '三相电压不平衡度', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "130px", },
|
||||
{ field: 'flicker', title: '闪变', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'negative', title: '负序电流', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'interHarmonic', title: '间谐波电压', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
]
|
||||
}, {
|
||||
title: '各项暂态指标告警频次(次/点)', children: [
|
||||
{ field: 'shortInterruption', title: '短时中断', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'voltageDip', title: '电压暂降', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
{ field: 'voltageSwell', title: '电压暂升', formatter: (row: any) => { return row.cellValue == -1 ? '/' : row.cellValue }, minWidth: "80px", },
|
||||
]
|
||||
},
|
||||
|
||||
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
|
||||
}
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,139 +1,139 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<!-- <el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择电压等级" value-key="id">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
|
||||
clearable placeholder="请选择终端厂家" value-key="id">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择干扰源类型" value-key="id">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/details'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/lineOverLimit',
|
||||
method: 'POST',
|
||||
|
||||
column: [
|
||||
{ field: 'index', title: '序号', width: '80', formatter: (row: any) => { return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 } },
|
||||
{ field: 'provinceCompany', title: '地级区', minWidth: "150px", },
|
||||
{ field: 'cityCompany', title: '供电公司', minWidth: "150px", },
|
||||
{ field: 'subName', title: '变电站', minWidth: "150px", },
|
||||
{ field: 'lineScale', title: '电压等级', minWidth: "150px", },
|
||||
{ field: 'lineName', title: '监测点名称', minWidth: "150px", },
|
||||
{ field: 'loadType', title: '干扰源类型', minWidth: "150px", },
|
||||
{ field: 'lineObjectName', title: '监测点对象名称', minWidth: "150px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
|
||||
{ field: 'overDay', title: '超标天数', minWidth: "150px", },
|
||||
{ field: 'freqOverDay', title: '频率偏差超标天数', minWidth: "150px", },
|
||||
{ field: 'volDevOverDay', title: '电压偏差超标天数', minWidth: "180px", },
|
||||
{ field: 'volDisOverDay', title: '电压总畸变率超标天数', minWidth: "180px", },
|
||||
{ field: 'volContainOverDay', title: '谐波电压含有率超标天数', minWidth: "180px", },
|
||||
{ field: 'harmVolOverDay', title: '谐波电压超标天数', minWidth: "180px", },
|
||||
{ field: 'harmCurOverDay', title: '谐波电流超标天数', minWidth: "180px", },
|
||||
{
|
||||
title: '各次谐波电压含有率超标天数',
|
||||
children: [
|
||||
{ field: 'overVolThreeTimes', title: '3次', minWidth: "80px", },
|
||||
{ field: 'overVolFiveTimes', title: '5次', minWidth: "80px", },
|
||||
{ field: 'overVolSevenTimes', title: '7次', minWidth: "80px", },
|
||||
{ field: 'overVolElevenTimes', title: '11次', minWidth: "80px", },
|
||||
{ field: 'overVolThirteenTimes', title: '13次', minWidth: "80px", },
|
||||
{ field: 'overVolTwentyThreeTimes', title: '23次', minWidth: "80px", },
|
||||
{ field: 'overVolTwentyFiveTimes', title: '25次', minWidth: "80px", },
|
||||
{ field: 'overVolOtherTimes', title: '其他次', minWidth: "80px", },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '各次谐波电流幅值超标天数',
|
||||
children: [
|
||||
{ field: 'overCurThreeTimes', title: '3次', minWidth: "80px", },
|
||||
{ field: 'overCurFiveTimes', title: '5次', minWidth: "80px", },
|
||||
{ field: 'overCurSevenTimes', title: '7次', minWidth: "80px", },
|
||||
{ field: 'overCurElevenTimes', title: '11次', minWidth: "80px", },
|
||||
{ field: 'overCurThirteenTimes', title: '13次', minWidth: "80px", },
|
||||
{ field: 'overCurTwentyThreeTimes', title: '23次', minWidth: "80px", },
|
||||
{ field: 'overCurTwentyFiveTimes', title: '25次', minWidth: "80px", },
|
||||
{ field: 'overCurOtherTimes', title: '其他次', minWidth: "80px", },
|
||||
|
||||
],
|
||||
},
|
||||
{ field: 'threeUnbalance', title: '三相电压不平衡度超标天数', minWidth: "180px", },
|
||||
{ field: 'negativeOverDay', title: '负序电流超标天数', minWidth: "180px", },
|
||||
{ field: 'flickerOverDay', title: '闪变超标天数', minWidth: "180px", },
|
||||
{ field: 'monitorNumber', title: '监测点编号', minWidth: "180px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
},
|
||||
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.serverName = "harmonic-boot"
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<!-- <el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" placeholder="请选择统计类型" value-key="id">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择电压等级" value-key="id">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" filterable multiple collapse-tags
|
||||
clearable placeholder="请选择终端厂家" value-key="id">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" filterable multiple collapse-tags clearable
|
||||
placeholder="请选择干扰源类型" value-key="id">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="item">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup />
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/details'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ["Report_Type"])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/lineOverLimit',
|
||||
method: 'POST',
|
||||
|
||||
column: [
|
||||
{ field: 'index', title: '序号', width: '80', formatter: (row: any) => { return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1 } },
|
||||
{ field: 'provinceCompany', title: '地级区', minWidth: "150px", },
|
||||
{ field: 'cityCompany', title: '供电公司', minWidth: "150px", },
|
||||
{ field: 'subName', title: '变电站', minWidth: "150px", },
|
||||
{ field: 'lineScale', title: '电压等级', minWidth: "120px", },
|
||||
{ field: 'lineName', title: '监测点名称', minWidth: "150px", },
|
||||
{ field: 'loadType', title: '干扰源类型', minWidth: "150px", },
|
||||
{ field: 'lineObjectName', title: '监测点对象名称', minWidth: "150px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
|
||||
{ field: 'overDay', title: '超标天数', minWidth: "80px", },
|
||||
{ field: 'freqOverDay', title: '频率偏差超标天数', minWidth: "100px", },
|
||||
{ field: 'volDevOverDay', title: '电压偏差超标天数', minWidth: "100px", },
|
||||
{ field: 'volDisOverDay', title: '电压总畸变率超标天数', minWidth: "100px", },
|
||||
{ field: 'volContainOverDay', title: '谐波电压含有率超标天数', minWidth: "110px", },
|
||||
{ field: 'harmVolOverDay', title: '谐波电压超标天数', minWidth: "100px", },
|
||||
{ field: 'harmCurOverDay', title: '谐波电流超标天数', minWidth: "100px", },
|
||||
{
|
||||
title: '各次谐波电压含有率超标天数',
|
||||
children: [
|
||||
{ field: 'overVolThreeTimes', title: '3次', minWidth: "70px", },
|
||||
{ field: 'overVolFiveTimes', title: '5次', minWidth: "70px", },
|
||||
{ field: 'overVolSevenTimes', title: '7次', minWidth: "70px", },
|
||||
{ field: 'overVolElevenTimes', title: '11次', minWidth: "70px", },
|
||||
{ field: 'overVolThirteenTimes', title: '13次', minWidth: "70px", },
|
||||
{ field: 'overVolTwentyThreeTimes', title: '23次', minWidth: "70px", },
|
||||
{ field: 'overVolTwentyFiveTimes', title: '25次', minWidth: "70px", },
|
||||
{ field: 'overVolOtherTimes', title: '其他次', minWidth: "70px", },
|
||||
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '各次谐波电流幅值超标天数',
|
||||
children: [
|
||||
{ field: 'overCurThreeTimes', title: '3次', minWidth: "70px", },
|
||||
{ field: 'overCurFiveTimes', title: '5次', minWidth: "70px", },
|
||||
{ field: 'overCurSevenTimes', title: '7次', minWidth: "70px", },
|
||||
{ field: 'overCurElevenTimes', title: '11次', minWidth: "70px", },
|
||||
{ field: 'overCurThirteenTimes', title: '13次', minWidth: "70px", },
|
||||
{ field: 'overCurTwentyThreeTimes', title: '23次', minWidth: "70px", },
|
||||
{ field: 'overCurTwentyFiveTimes', title: '25次', minWidth: "70px", },
|
||||
{ field: 'overCurOtherTimes', title: '其他次', minWidth: "70px", },
|
||||
|
||||
],
|
||||
},
|
||||
{ field: 'threeUnbalance', title: '三相电压不平衡度超标天数', minWidth: "110px", },
|
||||
{ field: 'negativeOverDay', title: '负序电流超标天数', minWidth: "100px", },
|
||||
{ field: 'flickerOverDay', title: '闪变超标天数', minWidth: "100px", },
|
||||
{ field: 'monitorNumber', title: '监测点编号', minWidth: "180px", formatter: (row: any) => { return row.cellValue == null ? '/' : row.cellValue } },
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
},
|
||||
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.serverName = "harmonic-boot"
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,385 +1,385 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
placeholder="请选择统计类型"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择电压等级"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择终端厂家"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择干扰源类型"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup :key="num" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/contrast'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const num = ref(0)
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/overAreaStatistics',
|
||||
method: 'POST',
|
||||
isWebPaging: true,
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '电网拓扑', minWidth: '150' },
|
||||
{
|
||||
field: 'onlineMonitorNumber',
|
||||
title: '在线监测点数量(个)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'overLimitMonitorNumber',
|
||||
title: '超标监测点数量(个)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'overBiLi',
|
||||
title: '超标监测点占比(%)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '频率偏差超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'frequencyMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'frequencyBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'frequencyOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压偏差超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'voltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'voltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'voltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '谐波电压超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'harmonicVoltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicVoltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicVoltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '谐波电流超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'harmonicCurrentMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicCurrentBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicCurrentOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '三相电压不平衡度超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'threePhaseVoltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'threePhaseVoltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'threePhaseVoltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '闪变超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'flickerMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'flickerBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'flickerOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '负序电流超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'negativeMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'negativeBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'negativeOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '间谐波电压超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'interHarmonicMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'interHarmonicBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '120px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'interHarmonicOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '200px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[1].title = tableStore.table.params.statisticalType.name
|
||||
num.value += 1
|
||||
}
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.serverName = 'harmonic-boot'
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
placeholder="请选择统计类型"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择电压等级"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择终端厂家"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
filterable
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
placeholder="请选择干扰源类型"
|
||||
value-key="id"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup :key="num" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/detailedAnalysis/contrast'
|
||||
})
|
||||
const view = ref(true)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
|
||||
const num = ref(0)
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/harmonic-boot/detailAnalysis/overAreaStatistics',
|
||||
method: 'POST',
|
||||
isWebPaging: true,
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'name', title: '电网拓扑', minWidth: '150' },
|
||||
{
|
||||
field: 'onlineMonitorNumber',
|
||||
title: '在线监测点数量(个)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'overLimitMonitorNumber',
|
||||
title: '超标监测点数量(个)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'overBiLi',
|
||||
title: '超标监测点占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '频率偏差超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'frequencyMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'frequencyBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'frequencyOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '电压偏差超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'voltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'voltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'voltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '谐波电压超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'harmonicVoltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicVoltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicVoltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '谐波电流超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'harmonicCurrentMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicCurrentBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'harmonicCurrentOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '三相电压不平衡度超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'threePhaseVoltageMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'threePhaseVoltageBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'threePhaseVoltageOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '闪变超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'flickerMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'flickerBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'flickerOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '负序电流超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'negativeMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'negativeBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'negativeOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '间谐波电压超标情况',
|
||||
children: [
|
||||
{
|
||||
field: 'interHarmonicMonitorNumber',
|
||||
title: '超标点数(天/点)',
|
||||
minWidth: '140px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'interHarmonicBiLi',
|
||||
title: '超标占比(%)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'interHarmonicOverDayBiLi',
|
||||
title: '平均超标天数(天/点)',
|
||||
minWidth: '150px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[1].title = tableStore.table.params.statisticalType.name
|
||||
num.value += 1
|
||||
}
|
||||
})
|
||||
tableStore.table.params.statisticalType = classificationData[0]
|
||||
tableStore.table.params.serverName = 'harmonic-boot'
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
@@ -1,496 +1,494 @@
|
||||
<template>
|
||||
<div class="flex" style="margin: 15px 0">
|
||||
<span style="width: 100px; margin-top: 3px">电压等级:</span>
|
||||
<el-checkbox
|
||||
:indeterminate="isIndeterminate"
|
||||
v-model="checkAll"
|
||||
@change="handleCheckAllChange"
|
||||
style="margin-right: 28px"
|
||||
>
|
||||
全选
|
||||
</el-checkbox>
|
||||
<el-checkbox-group
|
||||
v-model="checkedVoltage"
|
||||
@change="handleCheckedVoltageChange"
|
||||
style="height: 72px; overflow-y: auto; flex: 1"
|
||||
>
|
||||
<el-checkbox v-for="(item, index) in grade" :label="item" :key="index">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="flex" style="margin: 15px 0">
|
||||
<span style="width: 100px; margin-top: 3px">干扰源类型:</span>
|
||||
<el-checkbox
|
||||
:indeterminate="isIndeterminate1"
|
||||
v-model="checkAll1"
|
||||
@change="handleCheckAllChange1"
|
||||
style="margin-right: 28px"
|
||||
>
|
||||
全选
|
||||
</el-checkbox>
|
||||
<el-checkbox-group
|
||||
v-model="checkedSource"
|
||||
@change="handleCheckedSourceChange"
|
||||
style="height: 72px; overflow-y: auto; flex: 1"
|
||||
>
|
||||
<el-checkbox v-for="(item, index) in type" :label="item" :key="index">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="flex" style="margin: 15px 0">
|
||||
<span style="width: 100px; line-height: 32px">兼容曲线:</span>
|
||||
<el-radio-group v-model="radio" @change="radioChange">
|
||||
<el-radio label="ITIC">ITIC</el-radio>
|
||||
<el-radio label="F47">F47</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<my-echart class="bars_w" :options="echartList" />
|
||||
|
||||
<vxe-table class="dw" :data="TableData" height="50px" v-bind="defaultAttribute">
|
||||
<vxe-column field="name" title="名称" width="100px"></vxe-column>
|
||||
<vxe-column field="totalEvents" title="事件总数" width="100px"></vxe-column>
|
||||
<vxe-column field="tolerable" title="可容忍" width="100px"></vxe-column>
|
||||
<vxe-column field="Intolerable" title="不可容忍" width="100px"></vxe-column>
|
||||
</vxe-table>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { ref, reactive } from 'vue'
|
||||
const dictData = useDictData()
|
||||
const isIndeterminate = ref(false)
|
||||
const isIndeterminate1 = ref(false)
|
||||
const checkAll = ref(true)
|
||||
const checkAll1 = ref(true)
|
||||
const radio = ref('ITIC')
|
||||
const echartList = ref({})
|
||||
const ITIC = ref({})
|
||||
const F47 = ref({})
|
||||
const pointI: any = ref([])
|
||||
const pointIun: any = ref([])
|
||||
const pointF: any = ref([])
|
||||
const pointFun: any = ref([])
|
||||
const datalist: any = ref([])
|
||||
const TableData = ref([
|
||||
{
|
||||
name: '事件个数',
|
||||
totalEvents: '',
|
||||
tolerable: '',
|
||||
Intolerable: ''
|
||||
}
|
||||
])
|
||||
const checkedVoltage: any = ref(ref(dictData.getBasicData('Dev_Voltage_Stand')))
|
||||
const checkedSource: any = ref(dictData.getBasicData('Interference_Source'))
|
||||
const grade = ref(dictData.getBasicData('Dev_Voltage_Stand'))
|
||||
const type = ref(dictData.getBasicData('Interference_Source'))
|
||||
// 电压等级多选
|
||||
const handleCheckedVoltageChange = (val: any) => {
|
||||
const checkedCount = val.length
|
||||
checkAll.value = checkedCount === grade.value.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < grade.value.length
|
||||
}
|
||||
const handleCheckAllChange = (val: any) => {
|
||||
checkedVoltage.value = val ? grade.value : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
// 干扰源类型多选
|
||||
const handleCheckAllChange1 = (val: any) => {
|
||||
checkedSource.value = val ? type.value : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedSourceChange = (val: any) => {
|
||||
const checkedCount = val.length
|
||||
checkAll1.value = checkedCount === type.value.length
|
||||
isIndeterminate1.value = checkedCount > 0 && checkedCount < type.value.length
|
||||
}
|
||||
|
||||
const info = async (list: any) => {
|
||||
datalist.value = []
|
||||
list.forEach((item: any) => {
|
||||
// if (item.eventValue < 2 && item.eventValue > 0) {
|
||||
datalist.value.push(item)
|
||||
// }
|
||||
})
|
||||
await gongfunction()
|
||||
|
||||
ITIC.value = {
|
||||
title: {
|
||||
text: 'ITIC曲线'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[4] == undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
let relVal = ''
|
||||
relVal = "<font style='color:" + "'>监测点名称:" + ' ' + ' ' + a[0].value[7] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>持续时间:" +
|
||||
' ' +
|
||||
' ' +
|
||||
a[0].value[0].toFixed(3) +
|
||||
's</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" + "'>特征幅值:" + ' ' + ' ' + a[0].value[1].toFixed(3) + '%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||
// selectedMode: false,
|
||||
left: '80px',
|
||||
top: '18px'
|
||||
},
|
||||
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||||
xAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: '%'
|
||||
},
|
||||
dataZoom: {
|
||||
type: null,
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '上限',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '下限',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointI.value
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointIun.value
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
F47.value = {
|
||||
title: {
|
||||
text: 'F47曲线'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[4] == undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
let relVal = ''
|
||||
relVal = "<font style='color:" + "'>监测点名称:" + ' ' + ' ' + a[0].value[7] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>持续时间:" +
|
||||
' ' +
|
||||
' ' +
|
||||
Math.floor(a[0].value[0] * 1000) / 1000 +
|
||||
's</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>特征幅值:" +
|
||||
' ' +
|
||||
' ' +
|
||||
Math.floor(a[0].value[1] * 1000) / 1000 +
|
||||
'%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['分割线', '可容忍事件', '不可容忍事件'],
|
||||
// selectedMode: false,
|
||||
left: '80px',
|
||||
top: '18px'
|
||||
},
|
||||
color: ['#DAA520', 'green', 'red'],
|
||||
xAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: '%'
|
||||
},
|
||||
dataZoom: {
|
||||
type: null,
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '分割线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointF.value
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointFun.value
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
radioChange(radio.value)
|
||||
}
|
||||
const radioChange = (e: any) => {
|
||||
if (e == 'ITIC') {
|
||||
echartList.value = ITIC.value
|
||||
TableData.value[0].totalEvents = pointI.value.length + pointIun.value.length
|
||||
TableData.value[0].tolerable = pointI.value.length
|
||||
TableData.value[0].Intolerable = pointIun.value.length
|
||||
} else if (e == 'F47') {
|
||||
echartList.value = F47.value
|
||||
TableData.value[0].totalEvents = pointF.value.length + pointFun.value.length
|
||||
TableData.value[0].tolerable = pointF.value.length
|
||||
TableData.value[0].Intolerable = pointFun.value.length
|
||||
}
|
||||
}
|
||||
|
||||
const gongfunction = () => {
|
||||
var standI = 0
|
||||
var unstandI = 0
|
||||
var standF = 0
|
||||
var unstandF = 0
|
||||
pointI.value = []
|
||||
pointIun.value = []
|
||||
pointF.value = []
|
||||
pointFun.value = []
|
||||
var total = 0
|
||||
total = datalist.value.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < datalist.value.length; i++) {
|
||||
var point = []
|
||||
var xx = datalist.value[i].persistTime
|
||||
var yy = datalist.value[i].eventValue * 100
|
||||
var time = datalist.value[i].time.replace('T', ' ')
|
||||
var company = datalist.value[i].gdName
|
||||
var substation = datalist.value[i].subName
|
||||
var index = datalist.value[i].lineId
|
||||
var eventId = datalist.value[i].eventId
|
||||
var lineName = datalist.value[i].lineName
|
||||
point = [xx, yy, time, company, substation, index, eventId, lineName]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0
|
||||
line = 230 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ checkedVoltage, checkedSource, info })
|
||||
const layout = mainHeight(390) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
.bars_w {
|
||||
height: calc(v-bind('layout.height'));
|
||||
}
|
||||
.dw {
|
||||
position: absolute;
|
||||
top: 210px;
|
||||
right: 70px;
|
||||
}
|
||||
:deep(.vxe-table--body-wrapper) {
|
||||
min-height: 30px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="flex">
|
||||
<span style="width: 100px; margin-top: 3px">电压等级:</span>
|
||||
<el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange"
|
||||
style="margin-right: 28px">
|
||||
全选
|
||||
</el-checkbox>
|
||||
<el-checkbox-group v-model="checkedVoltage" @change="handleCheckedVoltageChange"
|
||||
style="height: 72px; overflow-y: auto; flex: 1">
|
||||
<el-checkbox v-for="(item, index) in grade" :label="item" :key="index">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span style="width: 100px; margin-top: 3px">干扰源类型:</span>
|
||||
<el-checkbox :indeterminate="isIndeterminate1" v-model="checkAll1" @change="handleCheckAllChange1"
|
||||
style="margin-right: 28px">
|
||||
全选
|
||||
</el-checkbox>
|
||||
<el-checkbox-group v-model="checkedSource" @change="handleCheckedSourceChange"
|
||||
style="height: 72px; overflow-y: auto; flex: 1">
|
||||
<el-checkbox v-for="(item, index) in type" :label="item" :key="index">{{ item.name }}</el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<span style="width: 100px; line-height: 32px">兼容曲线:</span>
|
||||
<el-radio-group v-model="radio" @change="radioChange">
|
||||
<el-radio label="ITIC">ITIC</el-radio>
|
||||
<el-radio label="F47">F47</el-radio>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<my-echart class="bars_w" :options="echartList" />
|
||||
|
||||
<vxe-table class="dw" :data="TableData" height="50px" v-bind="defaultAttribute">
|
||||
<vxe-column field="name" title="名称" width="100px"></vxe-column>
|
||||
<vxe-column field="totalEvents" title="事件总数" width="100px"></vxe-column>
|
||||
<vxe-column field="tolerable" title="可容忍" width="100px"></vxe-column>
|
||||
<vxe-column field="Intolerable" title="不可容忍" width="100px"></vxe-column>
|
||||
</vxe-table>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { ref, reactive } from 'vue'
|
||||
import { Bottom } from '@element-plus/icons-vue/dist/types'
|
||||
const dictData = useDictData()
|
||||
const isIndeterminate = ref(false)
|
||||
const isIndeterminate1 = ref(false)
|
||||
const checkAll = ref(true)
|
||||
const checkAll1 = ref(true)
|
||||
const radio = ref('ITIC')
|
||||
const echartList = ref({})
|
||||
const ITIC = ref({})
|
||||
const F47 = ref({})
|
||||
const pointI: any = ref([])
|
||||
const pointIun: any = ref([])
|
||||
const pointF: any = ref([])
|
||||
const pointFun: any = ref([])
|
||||
const datalist: any = ref([])
|
||||
const TableData = ref([
|
||||
{
|
||||
name: '事件个数',
|
||||
totalEvents: '',
|
||||
tolerable: '',
|
||||
Intolerable: ''
|
||||
}
|
||||
])
|
||||
const checkedVoltage: any = ref(ref(dictData.getBasicData('Dev_Voltage_Stand')))
|
||||
const checkedSource: any = ref(dictData.getBasicData('Interference_Source'))
|
||||
const grade = ref(dictData.getBasicData('Dev_Voltage_Stand'))
|
||||
const type = ref(dictData.getBasicData('Interference_Source'))
|
||||
// 电压等级多选
|
||||
const handleCheckedVoltageChange = (val: any) => {
|
||||
const checkedCount = val.length
|
||||
checkAll.value = checkedCount === grade.value.length
|
||||
isIndeterminate.value = checkedCount > 0 && checkedCount < grade.value.length
|
||||
}
|
||||
const handleCheckAllChange = (val: any) => {
|
||||
checkedVoltage.value = val ? grade.value : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
// 干扰源类型多选
|
||||
const handleCheckAllChange1 = (val: any) => {
|
||||
checkedSource.value = val ? type.value : []
|
||||
isIndeterminate.value = false
|
||||
}
|
||||
const handleCheckedSourceChange = (val: any) => {
|
||||
const checkedCount = val.length
|
||||
checkAll1.value = checkedCount === type.value.length
|
||||
isIndeterminate1.value = checkedCount > 0 && checkedCount < type.value.length
|
||||
}
|
||||
|
||||
const info = async (list: any) => {
|
||||
datalist.value = []
|
||||
list.forEach((item: any) => {
|
||||
// if (item.eventValue < 2 && item.eventValue > 0) {
|
||||
datalist.value.push(item)
|
||||
// }
|
||||
})
|
||||
await gongfunction()
|
||||
|
||||
ITIC.value = {
|
||||
title: {
|
||||
text: 'ITIC曲线'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[4] == undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
let relVal = ''
|
||||
relVal = "<font style='color:" + "'>监测点名称:" + ' ' + ' ' + a[0].value[7] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>持续时间:" +
|
||||
' ' +
|
||||
' ' +
|
||||
a[0].value[0].toFixed(3) +
|
||||
's</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" + "'>特征幅值:" + ' ' + ' ' + a[0].value[1].toFixed(3) + '%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||
// selectedMode: false,
|
||||
left: '80px',
|
||||
top: '18px'
|
||||
},
|
||||
grid: {
|
||||
top: '60px',
|
||||
bottom: '10px'
|
||||
},
|
||||
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||||
xAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: '%'
|
||||
},
|
||||
dataZoom: {
|
||||
type: null,
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '上限',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.001, 200],
|
||||
[0.003, 140],
|
||||
[0.003, 120],
|
||||
[0.5, 120],
|
||||
[0.5, 110],
|
||||
[10, 110],
|
||||
[1000, 110]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '下限',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.02, 0],
|
||||
[0.02, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[10, 90],
|
||||
[1000, 90]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointI.value
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointIun.value
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
F47.value = {
|
||||
title: {
|
||||
text: 'F47曲线'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (a: any) {
|
||||
if (a[0].value[4] == undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
let relVal = ''
|
||||
relVal = "<font style='color:" + "'>监测点名称:" + ' ' + ' ' + a[0].value[7] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>供电公司:" + ' ' + ' ' + a[0].value[3] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>变电站:" + ' ' + ' ' + a[0].value[4] + '</font><br/>'
|
||||
relVal += "<font style='color:" + "'>发生时刻:" + ' ' + ' ' + a[0].value[2] + '</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>持续时间:" +
|
||||
' ' +
|
||||
' ' +
|
||||
Math.floor(a[0].value[0] * 1000) / 1000 +
|
||||
's</font><br/>'
|
||||
relVal +=
|
||||
"<font style='color:" +
|
||||
"'>特征幅值:" +
|
||||
' ' +
|
||||
' ' +
|
||||
Math.floor(a[0].value[1] * 1000) / 1000 +
|
||||
'%</font>'
|
||||
return relVal
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['分割线', '可容忍事件', '不可容忍事件'],
|
||||
// selectedMode: false,
|
||||
left: '80px',
|
||||
top: '18px'
|
||||
},
|
||||
grid: {
|
||||
top: '60px',
|
||||
bottom: '10px'
|
||||
},
|
||||
color: ['#DAA520', 'green', 'red'],
|
||||
xAxis: {
|
||||
type: 'log',
|
||||
min: '0.001',
|
||||
max: '1000',
|
||||
name: 's',
|
||||
splitLine: { show: false }
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 3,
|
||||
name: '%'
|
||||
},
|
||||
dataZoom: {
|
||||
type: null,
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
name: '分割线',
|
||||
type: 'line',
|
||||
data: [
|
||||
[0.05, 0],
|
||||
[0.05, 50],
|
||||
[0.2, 50],
|
||||
[0.2, 70],
|
||||
[0.5, 70],
|
||||
[0.5, 80],
|
||||
[10, 80],
|
||||
[1000, 80]
|
||||
],
|
||||
showSymbol: false,
|
||||
tooltips: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointF.value
|
||||
},
|
||||
{
|
||||
name: '不可容忍事件',
|
||||
type: 'scatter',
|
||||
symbol: 'circle',
|
||||
data: pointFun.value
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
radioChange(radio.value)
|
||||
}
|
||||
const radioChange = (e: any) => {
|
||||
if (e == 'ITIC') {
|
||||
echartList.value = ITIC.value
|
||||
TableData.value[0].totalEvents = pointI.value.length + pointIun.value.length
|
||||
TableData.value[0].tolerable = pointI.value.length
|
||||
TableData.value[0].Intolerable = pointIun.value.length
|
||||
} else if (e == 'F47') {
|
||||
echartList.value = F47.value
|
||||
TableData.value[0].totalEvents = pointF.value.length + pointFun.value.length
|
||||
TableData.value[0].tolerable = pointF.value.length
|
||||
TableData.value[0].Intolerable = pointFun.value.length
|
||||
}
|
||||
}
|
||||
|
||||
const gongfunction = () => {
|
||||
var standI = 0
|
||||
var unstandI = 0
|
||||
var standF = 0
|
||||
var unstandF = 0
|
||||
pointI.value = []
|
||||
pointIun.value = []
|
||||
pointF.value = []
|
||||
pointFun.value = []
|
||||
var total = 0
|
||||
total = datalist.value.length
|
||||
if (total == 0) {
|
||||
} else {
|
||||
for (var i = 0; i < datalist.value.length; i++) {
|
||||
var point = []
|
||||
var xx = datalist.value[i].persistTime
|
||||
var yy = datalist.value[i].eventValue * 100
|
||||
var time = datalist.value[i].time.replace('T', ' ')
|
||||
var company = datalist.value[i].gdName
|
||||
var substation = datalist.value[i].subName
|
||||
var index = datalist.value[i].lineId
|
||||
var eventId = datalist.value[i].eventId
|
||||
var lineName = datalist.value[i].lineName
|
||||
point = [xx, yy, time, company, substation, index, eventId, lineName]
|
||||
|
||||
if (xx <= 0.003) {
|
||||
var line = 0
|
||||
line = 230 - 30000 * xx
|
||||
if (yy > line) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.02) {
|
||||
if (yy > 120) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 0.5) {
|
||||
if (yy > 120 || yy < 70) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else if (xx <= 10) {
|
||||
if (yy > 110 || yy < 80) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 110 || yy < 90) {
|
||||
unstandI++
|
||||
pointIun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
} else {
|
||||
standI++
|
||||
pointI.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
if (xx < 0.05) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else if (xx < 0.2) {
|
||||
if (yy > 50) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else if (xx < 0.5) {
|
||||
if (yy > 70) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
} else {
|
||||
if (yy > 80) {
|
||||
standF++
|
||||
pointF.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'green' } }
|
||||
})
|
||||
} else {
|
||||
unstandF++
|
||||
pointFun.value.push({
|
||||
value: point,
|
||||
itemStyle: { normal: { color: 'red' } }
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ checkedVoltage, checkedSource, info })
|
||||
const layout = mainHeight(320) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.flex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bars_w {
|
||||
height: calc(v-bind('layout.height'));
|
||||
}
|
||||
|
||||
.dw {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
right: 70px;
|
||||
}
|
||||
|
||||
:deep(.vxe-table--body-wrapper) {
|
||||
min-height: 30px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,356 +1,356 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker showExport>
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-radio-group v-model="tableStore.table.params.isType">
|
||||
<el-radio-button :label="0">在线</el-radio-button>
|
||||
<el-radio-button :label="1">离线</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="触发类型:">
|
||||
<el-select v-model="tableStore.table.params.waveType" placeholder="请选择触发类型" clearable multiple
|
||||
collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in triggeroptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否有波形:">
|
||||
<el-select v-model="tableStore.table.params.fileFlag" placeholder="请选择是否存在波形" clearable
|
||||
style="width: 100%">
|
||||
<el-option v-for="item in wareaoptions" :key="item.id" :label="item.label"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="暂态持续时间(s):">
|
||||
<el-input v-model="tableStore.table.params.persistMin" placeholder="请输入X秒"
|
||||
onkeyup="value=value.replace(/[^\d.]/g,'')" clearable style="width: 94px"></el-input>
|
||||
<el-tag style="margin-left: 5px">< 时间数 <</el-tag>
|
||||
<el-input v-model="tableStore.table.params.persistMax" placeholder="请输入X秒"
|
||||
onkeyup="value=value.replace(/[^\d.]/g,'')" clearable
|
||||
style="margin-left: 5px; width: 94px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="事件严重度:">
|
||||
<el-input v-model="tableStore.table.params.severityMin" placeholder="请输入正负数"
|
||||
onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable style="width: 94px"></el-input>
|
||||
<el-tag style="margin-left: 5px">< 严重度 <</el-tag>
|
||||
<el-input v-model="tableStore.table.params.severityMax" placeholder="请输入正负数"
|
||||
onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable
|
||||
style="margin-left: 5px; width: 94px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="暂降类型:">
|
||||
<el-select v-model="tableStore.table.params.eventType" placeholder="请选择暂降类型" clearable multiple
|
||||
collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in typeoptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="暂降原因:">
|
||||
<el-select v-model="tableStore.table.params.eventReason" placeholder="请选择暂降原因" clearable
|
||||
multiple collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in reasonoptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="暂降核实原因:">
|
||||
<el-select v-model="tableStore.table.params.verifyReason" placeholder="请选择暂降核实原因" clearable
|
||||
multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="item in verifyReasonList" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="变电站(监测点):">
|
||||
<el-cascader v-model="tableStore.table.params.lineIds" :options="options" :props="defaultProps"
|
||||
collapse-tags-tooltip style="width: 257px;" filterable clearable collapse-tags
|
||||
placeholder="请选择变电站(监测点)" :show-all-levels="false" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download">下载波形</el-button>
|
||||
<!-- <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button> -->
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
<addForm ref="addFormRef" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import addForm from './addForm.vue'
|
||||
import { getTransientValue } from '@/api/event-boot/report'
|
||||
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
|
||||
defineOptions({
|
||||
name: 'Region/transientlist'
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const adminInfo = useAdminInfo()
|
||||
const waveFormRef=ref()
|
||||
const pageHeight = mainHeight(20)
|
||||
const view = ref(true)
|
||||
const addFormRef = ref()
|
||||
const typeoptions = dictData.getBasicData('Event_Type')
|
||||
const tableRef = ref()
|
||||
const reasonoptions = dictData.getBasicData('Event_Reason')
|
||||
const triggeroptions = dictData.getBasicData('Event_Statis')
|
||||
const verifyReasonList: any = dictData.getBasicData('verifyReason')
|
||||
const wareaoptions = ref([
|
||||
{
|
||||
id: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
label: '否'
|
||||
}
|
||||
])
|
||||
const formData = ({
|
||||
deptIndex: adminInfo.$state.deptIndex,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
serverName: 'event-boot',
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
scale: null
|
||||
})
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/transient/getTransientValue',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '暂降发生时刻', minWidth: '200' },
|
||||
{ field: 'gdName', title: '供电公司', minWidth: '100' },
|
||||
{ field: 'subName', title: '变电站', minWidth: '200' },
|
||||
{ field: 'ip', title: '网络参数', minWidth: '200' },
|
||||
{ field: 'lineName', title: '监测点', minWidth: '100' },
|
||||
{ field: 'scale', title: '电压等级(kV)', minWidth: '120', },
|
||||
// {
|
||||
// field: 'verifyReason', title: '暂降核实原因', minWidth: '120', formatter: function (row) {
|
||||
// return verifyReasonList.filter(item => item.id == row.cellValue)[0]?.name || '/' //row.cellValue ? row.cellValue : '/'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// field: 'verifyReasonDetail', title: '暂降核实原因详情', minWidth: '200', formatter: function (row) {
|
||||
// return row.cellValue ? row.cellValue : '/'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降(骤升)幅值(%)',
|
||||
minWidth: '130',
|
||||
formatter: ({ row }: any) => (row.featureAmplitude * 100).toFixed(2)
|
||||
},
|
||||
{
|
||||
field: 'eventType',
|
||||
title: '触发类型',
|
||||
minWidth: '100',
|
||||
|
||||
formatter: ({ row }: any) => {
|
||||
return triggeroptions.filter(item => item.id == row.eventType)[0]?.name
|
||||
}
|
||||
},
|
||||
// { field: 'advanceType', title: '暂降类型', minWidth: '100', },
|
||||
{ field: 'advanceReason', title: '暂降原因', minWidth: '100' },
|
||||
{
|
||||
field: 'depth',
|
||||
title: '暂降深度(%)',
|
||||
minWidth: '100',
|
||||
formatter: ({ row }: any) =>
|
||||
row.featureAmplitude < 1 ? 100 - (row.featureAmplitude * 100).toFixed(0) : '/'
|
||||
},
|
||||
|
||||
{ field: 'duration', title: '持续时间(s)', minWidth: '100' },
|
||||
// { field: 'severity', title: '严重度', minWidth: '100', formatter: ({ row }: any) => (row.severity < 0 ? '/' : row.severity) },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '150',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
// {
|
||||
// name: 'edit',
|
||||
// title: '人工维护',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton',
|
||||
// click: async row => {
|
||||
// addFormRef.value.open(row)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
// row.loading = true
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
},100)
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 1
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => { }
|
||||
})
|
||||
const options = ref([
|
||||
|
||||
|
||||
])
|
||||
const defaultProps = {
|
||||
multiple: true,
|
||||
// checkStrictly: true,
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
emitPath: false
|
||||
}
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.isType = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
tableStore.table.params.statisticalType = {}
|
||||
tableStore.table.params.eventValueMin = ''
|
||||
tableStore.table.params.eventValueMax = ''
|
||||
tableStore.table.params.persistMin = ''
|
||||
tableStore.table.params.persistMax = ''
|
||||
tableStore.table.params.severityMin = ''
|
||||
tableStore.table.params.severityMax = ''
|
||||
tableStore.table.params.eventType = []
|
||||
tableStore.table.params.eventReason = []
|
||||
tableStore.table.params.verifyReason = []
|
||||
tableStore.table.params.lineIds = []
|
||||
tableStore.table.params.waveType = []
|
||||
tableStore.table.params.fileFlag = ''
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
getTerminalTreeForFive(formData).then(res => {
|
||||
options.value = []
|
||||
let list = (res.data.map((item: any) => {
|
||||
return item.children.map((vv: any) => {
|
||||
vv.children.map((kk: any) => {
|
||||
kk.name = kk.name.replace(/\（.*?\）/, '')
|
||||
})
|
||||
return vv.children
|
||||
})
|
||||
}))[0]
|
||||
list.forEach((item: any) => {
|
||||
options.value.push(...item)
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
}
|
||||
// 导出列表
|
||||
const exportEvent = () => {
|
||||
let form = JSON.parse(JSON.stringify(tableStore.table.params))
|
||||
form.pageNum = 1
|
||||
form.pageSize = tableStore.table.total
|
||||
getTransientValue(form).then(res => {
|
||||
tableRef.value.getRef().exportData({
|
||||
filename: '暂态列表', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const download = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择数据')
|
||||
return
|
||||
}
|
||||
downloadWaveFile({
|
||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
||||
}).then((res: any) => {
|
||||
if (res.type == 'application/json') {
|
||||
ElMessage.warning('暂无可下载的波形文件!')
|
||||
return
|
||||
}
|
||||
ElMessage.info('下载中......')
|
||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '波形分析下载' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link) //释放标签
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tag.is-closable) {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker showExport>
|
||||
<template #select>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-radio-group v-model="tableStore.table.params.isType">
|
||||
<el-radio-button :label="0">在线</el-radio-button>
|
||||
<el-radio-button :label="1">离线</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="触发类型:">
|
||||
<el-select v-model="tableStore.table.params.waveType" placeholder="请选择触发类型" clearable multiple
|
||||
collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in triggeroptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否有波形:">
|
||||
<el-select v-model="tableStore.table.params.fileFlag" placeholder="请选择是否存在波形" clearable
|
||||
style="width: 100%">
|
||||
<el-option v-for="item in wareaoptions" :key="item.id" :label="item.label"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="暂态持续时间(s):">
|
||||
<el-input v-model="tableStore.table.params.persistMin" placeholder="请输入X秒"
|
||||
onkeyup="value=value.replace(/[^\d.]/g,'')" clearable style="width: 94px"></el-input>
|
||||
<el-tag style="margin-left: 5px">< 时间数 <</el-tag>
|
||||
<el-input v-model="tableStore.table.params.persistMax" placeholder="请输入X秒"
|
||||
onkeyup="value=value.replace(/[^\d.]/g,'')" clearable
|
||||
style="margin-left: 5px; width: 94px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="事件严重度:">
|
||||
<el-input v-model="tableStore.table.params.severityMin" placeholder="请输入正负数"
|
||||
onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable style="width: 94px"></el-input>
|
||||
<el-tag style="margin-left: 5px">< 严重度 <</el-tag>
|
||||
<el-input v-model="tableStore.table.params.severityMax" placeholder="请输入正负数"
|
||||
onkeyup="value=value.replace(/[^\d\.-]/g,'')" clearable
|
||||
style="margin-left: 5px; width: 94px"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="暂降类型:">
|
||||
<el-select v-model="tableStore.table.params.eventType" placeholder="请选择暂降类型" clearable multiple
|
||||
collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in typeoptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="暂降原因:">
|
||||
<el-select v-model="tableStore.table.params.eventReason" placeholder="请选择暂降原因" clearable
|
||||
multiple collapse-tags style="width: 100%">
|
||||
<el-option v-for="item in reasonoptions" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="暂降核实原因:">
|
||||
<el-select v-model="tableStore.table.params.verifyReason" placeholder="请选择暂降核实原因" clearable
|
||||
multiple collapse-tags collapse-tags-tooltip>
|
||||
<el-option v-for="item in verifyReasonList" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="变电站(监测点):">
|
||||
<el-cascader v-model="tableStore.table.params.lineIds" :options="options" :props="defaultProps"
|
||||
collapse-tags-tooltip style="width: 257px;" filterable clearable collapse-tags
|
||||
placeholder="请选择变电站(监测点)" :show-all-levels="false" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download">下载波形</el-button>
|
||||
<!-- <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出</el-button> -->
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
<addForm ref="addFormRef" @onSubmit="tableStore.index()" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import addForm from './addForm.vue'
|
||||
import { getTransientValue } from '@/api/event-boot/report'
|
||||
import { getTerminalTreeForFive } from '@/api/device-boot/terminalTree'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave, downloadWaveFile } from '@/api/event-boot/transient'
|
||||
defineOptions({
|
||||
name: 'Region/transientlist'
|
||||
})
|
||||
const dictData = useDictData()
|
||||
const adminInfo = useAdminInfo()
|
||||
const waveFormRef=ref()
|
||||
const pageHeight = mainHeight(20)
|
||||
const view = ref(true)
|
||||
const addFormRef = ref()
|
||||
const typeoptions = dictData.getBasicData('Event_Type')
|
||||
const tableRef = ref()
|
||||
const reasonoptions = dictData.getBasicData('Event_Reason')
|
||||
const triggeroptions = dictData.getBasicData('Event_Statis')
|
||||
const verifyReasonList: any = dictData.getBasicData('verifyReason')
|
||||
const wareaoptions = ref([
|
||||
{
|
||||
id: 1,
|
||||
label: '是'
|
||||
},
|
||||
{
|
||||
id: 0,
|
||||
label: '否'
|
||||
}
|
||||
])
|
||||
const formData = ({
|
||||
deptIndex: adminInfo.$state.deptIndex,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
serverName: 'event-boot',
|
||||
statisticalType: dictData.getBasicData('Statistical_Type', ['Report_Type'])[0],
|
||||
scale: null
|
||||
})
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/transient/getTransientValue',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '暂降发生时刻', minWidth: '200' },
|
||||
{ field: 'gdName', title: '供电公司', minWidth: '100' },
|
||||
{ field: 'subName', title: '变电站', minWidth: '200' },
|
||||
{ field: 'ip', title: '网络参数', minWidth: '200' },
|
||||
{ field: 'lineName', title: '监测点', minWidth: '100' },
|
||||
{ field: 'scale', title: '电压等级(kV)', minWidth: '120', },
|
||||
// {
|
||||
// field: 'verifyReason', title: '暂降核实原因', minWidth: '120', formatter: function (row) {
|
||||
// return verifyReasonList.filter(item => item.id == row.cellValue)[0]?.name || '/' //row.cellValue ? row.cellValue : '/'
|
||||
// }
|
||||
// },
|
||||
// {
|
||||
// field: 'verifyReasonDetail', title: '暂降核实原因详情', minWidth: '200', formatter: function (row) {
|
||||
// return row.cellValue ? row.cellValue : '/'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降(骤升)幅值(%)',
|
||||
minWidth: '130',
|
||||
formatter: ({ row }: any) => (row.featureAmplitude * 100).toFixed(2)
|
||||
},
|
||||
{
|
||||
field: 'eventType',
|
||||
title: '触发类型',
|
||||
minWidth: '100',
|
||||
|
||||
formatter: ({ row }: any) => {
|
||||
return triggeroptions.filter(item => item.id == row.eventType)[0]?.name
|
||||
}
|
||||
},
|
||||
// { field: 'advanceType', title: '暂降类型', minWidth: '100', },
|
||||
{ field: 'advanceReason', title: '暂降原因', minWidth: '100' },
|
||||
{
|
||||
field: 'depth',
|
||||
title: '暂降深度(%)',
|
||||
minWidth: '100',
|
||||
formatter: ({ row }: any) =>
|
||||
row.featureAmplitude < 1 ? 100 - (row.featureAmplitude * 100).toFixed(0) : '/'
|
||||
},
|
||||
|
||||
{ field: 'duration', title: '持续时间(s)', minWidth: '100' },
|
||||
// { field: 'severity', title: '严重度', minWidth: '100', formatter: ({ row }: any) => (row.severity < 0 ? '/' : row.severity) },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '150',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
// {
|
||||
// name: 'edit',
|
||||
// title: '人工维护',
|
||||
// type: 'primary',
|
||||
// icon: 'el-icon-Plus',
|
||||
// render: 'basicButton',
|
||||
// click: async row => {
|
||||
// addFormRef.value.open(row)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
// row.loading = true
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
},100)
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 1
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => { }
|
||||
})
|
||||
const options = ref([
|
||||
|
||||
|
||||
])
|
||||
const defaultProps = {
|
||||
multiple: true,
|
||||
// checkStrictly: true,
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
emitPath: false
|
||||
}
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.isType = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'event-boot'
|
||||
tableStore.table.params.statisticalType = {}
|
||||
tableStore.table.params.eventValueMin = ''
|
||||
tableStore.table.params.eventValueMax = ''
|
||||
tableStore.table.params.persistMin = ''
|
||||
tableStore.table.params.persistMax = ''
|
||||
tableStore.table.params.severityMin = ''
|
||||
tableStore.table.params.severityMax = ''
|
||||
tableStore.table.params.eventType = []
|
||||
tableStore.table.params.eventReason = []
|
||||
tableStore.table.params.verifyReason = []
|
||||
tableStore.table.params.lineIds = []
|
||||
tableStore.table.params.waveType = []
|
||||
tableStore.table.params.fileFlag = ''
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
getTerminalTreeForFive(formData).then(res => {
|
||||
options.value = []
|
||||
let list = (res.data.map((item: any) => {
|
||||
return item.children.map((vv: any) => {
|
||||
vv.children.map((kk: any) => {
|
||||
kk.name = kk.name.replace(/\（.*?\）/, '')
|
||||
})
|
||||
return vv.children
|
||||
})
|
||||
}))[0]
|
||||
list.forEach((item: any) => {
|
||||
options.value.push(...item)
|
||||
})
|
||||
|
||||
})
|
||||
})
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
}
|
||||
// 导出列表
|
||||
const exportEvent = () => {
|
||||
let form = JSON.parse(JSON.stringify(tableStore.table.params))
|
||||
form.pageNum = 1
|
||||
form.pageSize = tableStore.table.total
|
||||
getTransientValue(form).then(res => {
|
||||
tableRef.value.getRef().exportData({
|
||||
filename: '暂态列表', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const download = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择数据')
|
||||
return
|
||||
}
|
||||
downloadWaveFile({
|
||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
||||
}).then((res: any) => {
|
||||
if (res.type == 'application/json') {
|
||||
ElMessage.warning('暂无可下载的波形文件!')
|
||||
return
|
||||
}
|
||||
ElMessage.info('下载中......')
|
||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '波形分析下载' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link) //释放标签
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
:deep(.el-tag.is-closable) {
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,411 +1,411 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader area date-picker ref="header" />
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<MyEchartMap
|
||||
ref="EchartMap"
|
||||
:options="echartMapList"
|
||||
class="map"
|
||||
@eliminate="eliminate"
|
||||
@getRegionByRegion="getRegionByRegion"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
<div class="tall">
|
||||
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
|
||||
>
|
||||
<vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
|
||||
<vxe-column field="ci" title="区域暂降评估">
|
||||
<template #default="{ row }">
|
||||
{{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column sortable field="isCount" title="等级">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.ci == 0.05">暂无等级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="dw">
|
||||
<el-popover placement="left" :width="600" trigger="hover">
|
||||
<template #reference>
|
||||
<span class="level">详细区域暂降评估等级</span>
|
||||
</template>
|
||||
<vxe-table :data="areaData1" v-bind="defaultAttribute">
|
||||
<vxe-column title="等级" field="level" min-width="90"></vxe-column>
|
||||
<vxe-column title="1级" field="one" min-width="80"></vxe-column>
|
||||
<vxe-column title="2级" field="two" min-width="90"></vxe-column>
|
||||
<vxe-column title="3级" field="three" min-width="90"></vxe-column>
|
||||
<vxe-column title="4级" field="four" min-width="90"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
defineOptions({
|
||||
name: 'Region/transientassessment'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
const echartMapList: any = ref({})
|
||||
const echartList = ref({})
|
||||
const header = ref()
|
||||
const distributionData: any = ref([])
|
||||
const areaData1: any = ref([
|
||||
{
|
||||
level: '相对得分',
|
||||
one: '[0,0.4]',
|
||||
two: '(0.4,0.8)',
|
||||
three: '(0.8,1.2)',
|
||||
four: '(1.2,+∞)'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/advance-boot/balance/getBalanceInfo',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.deptId = tableStore.table.params.deptIndex
|
||||
},
|
||||
loadCallback: () => {
|
||||
header.value.areaRef.change()
|
||||
// 处理地图数据
|
||||
map(tableStore.table.data)
|
||||
tabulation(tableStore.table.data)
|
||||
histogram(tableStore.table.data)
|
||||
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
tableStore.table.params.loadType = null
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
|
||||
// 地图点击事件
|
||||
const getRegionByRegion = (list: any) => {
|
||||
tableStore.table.params.deptIndex = list.id
|
||||
tableStore.onTableAction('search', {})
|
||||
}
|
||||
// 消除点
|
||||
const eliminate = (name: string) => {
|
||||
echartMapList.value.options.series = []
|
||||
EchartMap.value.GetEchar(name)
|
||||
}
|
||||
|
||||
// 地图数处理
|
||||
const map = (res: any) => {
|
||||
let list: any = []
|
||||
res.forEach((item: any) => {
|
||||
list.push({
|
||||
name: item.areaName,
|
||||
value: item.ci
|
||||
})
|
||||
})
|
||||
|
||||
echartMapList.value = {
|
||||
name: '',
|
||||
title: {
|
||||
text: '区域暂降评估'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
console.log('🚀 ~ map ~ params:', params)
|
||||
|
||||
if (Number.isNaN(params.value) == true) {
|
||||
tips += params.name + '</br>'
|
||||
tips += '评估值:暂无数据'
|
||||
} else {
|
||||
tips += params.name + '</br>'
|
||||
tips += '评估值:' + params.value
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 2,
|
||||
left: 26,
|
||||
bottom: 20,
|
||||
showLabel: !0,
|
||||
|
||||
pieces: [
|
||||
{
|
||||
gt: -2,
|
||||
lte: -1,
|
||||
label: '无数据'
|
||||
},
|
||||
{
|
||||
gte: 0,
|
||||
lte: 0.4,
|
||||
label: '1级--相对得分 [0,0.4]'
|
||||
},
|
||||
{
|
||||
gt: 0.4,
|
||||
lte: 0.9,
|
||||
label: '2级--得分 (0.4,0.8]'
|
||||
},
|
||||
{
|
||||
gt: 0.9,
|
||||
lte: 1.2,
|
||||
label: '3级--相对得分 (0.8,1.2]'
|
||||
},
|
||||
{
|
||||
gt: 1.2,
|
||||
label: '4级--相对得分 (1.2,+∞]'
|
||||
}
|
||||
],
|
||||
inRange: {
|
||||
color: ['#ccc', '#A52a2a', '#FF9900', '#3399CC', '#339966']
|
||||
}
|
||||
},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// type: "scatter",
|
||||
type: 'map',
|
||||
mapName: name,
|
||||
coordinateSystem: 'geo',
|
||||
geoIndex: 0,
|
||||
animation: false, //坐标点是否显示动画
|
||||
roam: true,
|
||||
selectedMode: 'false', //是否允许选中多个区域
|
||||
symbol: 'pin',
|
||||
rippleEffect: {
|
||||
brushType: 'fill' // stroke|fill
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data: list
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
distributionData.value = res
|
||||
distributionData.value.forEach((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
item.ci = 0.05
|
||||
}
|
||||
})
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: header.value.areaRef.areaName
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.05) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:0'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:' + params[i].value
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
|
||||
data: res.map((item: any) => item.areaName)
|
||||
},
|
||||
yAxis: {
|
||||
name: ' 等级',
|
||||
min: 0,
|
||||
max: 2,
|
||||
// minInterval: 0.2,
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
// interval: 4,
|
||||
formatter: function (value: any) {
|
||||
var texts = ''
|
||||
if (value === 0.4) {
|
||||
texts = '1级'
|
||||
} else if (value === 0.8) {
|
||||
texts = '2级'
|
||||
} else if (value === 1.2) {
|
||||
texts = '3级'
|
||||
} else if (value === 2) {
|
||||
texts = '4级'
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
//
|
||||
{
|
||||
name: '',
|
||||
data: res.map((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
return (item.ci = 0.05)
|
||||
}
|
||||
return item.ci.toFixed(2)
|
||||
}),
|
||||
|
||||
barMaxWidth: 30,
|
||||
barMinHeight: 1,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
if (params.value > 2 && params.value !== 0.05) {
|
||||
return '#339966'
|
||||
} else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
|
||||
return '#3399FF'
|
||||
} else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
|
||||
return '#FF9900'
|
||||
} else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
|
||||
return '#A52a2a'
|
||||
} else if (params.value == 0.05) {
|
||||
return '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.4,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.8,
|
||||
lineStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
})
|
||||
const layout = mainHeight(83) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
height: v-bind('layout.height');
|
||||
}
|
||||
.tall {
|
||||
height: calc(v-bind('layout1.height') / 2);
|
||||
}
|
||||
.dw {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
width: 200px;
|
||||
z-index: 2;
|
||||
.level {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader area date-picker ref="header" />
|
||||
<div v-loading="tableStore.table.loading" class="pr10">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<MyEchartMap
|
||||
ref="EchartMap"
|
||||
:options="echartMapList"
|
||||
class="map"
|
||||
@eliminate="eliminate"
|
||||
@getRegionByRegion="getRegionByRegion"
|
||||
/>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<my-echart class="tall" :options="echartList" />
|
||||
<div class="tall">
|
||||
<vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
|
||||
>
|
||||
<vxe-column field="areaName" title=" 区域" show-overflow-tooltip></vxe-column>
|
||||
<vxe-column field="ci" title="区域暂降评估">
|
||||
<template #default="{ row }">
|
||||
{{ row.ci == 0.05 ? '暂无数据' : row.ci.toFixed(2) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column sortable field="isCount" title="等级">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.ci == 0.05">暂无等级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.2 && row.ci < 0.4">1级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.4 && row.ci < 0.8">2级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 0.8 && row.ci < 1.2">3级</span>
|
||||
<span v-if="row.ci !== 0.05 && row.ci >= 1.2">4级</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="dw">
|
||||
<el-popover placement="left" :width="600" trigger="hover">
|
||||
<template #reference>
|
||||
<span class="level">详细区域暂降评估等级</span>
|
||||
</template>
|
||||
<vxe-table :data="areaData1" v-bind="defaultAttribute">
|
||||
<vxe-column title="等级" field="level" min-width="90"></vxe-column>
|
||||
<vxe-column title="1级" field="one" min-width="80"></vxe-column>
|
||||
<vxe-column title="2级" field="two" min-width="90"></vxe-column>
|
||||
<vxe-column title="3级" field="three" min-width="90"></vxe-column>
|
||||
<vxe-column title="4级" field="four" min-width="90"></vxe-column>
|
||||
</vxe-table>
|
||||
</el-popover>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import MyEchartMap from '@/components/echarts/MyEchartMap.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
defineOptions({
|
||||
name: 'Region/transientassessment'
|
||||
})
|
||||
const EchartMap = ref()
|
||||
const dictData = useDictData()
|
||||
const echartMapList: any = ref({})
|
||||
const echartList = ref({})
|
||||
const header = ref()
|
||||
const distributionData: any = ref([])
|
||||
const areaData1: any = ref([
|
||||
{
|
||||
level: '相对得分',
|
||||
one: '[0,0.4]',
|
||||
two: '(0.4,0.8)',
|
||||
three: '(0.8,1.2)',
|
||||
four: '(1.2,+∞)'
|
||||
}
|
||||
])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/advance-boot/balance/getBalanceInfo',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.deptId = tableStore.table.params.deptIndex
|
||||
},
|
||||
loadCallback: () => {
|
||||
header.value.areaRef.change()
|
||||
// 处理地图数据
|
||||
map(tableStore.table.data)
|
||||
tabulation(tableStore.table.data)
|
||||
histogram(tableStore.table.data)
|
||||
EchartMap.value.GetEchar(header.value.areaRef.areaName)
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
tableStore.table.params.loadType = null
|
||||
tableStore.table.params.deptId = dictData.state.area[0].id
|
||||
|
||||
// 地图点击事件
|
||||
const getRegionByRegion = (list: any) => {
|
||||
tableStore.table.params.deptIndex = list.id
|
||||
tableStore.onTableAction('search', {})
|
||||
}
|
||||
// 消除点
|
||||
const eliminate = (name: string) => {
|
||||
echartMapList.value.options.series = []
|
||||
EchartMap.value.GetEchar(name)
|
||||
}
|
||||
|
||||
// 地图数处理
|
||||
const map = (res: any) => {
|
||||
let list: any = []
|
||||
res.forEach((item: any) => {
|
||||
list.push({
|
||||
name: item.areaName,
|
||||
value: item.ci
|
||||
})
|
||||
})
|
||||
|
||||
echartMapList.value = {
|
||||
name: '',
|
||||
title: {
|
||||
text: '区域暂降评估'
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
|
||||
|
||||
if (Number.isNaN(params.value) == true) {
|
||||
tips += params.name + '</br>'
|
||||
tips += '评估值:暂无数据'
|
||||
} else {
|
||||
tips += params.name + '</br>'
|
||||
tips += '评估值:' + params.value
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
min: 0,
|
||||
max: 2,
|
||||
left: 26,
|
||||
bottom: 20,
|
||||
showLabel: !0,
|
||||
|
||||
pieces: [
|
||||
{
|
||||
gt: -2,
|
||||
lte: -1,
|
||||
label: '无数据'
|
||||
},
|
||||
{
|
||||
gte: 0,
|
||||
lte: 0.4,
|
||||
label: '1级--相对得分 [0,0.4]'
|
||||
},
|
||||
{
|
||||
gt: 0.4,
|
||||
lte: 0.9,
|
||||
label: '2级--得分 (0.4,0.8]'
|
||||
},
|
||||
{
|
||||
gt: 0.9,
|
||||
lte: 1.2,
|
||||
label: '3级--相对得分 (0.8,1.2]'
|
||||
},
|
||||
{
|
||||
gt: 1.2,
|
||||
label: '4级--相对得分 (1.2,+∞]'
|
||||
}
|
||||
],
|
||||
inRange: {
|
||||
color: ['#ccc', '#A52a2a', '#FF9900', '#3399CC', '#339966']
|
||||
}
|
||||
},
|
||||
|
||||
options: {
|
||||
series: [
|
||||
{
|
||||
// type: "scatter",
|
||||
type: 'map',
|
||||
mapName: name,
|
||||
coordinateSystem: 'geo',
|
||||
geoIndex: 0,
|
||||
animation: false, //坐标点是否显示动画
|
||||
roam: true,
|
||||
selectedMode: 'false', //是否允许选中多个区域
|
||||
symbol: 'pin',
|
||||
rippleEffect: {
|
||||
brushType: 'fill' // stroke|fill
|
||||
},
|
||||
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
},
|
||||
data: list
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 表格数据处理
|
||||
const tabulation = (res: any) => {
|
||||
distributionData.value = res
|
||||
distributionData.value.forEach((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
item.ci = 0.05
|
||||
}
|
||||
})
|
||||
}
|
||||
// 柱状图数据处理
|
||||
const histogram = (res: any) => {
|
||||
echartList.value = {
|
||||
title: {
|
||||
text: header.value.areaRef.areaName
|
||||
},
|
||||
tooltip: {
|
||||
formatter: function (params: any) {
|
||||
var tips = ''
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.05) {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:0'
|
||||
} else {
|
||||
tips += params[i].name + '</br>'
|
||||
tips += '评估值:' + params[i].value
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
name: '(区域)',
|
||||
|
||||
data: res.map((item: any) => item.areaName)
|
||||
},
|
||||
yAxis: {
|
||||
name: ' 等级',
|
||||
min: 0,
|
||||
max: 2,
|
||||
// minInterval: 0.2,
|
||||
axisLabel: {
|
||||
fontSize: 14,
|
||||
// interval: 4,
|
||||
formatter: function (value: any) {
|
||||
var texts = ''
|
||||
if (value === 0.4) {
|
||||
texts = '1级'
|
||||
} else if (value === 0.8) {
|
||||
texts = '2级'
|
||||
} else if (value === 1.2) {
|
||||
texts = '3级'
|
||||
} else if (value === 2) {
|
||||
texts = '4级'
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
options: {
|
||||
series: [
|
||||
//
|
||||
{
|
||||
name: '',
|
||||
data: res.map((item: any) => {
|
||||
if (item.ci == 0) {
|
||||
return (item.ci = 0.05)
|
||||
}
|
||||
return item.ci.toFixed(2)
|
||||
}),
|
||||
|
||||
barMaxWidth: 30,
|
||||
barMinHeight: 1,
|
||||
type: 'bar',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
if (params.value > 2 && params.value !== 0.05) {
|
||||
return '#339966'
|
||||
} else if (0.8 < params.value && params.value <= 1.2 && params.value !== 0.05) {
|
||||
return '#3399FF'
|
||||
} else if (0.4 < params.value && params.value <= 0.8 && params.value !== 0.05) {
|
||||
return '#FF9900'
|
||||
} else if (0 < params.value && params.value <= 0.4 && params.value !== 0.05) {
|
||||
return '#A52a2a'
|
||||
} else if (params.value == 0.05) {
|
||||
return '#A52a2a'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
lineStyle: {
|
||||
color: 'red',
|
||||
width: 1
|
||||
},
|
||||
emphasis: {
|
||||
lineStyle: {
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.4,
|
||||
lineStyle: {
|
||||
color: '#A52a2a'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#A52a2a'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 0.8,
|
||||
lineStyle: {
|
||||
color: '#FF9900'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#FF9900'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 1.2,
|
||||
lineStyle: {
|
||||
color: '#3399FF'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#3399FF'
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '',
|
||||
yAxis: 2,
|
||||
lineStyle: {
|
||||
color: '#339966'
|
||||
},
|
||||
label: {
|
||||
// position: "middle",
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: '#339966'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
tableStore.index()
|
||||
}, 10)
|
||||
})
|
||||
const layout = mainHeight(83) as any
|
||||
const layout1 = mainHeight(93) as any
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.map {
|
||||
height: v-bind('layout.height');
|
||||
}
|
||||
.tall {
|
||||
height: calc(v-bind('layout1.height') / 2);
|
||||
}
|
||||
.dw {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
right: 50px;
|
||||
width: 200px;
|
||||
z-index: 2;
|
||||
.level {
|
||||
color: red;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,311 +1,313 @@
|
||||
<template>
|
||||
<div v-loading="loading" class="running-condition">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="flex: 1" class="mt10 zanjiangfenbutongji">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 25px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
"
|
||||
>
|
||||
<el-tag style="width: 20px; height: 12px" :style="{ background: gradeColor3[2] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[2] }">{{ 'X<60%' }}</span>
|
||||
<el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[1] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[1] }">{{ '60%≤X<90%' }}</span>
|
||||
<el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[0] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[0] }">{{ 'X≥90 %' }}</span>
|
||||
</div>
|
||||
<my-echart :options="secondOptions" style="flex: 1; height: 100%" />
|
||||
<my-echart :options="firstOptions" style="flex: 1; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
|
||||
import { gradeColor3 } from '@/components/echarts/color'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const loading = ref(true)
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
timeFlag: 1
|
||||
})
|
||||
const firstOptions = ref<any>({})
|
||||
const secondOptions = ref<any>({})
|
||||
const firstData = ref<any>([])
|
||||
const secondData = ref<any>([])
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
formData.timeFlag = datePickerRef.value.interval
|
||||
Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
|
||||
firstData.value = res[0].data
|
||||
secondData.value = res[1].data
|
||||
initFirst()
|
||||
initSecond()
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const initFirst = () => {
|
||||
let months = new Array()
|
||||
let handle = new Array()
|
||||
let year = firstData.value[0].dateView
|
||||
|
||||
for (let i = 0; i < firstData.value.length; i++) {
|
||||
months[i] = firstData.value[i].dateView
|
||||
handle.push(firstData.value[i].onlineRate)
|
||||
}
|
||||
firstOptions.value = {
|
||||
title: {
|
||||
text: '在线率统计',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
formatter: function(params: any) {
|
||||
let tips = ''
|
||||
tips += '时间:' + year + '</br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += '在线率' + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += '在线率' + ':' + params[i].value + '%<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: months,
|
||||
name: '时间',
|
||||
nameTextStyle: {
|
||||
verticalAlign: 'top', //标题位置
|
||||
padding: [-5, 0, 0, -10]
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
type: 'value',
|
||||
name: '%',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: handle,
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.value == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
if (params.value < 60) {
|
||||
return gradeColor3[2]
|
||||
} else if (params.value < 90) {
|
||||
return gradeColor3[1]
|
||||
} else {
|
||||
return gradeColor3[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: gradeColor3[0]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '100%'
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: gradeColor3[1]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '90%'
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: gradeColor3[2]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '60%'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const initSecond = () => {
|
||||
let list = secondData.value.type.map((item, i) => [secondData.value.updateTime[i], item])
|
||||
|
||||
secondOptions.value = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
formatter: function(params: any) {
|
||||
let res = ''
|
||||
res += `${params[0].value[0]}：${params[0].value[1] == '0' ? '中断' : '正常'}` //params[0].value[0] + '：' //+ params[0].value[1] == '0' ? '中断' : '正常'
|
||||
|
||||
return res
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// type: 'category',
|
||||
// data: items,
|
||||
// boundaryGap: false
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'blue'
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function(value: number) {
|
||||
let texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '运行状态',
|
||||
type: 'line',
|
||||
step: 'end',
|
||||
data: list
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.running-condition {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
|
||||
.zanjiangfenbutongji {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div v-loading="loading" class="running-condition">
|
||||
<el-form :inline="true" class="fx-jcsb">
|
||||
<el-form-item label="日期">
|
||||
<DatePicker ref="datePickerRef"></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style="flex: 1" class="mt10 zanjiangfenbutongji">
|
||||
<div
|
||||
style="
|
||||
position: absolute;
|
||||
right: 55px;
|
||||
top: 25px;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 12px;
|
||||
"
|
||||
>
|
||||
<el-tag style="width: 20px; height: 12px" :style="{ background: gradeColor3[2] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[2] }">{{ 'X<60%' }}</span>
|
||||
<el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[1] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[1] }">{{ '60%≤X<90%' }}</span>
|
||||
<el-tag class="ml10" style="width: 20px; height: 12px" :style="{ background: gradeColor3[0] }"></el-tag>
|
||||
<span class="ml2" :style="{ color: gradeColor3[0] }">{{ 'X≥90 %' }}</span>
|
||||
</div>
|
||||
<my-echart :options="secondOptions" style="flex: 1; height: 100%" />
|
||||
<my-echart :options="firstOptions" style="flex: 1; height: 100%" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, watch } from 'vue'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { getComFlagInfoData, getRunOnlineRateData } from '@/api/device-boot/communicate'
|
||||
import { gradeColor3 } from '@/components/echarts/color'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const loading = ref(true)
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const formData = reactive({
|
||||
id: '',
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
timeFlag: 1
|
||||
})
|
||||
const firstOptions = ref<any>({})
|
||||
const secondOptions = ref<any>({})
|
||||
const firstData = ref<any>([])
|
||||
const secondData = ref<any>([])
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.id = monitoringPoint.state.lineId
|
||||
formData.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
formData.searchEndTime = datePickerRef.value.timeValue[1]
|
||||
formData.timeFlag = datePickerRef.value.interval
|
||||
Promise.all([getRunOnlineRateData(formData), getComFlagInfoData(formData)]).then(res => {
|
||||
firstData.value = res[0].data
|
||||
secondData.value = res[1].data
|
||||
initFirst()
|
||||
initSecond()
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const initFirst = () => {
|
||||
let months = new Array()
|
||||
let handle = new Array()
|
||||
let year = firstData.value[0].dateView
|
||||
|
||||
for (let i = 0; i < firstData.value.length; i++) {
|
||||
months[i] = firstData.value[i].dateView
|
||||
handle.push(firstData.value[i].onlineRate)
|
||||
}
|
||||
firstOptions.value = {
|
||||
title: {
|
||||
text: '在线率统计',
|
||||
x: 'center',
|
||||
textStyle: {
|
||||
fontWeight: 'normal'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
formatter: function(params: any) {
|
||||
|
||||
let tips = ''
|
||||
tips += '时间:' + params[0].name + '</br/>'
|
||||
for (let i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += '在线率' + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += '在线率' + ':' + params[i].value + '%<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: months,
|
||||
name: '时间',
|
||||
nameTextStyle: {
|
||||
verticalAlign: 'top', //标题位置
|
||||
padding: [-5, 0, 0, -10]
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
min: 0,
|
||||
max: 100,
|
||||
type: 'value',
|
||||
name: '%',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
type: 'bar',
|
||||
data: handle,
|
||||
itemStyle: {
|
||||
color: (params: any) => {
|
||||
if (params.value == 3.14159) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
if (params.value < 60) {
|
||||
return gradeColor3[2]
|
||||
} else if (params.value < 90) {
|
||||
return gradeColor3[1]
|
||||
} else {
|
||||
return gradeColor3[0]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: gradeColor3[0]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '100%'
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: gradeColor3[1]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '90%'
|
||||
}
|
||||
},
|
||||
{
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: gradeColor3[2]
|
||||
},
|
||||
label: {
|
||||
position: 'end',
|
||||
formatter: '60%'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const initSecond = () => {
|
||||
let list = secondData.value.type.map((item, i) => [secondData.value.updateTime[i], item])
|
||||
|
||||
secondOptions.value = {
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
formatter: function(params: any) {
|
||||
let res = ''
|
||||
res += `${params[0].value[0]}：${params[0].value[1] == '0' ? '中断' : '正常'}` //params[0].value[0] + '：' //+ params[0].value[1] == '0' ? '中断' : '正常'
|
||||
|
||||
return res
|
||||
}
|
||||
},
|
||||
|
||||
xAxis: {
|
||||
// name: '时间',
|
||||
// type: 'category',
|
||||
// data: items,
|
||||
// boundaryGap: false
|
||||
type: 'time',
|
||||
name: '时间',
|
||||
//
|
||||
axisLabel: {
|
||||
formatter: {
|
||||
day: '{MM}-{dd}',
|
||||
month: '{MM}',
|
||||
year: '{yyyy}'
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '状态',
|
||||
type: 'value',
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: 'blue'
|
||||
},
|
||||
// 这里重新定义就可以
|
||||
formatter: function(value: number) {
|
||||
let texts = []
|
||||
if (value === 2) {
|
||||
texts.push('退出')
|
||||
} else if (value === 0) {
|
||||
texts.push('中断')
|
||||
} else if (value === 1) {
|
||||
texts.push('正常')
|
||||
}
|
||||
return texts
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '运行状态',
|
||||
type: 'line',
|
||||
step: 'end',
|
||||
data: list
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.running-condition {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 14px;
|
||||
border: 1px solid var(--el-border-color);
|
||||
overflow: hidden;
|
||||
|
||||
.zanjiangfenbutongji {
|
||||
position: relative;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,157 +1,157 @@
|
||||
<template>
|
||||
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="部门编号:">
|
||||
<el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门名称:" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入部门名称" maxlength="32" show-word-limit clearable @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门类型:" prop="type">
|
||||
<el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in customDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="子类型:" >
|
||||
<el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in ziDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门区域:" prop="area">
|
||||
<el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in areaOption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门排序:" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门描述:">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { getAreaTree, getPidAreaByAreaId, addDept, updateDept } from '@/api/user-boot/dept'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
area: '',
|
||||
name: '',
|
||||
pid: -1,
|
||||
remark: '',
|
||||
sort: 100,
|
||||
type: 0,
|
||||
code: '',
|
||||
specialType: 0,
|
||||
id: ''
|
||||
})
|
||||
const originForm = { ...form }
|
||||
const rules = {
|
||||
parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
|
||||
specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
|
||||
}
|
||||
const customDeptOption = [
|
||||
{ value: 0, label: '非自定义' },
|
||||
{ value: 1, label: 'web自定义' },
|
||||
{ value: 2, label: 'App自定义' },
|
||||
{ value: 3, label: 'web测试' }
|
||||
]
|
||||
const ziDeptOption = [
|
||||
{ label: '非本部', value: 0 },
|
||||
{ label: '本部', value: 1 }
|
||||
]
|
||||
const areaOption = ref<any>([])
|
||||
const open = (text: string, data: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
getPidAreaByAreaId({
|
||||
id: data.area,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
} else {
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = originForm[key]
|
||||
if (data[key]) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
}
|
||||
getAreaTree({
|
||||
id: data.pArea,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await updateDept(form)
|
||||
} else {
|
||||
await addDept(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleInput = ( value: string) => {
|
||||
// 过滤空格
|
||||
const filteredValue = value.replace(/\s/g, '')
|
||||
if (filteredValue !== value) {
|
||||
form.name = filteredValue
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<template>
|
||||
<el-dialog draggable width="700px" v-model="dialogVisible" :title="title">
|
||||
<el-scrollbar>
|
||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
|
||||
<el-form-item label="部门编号:">
|
||||
<el-input v-model="form.code" placeholder="请输入部门编号"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门名称:" prop="name">
|
||||
<el-input v-model="form.name" placeholder="请输入部门名称" maxlength="32" show-word-limit clearable @input="handleInput"/>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门类型:" prop="type">
|
||||
<el-select v-model="form.type" placeholder="选择部门类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in customDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="子类型:" >
|
||||
<el-select v-model="form.specialType" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in ziDeptOption"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门区域:" prop="area">
|
||||
<el-select v-model="form.area" placeholder="选择子类型" style="width: 100%">
|
||||
<el-option
|
||||
v-for="item in areaOption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门排序:" prop="sort">
|
||||
<el-input v-model="form.sort" placeholder="请输入部门排序"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item class="top" label="部门描述:">
|
||||
<el-input v-model="form.remark" :rows="2" type="textarea" placeholder="请输入部门描述"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-scrollbar>
|
||||
<template #footer>
|
||||
<span class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="submit">确认</el-button>
|
||||
</span>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore' // 若不是列表页面弹框可删除
|
||||
import { getAreaTree, getPidAreaByAreaId, addDept, updateDept } from '@/api/user-boot/dept'
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const tableStore = inject('tableStore') as TableStore
|
||||
const formRef = ref()
|
||||
// 注意不要和表单ref的命名冲突
|
||||
const form = reactive<anyObj>({
|
||||
area: '',
|
||||
name: '',
|
||||
pid: -1,
|
||||
remark: '',
|
||||
sort: 100,
|
||||
type: 0,
|
||||
code: '',
|
||||
specialType: 0,
|
||||
id: ''
|
||||
})
|
||||
const originForm = { ...form }
|
||||
const rules = {
|
||||
parentName: [{ required: true, message: '请选择父节点', trigger: 'blur' }],
|
||||
code: [{ required: true, message: '请输入部门编号', trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输选择部门名称', trigger: 'blur' }],
|
||||
type: [{ required: true, message: '请输选择部门类型', trigger: 'blur' }],
|
||||
specialType: [{ required: true, message: '请输选择部门子类型', trigger: 'blur' }],
|
||||
sort: [{ required: true, message: '请输入部门排序', trigger: 'blur' }],
|
||||
area: [{ required: true, message: '请选择部门区域', trigger: 'blur' }]
|
||||
}
|
||||
const customDeptOption = [
|
||||
{ value: 0, label: '非自定义' },
|
||||
{ value: 1, label: 'web自定义' },
|
||||
{ value: 2, label: 'App自定义' },
|
||||
{ value: 3, label: 'web测试' }
|
||||
]
|
||||
const ziDeptOption = [
|
||||
{ label: '非本部', value: 0 },
|
||||
{ label: '本部', value: 1 }
|
||||
]
|
||||
const areaOption = ref<any>([])
|
||||
const open = (text: string, data: anyObj) => {
|
||||
console.log(data)
|
||||
title.value = text
|
||||
dialogVisible.value = true
|
||||
if (data.id) {
|
||||
// 表单赋值
|
||||
for (let key in form) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
getPidAreaByAreaId({
|
||||
id: data.area,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
} else {
|
||||
// 在此处恢复默认表单
|
||||
for (let key in form) {
|
||||
form[key] = originForm[key]
|
||||
if (data[key]) {
|
||||
form[key] = data[key]
|
||||
}
|
||||
}
|
||||
getAreaTree({
|
||||
id: data.pArea,
|
||||
type: 0
|
||||
}).then((res: any) => {
|
||||
areaOption.value = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
const submit = () => {
|
||||
formRef.value.validate(async (valid: boolean) => {
|
||||
if (valid) {
|
||||
if (form.id) {
|
||||
await updateDept(form)
|
||||
} else {
|
||||
await addDept(form)
|
||||
}
|
||||
ElMessage.success('保存成功')
|
||||
tableStore.index()
|
||||
dialogVisible.value = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
const handleInput = ( value: string) => {
|
||||
// 过滤空格
|
||||
const filteredValue = value.replace(/\s/g, '')
|
||||
if (filteredValue !== value) {
|
||||
form.name = filteredValue
|
||||
}
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user