冀北问题修改
This commit is contained in:
guanj
@@ -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>
|
||||
|
||||
@@ -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="指标类型:">
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,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="对比">
|
||||
|
||||
Reference in New Issue
Block a user