Web/admin-sjzx
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

冀北问题修改

Browse Source
This commit is contained in:
guanj
2025-12-08 16:28:34 +08:00
parent c779bec0cb
commit 8c41a8fc77
50 changed files with 7714 additions and 7287 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/pqs/harmonicMonitoring/embed/dataOverview_JB/index.vue
View File

@@ -2,7 +2,7 @@
<div class="default-main">
<TableHeader :showSearch="false" v-show="flag">
<template v-slot:select>
<el-form-item label="日期">
<el-form-item label="统计时间">
<DatePicker
ref="datePickerRef"
:nextFlag="false"

3
src/views/pqs/harmonicMonitoring/embed/lntegruty/index_JB.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
<TableHeader date-picker ref="TableHeaderRef" >
<template v-slot:select>
<el-form-item label="运行状态">
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
@@ -474,6 +474,7 @@ tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.card-list {
display: flex;
.monitoringPoints {

15
src/views/pqs/harmonicMonitoring/embed/onlinerate/index_JB.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="default-main">
<TableHeader date-picker ref="TableHeaderRef" :dateLabel="`数据统计时间`">
<TableHeader date-picker ref="TableHeaderRef">
<template v-slot:select>
<el-form-item label="运行状态">
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
@@ -34,7 +34,11 @@
<div class="divBox">
<span class="iconfont icon-qiyezongshu" style="color: #57bc6e"></span>
<span class="divBox_title">终端总数</span>
<span class="divBox_num text-style" style="color: #57bc6e" @click="totalTable(100001, '')">
<span
class="divBox_num text-style"
style="color: #57bc6e"
@click="totalTable(100001, '')"
>
{{ monitoringPoints.runNum }}
</span>
</div>
@@ -200,6 +204,7 @@
</template>
<script setup lang="ts">
// import '@/assets/font/iconfont.css'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
@@ -262,10 +267,13 @@ const tableStore = new TableStore({
monitoringPoints.value.runNum = tableStore.table.data.totalNum
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
abnormal.value = tableStore.table.data.citDetailList
abnormal.value = tableStore.table.data.citDetailList.filter(
(k: any) => k.citName != '上送国网' && k.citName != '非上送国网'
)
// 合并子集数据 并去重
totalData.value = Array.from(
tableStore.table.data.citDetailList
.map((item: any) => item.detailList)
.flat()
.reduce((map: any, item: any) => {
@@ -470,6 +478,7 @@ tableStore.table.params.name = ''
provide('tableStore', tableStore)
</script>
<style lang="scss" scoped>
@import '@/assets/font/iconfont.css';
.card-list {
display: flex;
.monitoringPoints {

860
src/views/pqs/harmonicMonitoring/monitoringPoint/online/gaojingshujutongji/index.vue
View File

@@ -1,430 +1,430 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%; position: relative">
<el-form :inline="true">
<el-form-item label="多监测点">
<el-checkbox v-model="checked" @change="checkChange" />
</el-form-item>
<el-form-item label="日期">
<DatePicker ref="datePickerRef" ></DatePicker>
</el-form-item>
<el-form-item label="指标类型:">
<el-select
v-model="formData.condition"
multiple
collapse-tags
:multiple-limit="5"
filterable
placeholder="请选择指标"
@change="conditionChange"
>
<el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="谐波次数:" v-if="showXieBoCiShu">
<el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
<el-option
v-for="item in harmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
<el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
<el-option
v-for="item in inharmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</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; overflow: hidden" class="mt10" v-loading="loading">
<vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
<vxe-column field="subName" title="变电站" min-width="120px"></vxe-column>
<vxe-column field="lineName" title="监测点名称" min-width="120px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="120px"></vxe-column>
<vxe-column field="phaseType" title="相别" min-width="100px"></vxe-column>
<vxe-column field="scale" title="电压等级" min-width="100px"></vxe-column>
<vxe-column field="timeId" title="时间" min-width="130px"></vxe-column>
<vxe-column field="unit" title="单位" min-width="100px"></vxe-column>
<vxe-column field="maxData" title="最大值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 3, '最大值')"
:style="{ color: scope.row.statisticalType === 3 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.maxData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="minData" title="最小值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 2, '最小值')"
:style="{ color: scope.row.statisticalType === 2 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.minData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="avgData" title="平均值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 1, '平均值')"
:style="{ color: scope.row.statisticalType === 1 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.avgData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="cp95Data" title="CP95值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 4, 'CP95值')"
:style="{ color: scope.row.statisticalType === 4 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.cp95Data }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
</vxe-table>
<SecondSheet v-if="options" style="background: #fff; z-index: 10">
<el-button
style="position: absolute; right: 0; top: 0; cursor: pointer; z-index: 3"
icon="el-icon-Back"
size="small"
@click="close"
>
返回
</el-button>
<MyEChart :options="options"></MyEChart>
</SecondSheet>
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
import { getHistoryTableData, getHistoryLineData } from '@/api/harmonic-boot/normLimit'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const checked = ref(monitoringPoint.state.showCheckBox)
const formData = reactive<{
lineId: string[]
searchBeginTime: string
searchEndTime: string
condition: string[]
harmonic: number
inHarmonic: number
}>({
lineId: [],
searchBeginTime: '',
searchEndTime: '',
condition: ['10', '11', '12'],
harmonic: 2,
inHarmonic: 1
})
const tableData = ref([])
const showXieBoCiShu = ref(false)
const showJianXieBoCiShu = ref(false)
const options = ref<any>(null)
onMounted(() => {
init()
})
const init = () => {
loading.value = true
formData.lineId = checked.value ? monitoringPoint.state.lineIds : [monitoringPoint.state.lineId]
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getHistoryTableData(formData).then((res: any) => {
tableData.value = res.data.map((item: any) => {
return {
...item,
maxData: item.maxData.toFixed(2),
minData: item.minData.toFixed(2),
avgData: item.avgData.toFixed(2),
cp95Data: item.cp95Data.toFixed(2)
}
})
nextTick(() => {
loading.value = false
})
})
}
const checkChange = () => {
if (checked.value) {
monitoringPoint.setShowCheckBox(true)
} else {
monitoringPoint.setShowCheckBox(false)
init()
}
}
const close = () => {
console.log('====================================')
console.log(2123123)
console.log('====================================')
options.value = null
}
const showCharts = (row: any, valueType: number, name: string) => {
getHistoryLineData({
lineId: row.lineId,
number: row.number,
phaseType: row.phaseType,
searchTime: row.timeId,
targetCode: row.targetCode,
valueType
}).then(res => {
options.value = {
title: {
text: row.subName + ' ' + row.lineName + ' ' + row.targetName + ' ' + row.phaseType + '相' + name
},
legend: {
show: false
},
xAxis: {
type: 'category',
name: '时间',
data: res.data[0]?.value.map((item: any[]) => item[0])
},
yAxis: {
name: '%',
type: 'value'
},
series: [
{
name: name,
data: res.data[0]?.value.map((item: any[]) => item[1]),
type: 'line'
}
],
options: {
grid: {
top: '50px',
left: '40px',
right: '60px',
bottom: '10px',
containLabel: true
},
dataZoom: null
}
}
})
}
const conditionChange = () => {
//判断一个指标时
if (formData.condition.length == 1) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断2个指标时
if (formData.condition.length == 2) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
(formData.condition.includes('45') && formData.condition.includes('46')) ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断3个指标时
if (formData.condition.length == 3) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断4个指标时
if (formData.condition.length == 4) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断5个指标时
if (formData.condition.length == 5) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断无指标时
if (formData.condition.length == 0) {
showJianXieBoCiShu.value = false
showXieBoCiShu.value = false
}
}
</script>
<style></style>
<template>
<div style="display: flex; flex-direction: column; height: 100%; position: relative">
<el-form :inline="true">
<el-form-item label="多监测点">
<el-checkbox v-model="checked" @change="checkChange" />
</el-form-item>
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef" ></DatePicker>
</el-form-item>
<el-form-item label="指标类型:">
<el-select
v-model="formData.condition"
multiple
collapse-tags
:multiple-limit="5"
filterable
placeholder="请选择指标"
@change="conditionChange"
>
<el-option-group v-for="group in indexOptions" :key="group.label" :label="group.label">
<el-option
v-for="item in group.options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-option-group>
</el-select>
</el-form-item>
<el-form-item label="谐波次数:" v-if="showXieBoCiShu">
<el-select style="width: 100%" v-model="formData.harmonic" placeholder="请选择谐波">
<el-option
v-for="item in harmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item v-if="showJianXieBoCiShu" label="间谐波次数:">
<el-select style="width: 100%" v-model="formData.inHarmonic" placeholder="请选择间谐波">
<el-option
v-for="item in inharmonicOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</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; overflow: hidden" class="mt10" v-loading="loading">
<vxe-table height="auto" v-bind="defaultAttribute" :data="tableData">
<vxe-column field="subName" title="变电站" min-width="120px"></vxe-column>
<vxe-column field="lineName" title="监测点名称" min-width="120px"></vxe-column>
<vxe-column field="targetName" title="指标类型" min-width="120px"></vxe-column>
<vxe-column field="phaseType" title="相别" min-width="100px"></vxe-column>
<vxe-column field="scale" title="电压等级" min-width="100px"></vxe-column>
<vxe-column field="timeId" title="时间" min-width="130px"></vxe-column>
<vxe-column field="unit" title="单位" min-width="100px"></vxe-column>
<vxe-column field="maxData" title="最大值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 3, '最大值')"
:style="{ color: scope.row.statisticalType === 3 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.maxData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="minData" title="最小值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 2, '最小值')"
:style="{ color: scope.row.statisticalType === 2 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.minData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="avgData" title="平均值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 1, '平均值')"
:style="{ color: scope.row.statisticalType === 1 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.avgData }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
<vxe-column field="cp95Data" title="CP95值(%)" min-width="100px">
<template #default="scope">
<el-button
@click="showCharts(scope.row, 4, 'CP95值')"
:style="{ color: scope.row.statisticalType === 4 ? '#A52a2a' : '#07d75a' }"
type="text"
size="small"
>
{{ scope.row.cp95Data }}
</el-button>
<el-button v-if="scope.row.statisticalType === 3.14159">/</el-button>
</template>
</vxe-column>
</vxe-table>
<SecondSheet v-if="options" style="background: #fff; z-index: 10">
<el-button
style="position: absolute; right: 0; top: 0; cursor: pointer; z-index: 3"
icon="el-icon-Back"
size="small"
@click="close"
>
返回
</el-button>
<MyEChart :options="options"></MyEChart>
</SecondSheet>
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import { Close } from '@element-plus/icons-vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { indexOptions, harmonicOptions, inharmonicOptions } from '@/utils/dictionary'
import { getHistoryTableData, getHistoryLineData } from '@/api/harmonic-boot/normLimit'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import SecondSheet from '@/components/secondSheet/index.vue'
import MyEChart from '@/components/echarts/MyEchart.vue'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const checked = ref(monitoringPoint.state.showCheckBox)
const formData = reactive<{
lineId: string[]
searchBeginTime: string
searchEndTime: string
condition: string[]
harmonic: number
inHarmonic: number
}>({
lineId: [],
searchBeginTime: '',
searchEndTime: '',
condition: ['10', '11', '12'],
harmonic: 2,
inHarmonic: 1
})
const tableData = ref([])
const showXieBoCiShu = ref(false)
const showJianXieBoCiShu = ref(false)
const options = ref<any>(null)
onMounted(() => {
init()
})
const init = () => {
loading.value = true
formData.lineId = checked.value ? monitoringPoint.state.lineIds : [monitoringPoint.state.lineId]
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getHistoryTableData(formData).then((res: any) => {
tableData.value = res.data.map((item: any) => {
return {
...item,
maxData: item.maxData.toFixed(2),
minData: item.minData.toFixed(2),
avgData: item.avgData.toFixed(2),
cp95Data: item.cp95Data.toFixed(2)
}
})
nextTick(() => {
loading.value = false
})
})
}
const checkChange = () => {
if (checked.value) {
monitoringPoint.setShowCheckBox(true)
} else {
monitoringPoint.setShowCheckBox(false)
init()
}
}
const close = () => {
console.log('====================================')
console.log(2123123)
console.log('====================================')
options.value = null
}
const showCharts = (row: any, valueType: number, name: string) => {
getHistoryLineData({
lineId: row.lineId,
number: row.number,
phaseType: row.phaseType,
searchTime: row.timeId,
targetCode: row.targetCode,
valueType
}).then(res => {
options.value = {
title: {
text: row.subName + ' ' + row.lineName + ' ' + row.targetName + ' ' + row.phaseType + '相' + name
},
legend: {
show: false
},
xAxis: {
type: 'category',
name: '时间',
data: res.data[0]?.value.map((item: any[]) => item[0])
},
yAxis: {
name: '%',
type: 'value'
},
series: [
{
name: name,
data: res.data[0]?.value.map((item: any[]) => item[1]),
type: 'line'
}
],
options: {
grid: {
top: '50px',
left: '40px',
right: '60px',
bottom: '10px',
containLabel: true
},
dataZoom: null
}
}
})
}
const conditionChange = () => {
//判断一个指标时
if (formData.condition.length == 1) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断2个指标时
if (formData.condition.length == 2) {
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
(formData.condition.includes('45') && formData.condition.includes('46')) ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
}
//判断3个指标时
if (formData.condition.length == 3) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断4个指标时
if (formData.condition.length == 4) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断5个指标时
if (formData.condition.length == 5) {
if (
(formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')) &&
(formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49'))
) {
showXieBoCiShu.value = true
showJianXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('46') ||
// formData.condition.includes('47') ||
// formData.condition.includes('48') ||
formData.condition.includes('49')
) {
showJianXieBoCiShu.value = true
} else {
showJianXieBoCiShu.value = false
}
if (
formData.condition.includes('40') ||
formData.condition.includes('43') ||
formData.condition.includes('44') ||
formData.condition.includes('45')
) {
showXieBoCiShu.value = true
} else {
showXieBoCiShu.value = false
}
}
//判断无指标时
if (formData.condition.length == 0) {
showJianXieBoCiShu.value = false
showXieBoCiShu.value = false
}
}
</script>
<style></style>

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue
View File

@@ -6,7 +6,7 @@
<el-form-item label="多监测点">
<el-checkbox v-model="checked" @change="checkChange" />
</el-form-item>
<el-form-item label="日期">
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef" :theCurrentTime="true"></DatePicker>
</el-form-item>
<el-form-item label="指标类型:">

3432
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index1.vue
View File

File diff suppressed because it is too large Load Diff

630
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizhibiaohegelv/index.vue
View File

@@ -1,315 +1,315 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="对比">
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
<el-option
v-for="item in searchTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<div style="flex: 1" class="mt10" v-loading="loading">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getSteadyData } from '@/api/harmonic-boot/pollution'
import { gradeColor3 } from '@/components/echarts/color'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: '',
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const options = ref({})
const searchType = ref('')
const searchTypeOptions = [
{
label: '同比',
value: '1'
},
{
label: '环比',
value: '2'
}
]
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
if (searchType.value == '1') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
formData.searchBeginTime,
formData.searchEndTime
)
} else if (searchType.value == '2') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
formData.searchBeginTime,
formData.searchEndTime
)
} else {
formData.periodBeginTime = ''
formData.periodEndTime = ''
}
getSteadyData(formData).then((res: any) => {
const { steadyInfoData, steadyInfoList } = res.data
let yData = [],
yData2 = []
for (let i = 0; i < steadyInfoList.length; i++) {
// if (steadyInfoList[i] == 3.1415) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] == 3.14159) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] !== 3.14159) {
yData.push(steadyInfoList[i])
// }
}
for (let i = 0; i < steadyInfoData.length; i++) {
yData2.push(steadyInfoData[i])
// if (steadyInfoData[i] == 3.14159) {
// steadyInfoData[i] = 0
// yData2.push(steadyInfoData[i])
// } else if (steadyInfoData[i] == 3.14159) {
// steadyInfoData[i] = 0
// yData2.push(steadyInfoData[i])
// } else if (steadyInfoData[i] !== 3.14159) {
// yData2.push(steadyInfoData[i])
// }
}
let series: any[] = [
{
name: formData.searchBeginTime + '至' + formData.searchEndTime,
type: 'bar',
barMaxWidth: 30,
label: {
show: true,
position: 'top',
distance: 2,
color: '#fff',
fontWeight: 'bolder'
},
data: yData,
markLine: {
silent: false,
symbol: 'circle',
data: [
{
name: '',
yAxis: 100,
lineStyle: {
color: gradeColor3[0]
},
label: {
show: true,
formatter: '优质',
color: gradeColor3[0]
}
},
{
name: '',
yAxis: 90,
lineStyle: {
color: gradeColor3[1]
},
label: {
show: true,
color: gradeColor3[1],
formatter: '良好'
}
},
{
name: '',
yAxis: 60,
lineStyle: {
color: gradeColor3[2]
},
label: {
show: true,
color: gradeColor3[2],
formatter: '合格'
}
}
]
},
itemStyle: {
color: (params: any) => {
if (params.value > 90) {
return gradeColor3[0]
} else if (params.value > 60) {
return gradeColor3[1]
} else if (params.value == 3.14159) {
return '#ccc'
} else {
return gradeColor3[2]
}
}
}
}
]
if (searchType.value) {
series.push({
name: formData.periodBeginTime + '至' + formData.periodEndTime,
type: 'bar',
barMaxWidth: 30,
// label: {
// show: true,
// position: 'top',
// distance: 2,
// color: '#fff',
// fontWeight: 'bolder'
// },
data: yData2,
itemStyle: {
color: (params: any) => {
if (params.value > 90) {
return gradeColor3[0]
} else if (params.value > 60) {
return gradeColor3[1]
} else if (params.value == 3.14159) {
return '#ccc'
} else {
return gradeColor3[2]
}
}
}
})
}
options.value = {
title: {
text: '稳态指标合格率'
},
legend: {
show: false
},
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) {
//console.log(params)
let msg = ''
msg += params[0].name + '<br/>'
for (let i in params) {
if (params[i].data == 3.14159) {
msg +=params[i].marker+ params[i].seriesName + ': 暂无数据<br/>'
} else {
msg += params[i].marker+ params[i].seriesName + ': ' + params[i].data + '<br/>'
}
}
return msg
}
},
xAxis: {
name: '指标类型',
type: 'category',
axisLine: {
lineStyle: {
width: 1
},
symbol: ['none', 'arrow']
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular'
}
},
data: [
'频率偏差',
'闪变',
'三相电压不平衡',
'谐波电压',
'谐波电流',
'电压偏差',
'负序电流',
'间谐波电压含有率'
]
},
yAxis: [
{
name: '%',
type: 'value',
min: 0,
max: 100,
position: 'left',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
width: 1
},
symbol: ['none', 'arrow']
}
},
{
position: 'left',
axisLine: {
show: true,
symbol: ['none', 'arrow']
},
splitLine: {
//分割线配置
lineStyle: {
color: '#fff'
}
}
}
],
series
}
nextTick(() => {
loading.value = false
})
})
}
provide('tableStore', tableStore)
onMounted(() => {
init()
})
</script>
<style></style>
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="对比">
<el-select v-model="searchType" clearable placeholder="可选择同比、环比">
<el-option
v-for="item in searchTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<div style="flex: 1" class="mt10" v-loading="loading">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getSteadyData } from '@/api/harmonic-boot/pollution'
import { gradeColor3 } from '@/components/echarts/color'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: '',
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const options = ref({})
const searchType = ref('')
const searchTypeOptions = [
{
label: '同比',
value: '1'
},
{
label: '环比',
value: '2'
}
]
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
if (searchType.value == '1') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getYearOnYear(
formData.searchBeginTime,
formData.searchEndTime
)
} else if (searchType.value == '2') {
;[formData.periodBeginTime, formData.periodEndTime] = datePickerRef.value.getMonthOnMonth(
formData.searchBeginTime,
formData.searchEndTime
)
} else {
formData.periodBeginTime = ''
formData.periodEndTime = ''
}
getSteadyData(formData).then((res: any) => {
const { steadyInfoData, steadyInfoList } = res.data
let yData = [],
yData2 = []
for (let i = 0; i < steadyInfoList.length; i++) {
// if (steadyInfoList[i] == 3.1415) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] == 3.14159) {
// steadyInfoList[i] = 1
// yData.push(steadyInfoList[i])
// } else if (steadyInfoList[i] !== 3.14159) {
yData.push(steadyInfoList[i])
// }
}
for (let i = 0; i < steadyInfoData.length; i++) {
yData2.push(steadyInfoData[i])
// if (steadyInfoData[i] == 3.14159) {
// steadyInfoData[i] = 0
// yData2.push(steadyInfoData[i])
// } else if (steadyInfoData[i] == 3.14159) {
// steadyInfoData[i] = 0
// yData2.push(steadyInfoData[i])
// } else if (steadyInfoData[i] !== 3.14159) {
// yData2.push(steadyInfoData[i])
// }
}
let series: any[] = [
{
name: formData.searchBeginTime + '至' + formData.searchEndTime,
type: 'bar',
barMaxWidth: 30,
label: {
show: true,
position: 'top',
distance: 2,
color: '#fff',
fontWeight: 'bolder'
},
data: yData,
markLine: {
silent: false,
symbol: 'circle',
data: [
{
name: '',
yAxis: 100,
lineStyle: {
color: gradeColor3[0]
},
label: {
show: true,
formatter: '优质',
color: gradeColor3[0]
}
},
{
name: '',
yAxis: 90,
lineStyle: {
color: gradeColor3[1]
},
label: {
show: true,
color: gradeColor3[1],
formatter: '良好'
}
},
{
name: '',
yAxis: 60,
lineStyle: {
color: gradeColor3[2]
},
label: {
show: true,
color: gradeColor3[2],
formatter: '合格'
}
}
]
},
itemStyle: {
color: (params: any) => {
if (params.value > 90) {
return gradeColor3[0]
} else if (params.value > 60) {
return gradeColor3[1]
} else if (params.value == 3.14159) {
return '#ccc'
} else {
return gradeColor3[2]
}
}
}
}
]
if (searchType.value) {
series.push({
name: formData.periodBeginTime + '至' + formData.periodEndTime,
type: 'bar',
barMaxWidth: 30,
// label: {
// show: true,
// position: 'top',
// distance: 2,
// color: '#fff',
// fontWeight: 'bolder'
// },
data: yData2,
itemStyle: {
color: (params: any) => {
if (params.value > 90) {
return gradeColor3[0]
} else if (params.value > 60) {
return gradeColor3[1]
} else if (params.value == 3.14159) {
return '#ccc'
} else {
return gradeColor3[2]
}
}
}
})
}
options.value = {
title: {
text: '稳态指标合格率'
},
legend: {
show: false
},
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) {
//console.log(params)
let msg = ''
msg += params[0].name + '<br/>'
for (let i in params) {
if (params[i].data == 3.14159) {
msg +=params[i].marker+ params[i].seriesName + ': 暂无数据<br/>'
} else {
msg += params[i].marker+ params[i].seriesName + ': ' + params[i].data + '<br/>'
}
}
return msg
}
},
xAxis: {
name: '指标类型',
type: 'category',
axisLine: {
lineStyle: {
width: 1
},
symbol: ['none', 'arrow']
},
axisLabel: {
textStyle: {
fontFamily: 'dinproRegular'
}
},
data: [
'频率偏差',
'闪变',
'三相电压不平衡',
'谐波电压',
'谐波电流',
'电压偏差',
'负序电流',
'间谐波电压含有率'
]
},
yAxis: [
{
name: '%',
type: 'value',
min: 0,
max: 100,
position: 'left',
splitLine: {
show: false
},
axisLine: {
lineStyle: {
width: 1
},
symbol: ['none', 'arrow']
}
},
{
position: 'left',
axisLine: {
show: true,
symbol: ['none', 'arrow']
},
splitLine: {
//分割线配置
lineStyle: {
color: '#fff'
}
}
}
],
series
}
nextTick(() => {
loading.value = false
})
})
}
provide('tableStore', tableStore)
onMounted(() => {
init()
})
</script>
<style></style>

