同步现场代码
This commit is contained in:
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="default-main lineInfo" :style="height">
|
||||
<DatePicker ref="datePickerRef" style="display: none" />
|
||||
<el-page-header :icon="ArrowLeft" @back="emit('back')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3">{{ dropList.lineName }}详情</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
台账信息
|
||||
</h3>
|
||||
<el-descriptions title="" border :column="2">
|
||||
<el-descriptions-item label="监测点名称">{{ dropList.lineName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属厂家">{{ dropList.manufacturer }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">{{ dropList.scale }}</el-descriptions-item>
|
||||
<el-descriptions-item label="投运日期">{{ dropList.loginTime }}</el-descriptions-item>
|
||||
<el-descriptions-item label="PT">{{ dropList.pt }}</el-descriptions-item>
|
||||
<el-descriptions-item label="CT">{{ dropList.ct }}</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">{{ dropList.loadType }}</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
<el-tag size="small" :type="dropList.comFlag == '正常' ? 'success' : 'danger'" effect="dark">
|
||||
{{ dropList.comFlag }}
|
||||
</el-tag>
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
数据质量
|
||||
</h3>
|
||||
<div style="display: flex">
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="ComCharts" />
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="onLineCharts" />
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
监测点总体评价结论
|
||||
</h3>
|
||||
|
||||
|
||||
<div class="evaluationData">
|
||||
<el-row style="width: 96%" class="row pb5">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<span>{{ dropList.lineName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div>
|
||||
综合评估得分:
|
||||
<span style="color: #299edf">
|
||||
{{ dropList.assessData == 3.14159 ? '--' : dropList.assessData }}
|
||||
</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row style="width: 96%" v-for="(item, i) in evaluationData" class="row pb5">
|
||||
<el-col :span="14" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="10" style="display: flex">
|
||||
<div style="width: 100%">
|
||||
评估得分：
|
||||
<span style="color: #299edf">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
稳态指标合格率
|
||||
</h3>
|
||||
<div :style="`height: calc(${rowHeight} - 31px)`" ref="chartRef"></div>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
暂态事件统计
|
||||
</h3>
|
||||
<MyEChart :style="`height: calc(${rowHeight} - 31px)`" :options="incidentCharts" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" class="mt10" :style="`height:${rowHeight}`">
|
||||
<el-col :span="24">
|
||||
<h3 class="mb10 iconBox">
|
||||
<span></span>
|
||||
历史趋势图
|
||||
</h3>
|
||||
<history :lineId="lineId" ref="historyRef" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref, provide } from 'vue'
|
||||
import { ArrowLeft } from '@element-plus/icons-vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import history from './history.vue'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||
import MyEChart from '@/components/echarts/MyEchart.vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
|
||||
import { getLineDetailData } from '@/api/advance-boot/bearingCapacity'
|
||||
import {
|
||||
getTotalIntegrityByLineIds,
|
||||
getTotalOnlineRates,
|
||||
lineQualifiedDetail,
|
||||
getLineAssess,
|
||||
getEventDetailByLineId
|
||||
} from '@/api/device-boot/panorama'
|
||||
import { title } from 'process'
|
||||
import { fontWeight } from 'html2canvas/dist/types/css/property-descriptors/font-weight'
|
||||
const emit = defineEmits(['back'])
|
||||
const dropList: any = ref({})
|
||||
const evaluationData: any = ref([])
|
||||
const incidentCharts: any = ref({})
|
||||
const ComCharts: any = ref({})
|
||||
const onLineCharts: any = ref({})
|
||||
const datePickerRef = ref()
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const historyRef = ref()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const lineId: any = ref('')
|
||||
const height = mainHeight(20)
|
||||
const rowHeight = mainHeight(190, 3).height
|
||||
|
||||
// 查询
|
||||
const open = async (id: string) => {
|
||||
let form = {
|
||||
comFlag: 1,
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
lineIds: [id],
|
||||
|
||||
ids: [id],
|
||||
searchValue: '',
|
||||
startTime: datePickerRef.value.timeValue[0]
|
||||
}
|
||||
lineId.value = id
|
||||
const { data } = await getLineDetailData({ id: id })
|
||||
dropList.value = data
|
||||
// 运行状态
|
||||
// 完整性
|
||||
getTotalIntegrityByLineIds(form).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
ComCharts.value = {
|
||||
title: {
|
||||
text: '完整性',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#2aa1e3'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
borderWidth: 1,
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// 稳态指标合格率
|
||||
})
|
||||
// 在线率
|
||||
getTotalOnlineRates(form).then((res: any) => {
|
||||
let num = (res.data || 0) / 100
|
||||
onLineCharts.value = {
|
||||
title: {
|
||||
text: '在线率',
|
||||
bottom: '10%',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
//第二个球的填充
|
||||
type: 'liquidFill',
|
||||
radius: '65%',
|
||||
center: ['50%', '40%'], //中心点
|
||||
color: [
|
||||
{
|
||||
type: 'linear',
|
||||
x: 0,
|
||||
y: 0,
|
||||
x2: 0,
|
||||
y2: 1,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 1,
|
||||
color: '#67c23a'
|
||||
}
|
||||
],
|
||||
globalCoord: false
|
||||
}
|
||||
],
|
||||
data: [num, num], // data个数代表波浪数
|
||||
backgroundStyle: {
|
||||
color: '#f7f8fc'
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
outline: {
|
||||
// show: false
|
||||
borderDistance: 0,
|
||||
itemStyle: {
|
||||
borderWidth: 2,
|
||||
borderColor: '#fff'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
// 监测点总体评价结论
|
||||
getLineAssess({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then((res: any) => {
|
||||
dropList.value.assessData = res.data.assessData
|
||||
evaluationData.value = [
|
||||
{
|
||||
targetName: '频率偏差',
|
||||
avg: res.data.freqAssessData,
|
||||
sd: res.data.freqQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压偏差',
|
||||
avg: res.data.vdevAssessData,
|
||||
sd: res.data.vdevQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '电压总谐波畸变率',
|
||||
avg: res.data.harmAssessData,
|
||||
sd: res.data.harmQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '三相电压不平衡度',
|
||||
avg: res.data.unbalanceAssessData,
|
||||
sd: res.data.unbalanceQualifyData
|
||||
},
|
||||
{
|
||||
targetName: '闪变',
|
||||
avg: res.data.flickerAssessData,
|
||||
sd: res.data.flickerQualifyData
|
||||
}
|
||||
]
|
||||
})
|
||||
// 稳态指标合格率
|
||||
|
||||
lineQualifiedDetail({
|
||||
lineId: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1]
|
||||
}).then(res => {
|
||||
echart([
|
||||
{
|
||||
time: datePickerRef.value.timeValue[0].substring(0, 7),
|
||||
targetList: ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变'],
|
||||
ratioList: [
|
||||
res.data.freqDev == 3.14159 ? null : res.data.freqDev,
|
||||
res.data.vdev == 3.14159 ? null : res.data.vdev,
|
||||
res.data.vthd == 3.14159 ? null : res.data.vthd,
|
||||
res.data.ubalance == 3.14159 ? null : res.data.ubalance,
|
||||
res.data.plt == 3.14159 ? null : res.data.plt
|
||||
]
|
||||
}
|
||||
])
|
||||
})
|
||||
|
||||
// 暂态事件统计
|
||||
getEventDetailByLineId({
|
||||
id: id,
|
||||
startTime: datePickerRef.value.timeValue[0],
|
||||
endTime: datePickerRef.value.timeValue[1],
|
||||
type: datePickerRef.value.interval
|
||||
}).then((res: any) => {
|
||||
let data = [
|
||||
{
|
||||
name: '电压暂升',
|
||||
value: res.data?.swellTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压暂降',
|
||||
value: res.data?.sagTimes || 0
|
||||
},
|
||||
{
|
||||
name: '电压中断',
|
||||
value: res.data?.interruptTimes || 0
|
||||
}
|
||||
]
|
||||
incidentCharts.value = {
|
||||
title: {
|
||||
text: `${res.data?.swellTimes + res.data?.sagTimes + res.data?.interruptTimes}`,
|
||||
left: '37%',
|
||||
top: '40%',
|
||||
textStyle: {
|
||||
fontWeight: 600,
|
||||
fontSize: 16
|
||||
},
|
||||
subtext: '总数',
|
||||
subtextStyle: {
|
||||
fontWeight: 550,
|
||||
fontSize: 14
|
||||
}
|
||||
},
|
||||
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
top: 'center',
|
||||
right: '10%',
|
||||
formatter: function (e: any) {
|
||||
console.log('🚀 ~ open ~ e:', e)
|
||||
return e + ' ' + data.filter(item => item.name == e)[0].value + '条'
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
show: false
|
||||
},
|
||||
yAxis: {
|
||||
show: false
|
||||
},
|
||||
options: {
|
||||
dataZoom: null,
|
||||
series: [
|
||||
{
|
||||
type: 'pie',
|
||||
center: ['40%', '50%'],
|
||||
radius: ['50%', '70%'],
|
||||
label: {
|
||||
show: false,
|
||||
position: 'outside',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
}
|
||||
},
|
||||
|
||||
data: data
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
// incidentCharts.value = {
|
||||
// title: {
|
||||
// text: ''
|
||||
// },
|
||||
// legend: {
|
||||
// show: true,
|
||||
// right: 90
|
||||
// },
|
||||
// xAxis: {
|
||||
// data: ['电压暂升', '电压暂降', '电压中断']
|
||||
// },
|
||||
// yAxis: {
|
||||
// name: '条'
|
||||
// },
|
||||
// grid: {
|
||||
// top: '35px',
|
||||
// left: '20px',
|
||||
// right: '20px'
|
||||
// },
|
||||
// options: {
|
||||
// dataZoom: null,
|
||||
// series: [
|
||||
// {
|
||||
// type: 'bar',
|
||||
|
||||
// data: [res.data?.swellTimes, res.data?.sagTimes, res.data?.interruptTimes],
|
||||
// label: {
|
||||
// show: true,
|
||||
// position: 'top',
|
||||
// fontSize: 12
|
||||
// }
|
||||
// }
|
||||
// ]
|
||||
// }
|
||||
// }
|
||||
})
|
||||
}
|
||||
const echart = (row: any) => {
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差', '电压偏差', '电压总谐波畸变率', '三相电压不平衡度', '闪变']
|
||||
let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: datamax[i]
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '50%'],
|
||||
radius: '65%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#2a9fe069'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2a9fe0'
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// open('4c87b7dff2281254fc55c25a4da31506')
|
||||
})
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.lineInfo {
|
||||
padding: 0 10px 10px 10px;
|
||||
}
|
||||
:deep(.el-page-header__header) {
|
||||
height: 45px;
|
||||
border-bottom: 1px solid #f1eded;
|
||||
}
|
||||
:deep(.el-descriptions__header) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.evaluationData {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(5, auto);
|
||||
.row {
|
||||
margin: 5px 2%;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
}
|
||||
img {
|
||||
width: 7%;
|
||||
margin: 0px 15px;
|
||||
}
|
||||
}
|
||||
.iconBox {
|
||||
display: flex;
|
||||
span {
|
||||
display: inline-block;
|
||||
width: 3px;
|
||||
height: 18px;
|
||||
background: var(--el-color-primary);
|
||||
margin-right: 5px;
|
||||
margin-left: 3px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user