424
src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaizonghepinggu/index.vue
View File

@@ -1,212 +1,212 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<el-form :inline="true">
<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">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getQualityAssessData } from '@/api/harmonic-boot/asses'
import { gradeColor5 } from '@/components/echarts/color'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: '',
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const options = ref({})
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const grade = gradeColor5.map((item, index) => {
return {
name: gradeNames[index],
color: item
}
})
const init = () => {
loading.value = true
if (!monitoringPoint.state.lineId) {
return
}
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getQualityAssessData(formData).then((res: any) => {
let data = res.data.syn[0]
if (data == 3.14159) {
data = 0.25
} else if (data == 3.1415) {
data = 0.15
}
options.value = {
title: {
text: '稳态综合评估',
x: 'center',
y: '0%'
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
borderColor: '#fff',
backgroundColor: 'rgba(0,0,0,0.55)',
formatter: function (params: any) {
if (params.value >= 5) {
return params.name + ' : ' + '优质'
} else if (params.value > 4 && params.value <= 5) {
return params.name + ' : ' + '良好'
} else if (params.value > 3 && params.value <= 4) {
return params.name + ' : ' + '合格'
} else if (params.value > 2 && params.value <= 3) {
return params.name + ' : ' + '较差'
} else if (params.value <= 2 && params.value >= 1) {
return params.name + ' : ' + '极差'
} else if (params.value >= 0.25 && params.value < 1) {
return params.name + ' : ' + '暂无数据'
} else if (params.value <= 0.15 && params.value >= 0) {
return params.name + ' : ' + '/'
}
}
},
legend: {
show: false
},
xAxis: [
{
name: '指标',
type: 'category',
data: ['稳态综合评估'],
axisLabel: {
margin: 10
},
axisTick: {
show: false
},
axisLine: {
symbol: ['none', 'arrow']
}
}
],
yAxis: {
name: '等级',
type: 'value',
min: 0,
max: 5,
axisLabel: {
show: true,
// 这里重新定义就可以
formatter: function (value: number) {
var texts = []
if (value === 1) {
texts.push('1级')
} else if (value === 2) {
texts.push('2级')
} else if (value === 3) {
texts.push('3级')
} else if (value === 4) {
texts.push('4级')
} else if (value === 5) {
texts.push('5级')
}
return texts
}
},
axisLine: {
show: true,
symbol: ['none', 'arrow']
}
},
series: [
{
name: '综合评估',
type: 'bar',
label: {
show: true,
position: 'top',
distance: 2,
color: '#fff',
fontWeight: 'bolder'
},
barWidth: '45',
data: [
{
value: data
}
],
markLine: {
silent: false,
symbol: 'circle',
data: grade.map((item, index) => {
return {
yAxis: grade.length - index,
name: item.name,
lineStyle: {
color: item.color
},
label: {
color: item.color,
formatter: item.name
}
}
})
},
itemStyle: {
color: (params: any) => {
if (params.value > 5) {
return gradeColor5[0]
} else if (params.value > 4) {
return gradeColor5[1]
} else if (params.value > 3) {
return gradeColor5[2]
} else if (params.value > 2) {
return gradeColor5[3]
} else {
return gradeColor5[4]
}
}
}
}
],
options: {
dataZoom: null
}
}
nextTick(() => {
loading.value = false
})
})
}
onMounted(() => {
init()
})
</script>
<style></style>
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<el-form :inline="true">
<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">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getQualityAssessData } from '@/api/harmonic-boot/asses'
import { gradeColor5 } from '@/components/echarts/color'
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: '',
searchBeginTime: '',
searchEndTime: '',
periodBeginTime: '',
periodEndTime: ''
})
const options = ref({})
const gradeNames = ['优质', '良好', '一般', '较差', '极差']
const grade = gradeColor5.map((item, index) => {
return {
name: gradeNames[index],
color: item
}
})
const init = () => {
loading.value = true
if (!monitoringPoint.state.lineId) {
return
}
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getQualityAssessData(formData).then((res: any) => {
let data = res.data.syn[0]
if (data == 3.14159) {
data = 0.25
} else if (data == 3.1415) {
data = 0.15
}
options.value = {
title: {
text: '稳态综合评估',
x: 'center',
y: '0%'
},
tooltip: {
trigger: 'item',
axisPointer: {
type: 'shadow',
label: {
color: '#fff',
fontSize: 16
}
},
textStyle: {
color: '#fff',
fontStyle: 'normal',
opacity: 0.35,
fontSize: 14
},
borderColor: '#fff',
backgroundColor: 'rgba(0,0,0,0.55)',
formatter: function (params: any) {
if (params.value >= 5) {
return params.name + ' : ' + '优质'
} else if (params.value > 4 && params.value <= 5) {
return params.name + ' : ' + '良好'
} else if (params.value > 3 && params.value <= 4) {
return params.name + ' : ' + '合格'
} else if (params.value > 2 && params.value <= 3) {
return params.name + ' : ' + '较差'
} else if (params.value <= 2 && params.value >= 1) {
return params.name + ' : ' + '极差'
} else if (params.value >= 0.25 && params.value < 1) {
return params.name + ' : ' + '暂无数据'
} else if (params.value <= 0.15 && params.value >= 0) {
return params.name + ' : ' + '/'
}
}
},
legend: {
show: false
},
xAxis: [
{
name: '指标',
type: 'category',
data: ['稳态综合评估'],
axisLabel: {
margin: 10
},
axisTick: {
show: false
},
axisLine: {
symbol: ['none', 'arrow']
}
}
],
yAxis: {
name: '等级',
type: 'value',
min: 0,
max: 5,
axisLabel: {
show: true,
// 这里重新定义就可以
formatter: function (value: number) {
var texts = []
if (value === 1) {
texts.push('1级')
} else if (value === 2) {
texts.push('2级')
} else if (value === 3) {
texts.push('3级')
} else if (value === 4) {
texts.push('4级')
} else if (value === 5) {
texts.push('5级')
}
return texts
}
},
axisLine: {
show: true,
symbol: ['none', 'arrow']
}
},
series: [
{
name: '综合评估',
type: 'bar',
label: {
show: true,
position: 'top',
distance: 2,
color: '#fff',
fontWeight: 'bolder'
},
barWidth: '45',
data: [
{
value: data
}
],
markLine: {
silent: false,
symbol: 'circle',
data: grade.map((item, index) => {
return {
yAxis: grade.length - index,
name: item.name,
lineStyle: {
color: item.color
},
label: {
color: item.color,
formatter: item.name
}
}
})
},
itemStyle: {
color: (params: any) => {
if (params.value > 5) {
return gradeColor5[0]
} else if (params.value > 4) {
return gradeColor5[1]
} else if (params.value > 3) {
return gradeColor5[2]
} else if (params.value > 2) {
return gradeColor5[3]
} else {
return gradeColor5[4]
}
}
}
}
],
options: {
dataZoom: null
}
}
nextTick(() => {
loading.value = false
})
})
}
onMounted(() => {
init()
})
</script>
<style></style>

272
src/views/pqs/harmonicMonitoring/monitoringPoint/online/xiebopingpu/index.vue
View File

@@ -1,136 +1,136 @@
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="指标">
<el-radio-group v-model="formData.harmState">
<el-radio-button :label="0">谐波电压含有率</el-radio-button>
<el-radio-button :label="1">谐波电流幅值</el-radio-button>
</el-radio-group>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<vxe-table :data="analysisData" v-bind="defaultAttribute">
<vxe-column field="name" title="指标" width="140px"></vxe-column>
<vxe-column
:field="index.toString()"
:title="item + 1 + '次'"
v-for="(item, index) in 49"
width="80px"
></vxe-column>
</vxe-table>
<div style="flex: 1" class="mt10" v-loading="loading">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: monitoringPoint.state.lineId,
searchBeginTime: '',
searchEndTime: '',
harmState: 0
})
const analysisData = ref<any>([])
const options = ref({})
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getHarmInHarmData(formData).then((res: any) => {
let xName = ''
analysisData.value = []
if (formData.harmState === 1) {
xName = 'A'
analysisData.value.push(
{
name: '谐波电流幅值(A)',
originData: res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
),
...res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
)
},
{
name: '国标限值(A)',
originData: res.data.harmInOverLimit,
...res.data.harmInOverLimit
}
)
} else {
xName = '%'
analysisData.value.push(
{
name: '谐波电压含有率(%)',
originData: res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
),
...res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
)
},
{
name: '国标限值(%)',
originData: res.data.harmInOverLimit,
...res.data.harmInOverLimit
}
)
}
options.value = {
xAxis: {
name: '次数',
type: 'category',
data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
},
yAxis: {
name: xName,
type: 'value'
},
color: ['#2E8B57', '#DAA520'],
series: analysisData.value.map((item: any) => {
return {
name: item.name,
data: item.originData,
type: 'bar'
}
}),
options: {
// dataZoom: null
}
}
nextTick(() => {
loading.value = false
})
})
}
provide('tableStore', tableStore)
onMounted(() => {
init()
})
</script>
<template>
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="指标">
<el-radio-group v-model="formData.harmState">
<el-radio-button :label="0">谐波电压含有率</el-radio-button>
<el-radio-button :label="1">谐波电流幅值</el-radio-button>
</el-radio-group>
</el-form-item>
</template>
<template v-slot:operation>
<el-button type="primary" @click="init" icon="el-icon-Search">查询</el-button>
</template>
</TableHeader>
<vxe-table :data="analysisData" v-bind="defaultAttribute">
<vxe-column field="name" title="指标" width="140px"></vxe-column>
<vxe-column
:field="index.toString()"
:title="item + 1 + '次'"
v-for="(item, index) in 49"
width="80px"
></vxe-column>
</vxe-table>
<div style="flex: 1" class="mt10" v-loading="loading">
<my-echart :options="options" />
</div>
</div>
</template>
<script setup lang="ts">
import { nextTick, onMounted, reactive, ref } from 'vue'
import DatePicker from '@/components/form/datePicker/index.vue'
import MyEchart from '@/components/echarts/MyEchart.vue'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
import { getHarmInHarmData } from '@/api/harmonic-boot/inHarm'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import TableHeader from '@/components/table/header/index.vue'
import TableStore from '@/utils/tableStore'
const tableStore = new TableStore({
url: '',
method: 'POST',
column: []
})
const datePickerRef = ref()
const monitoringPoint = useMonitoringPoint()
const loading = ref(true)
const formData = reactive({
id: monitoringPoint.state.lineId,
searchBeginTime: '',
searchEndTime: '',
harmState: 0
})
const analysisData = ref<any>([])
const options = ref({})
const init = () => {
loading.value = true
formData.id = monitoringPoint.state.lineId
formData.searchBeginTime = datePickerRef.value.timeValue[0]
formData.searchEndTime = datePickerRef.value.timeValue[1]
getHarmInHarmData(formData).then((res: any) => {
let xName = ''
analysisData.value = []
if (formData.harmState === 1) {
xName = 'A'
analysisData.value.push(
{
name: '谐波电流幅值(A)',
originData: res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
),
...res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
)
},
{
name: '国标限值(A)',
originData: res.data.harmInOverLimit,
...res.data.harmInOverLimit
}
)
} else {
xName = '%'
analysisData.value.push(
{
name: '谐波电压含有率(%)',
originData: res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? 0.14159 : Math.floor(item * 1000) / 1000
),
...res.data.harmInHarmValue.map((item: number) =>
item == null || item == 3.14159 ? '/' : Math.floor(item * 1000) / 1000
)
},
{
name: '国标限值(%)',
originData: res.data.harmInOverLimit,
...res.data.harmInOverLimit
}
)
}
options.value = {
xAxis: {
name: '次数',
type: 'category',
data: Array.from({ length: 49 }, (_, i) => `${i + 2}次`)
},
yAxis: {
name: xName,
type: 'value'
},
color: ['#2E8B57', '#DAA520'],
series: analysisData.value.map((item: any) => {
return {
name: item.name,
data: item.originData,
type: 'bar'
}
}),
options: {
// dataZoom: null
}
}
nextTick(() => {
loading.value = false
})
})
}
provide('tableStore', tableStore)
onMounted(() => {
init()
})
</script>

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/yunxingzhuangtai/index.vue
View File

@@ -2,7 +2,7 @@
<div style="display: flex; flex-direction: column; height: 100%">
<TableHeader ref="TableHeaderRef" :showSearch="false">
<template v-slot:select>
<el-form-item label="日期">
<el-form-item label="统计时间">
<DatePicker ref="datePickerRef"></DatePicker>
</el-form-item>
<el-form-item label="对比">