电压暂降表及密度完成
This commit is contained in:
仲么了
@@ -17,6 +17,7 @@
|
||||
"axios": "^1.6.2",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-gl": "^2.0.9",
|
||||
"echarts4": "npm:echarts@^4.9.0",
|
||||
"element-plus": "^2.5.3",
|
||||
"exceljs": "^4.4.0",
|
||||
|
||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
@@ -25,6 +25,9 @@ dependencies:
|
||||
echarts:
|
||||
specifier: ^5.4.3
|
||||
version: 5.4.3
|
||||
echarts-gl:
|
||||
specifier: ^2.0.9
|
||||
version: 2.0.9(echarts@5.4.3)
|
||||
echarts4:
|
||||
specifier: npm:echarts@^4.9.0
|
||||
version: /echarts@4.9.0
|
||||
@@ -1743,6 +1746,10 @@ packages:
|
||||
optionalDependencies:
|
||||
fsevents: 2.3.3
|
||||
|
||||
/claygl@1.3.0:
|
||||
resolution: {integrity: sha512-+gGtJjT6SSHD2l2yC3MCubW/sCV40tZuSs5opdtn79vFSGUgp/lH139RNEQ6Jy078/L0aV8odCw8RSrUcMfLaQ==}
|
||||
dev: false
|
||||
|
||||
/color-convert@1.9.3:
|
||||
resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
|
||||
dependencies:
|
||||
@@ -1876,6 +1883,16 @@ packages:
|
||||
readable-stream: 2.3.8
|
||||
dev: false
|
||||
|
||||
/echarts-gl@2.0.9(echarts@5.4.3):
|
||||
resolution: {integrity: sha512-oKeMdkkkpJGWOzjgZUsF41DOh6cMsyrGGXimbjK2l6Xeq/dBQu4ShG2w2Dzrs/1bD27b2pLTGSaUzouY191gzA==}
|
||||
peerDependencies:
|
||||
echarts: ^5.1.2
|
||||
dependencies:
|
||||
claygl: 1.3.0
|
||||
echarts: 5.4.3
|
||||
zrender: 5.4.4
|
||||
dev: false
|
||||
|
||||
/echarts@4.9.0:
|
||||
resolution: {integrity: sha512-+ugizgtJ+KmsJyyDPxaw2Br5FqzuBnyOWwcxPKO6y0gc5caYcfnEUIlNStx02necw8jmKmTafmpHhGo4XDtEIA==}
|
||||
dependencies:
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
|
||||
// import echarts from './echarts'
|
||||
import * as echarts from 'echarts' // 全引入
|
||||
|
||||
import 'echarts-gl';
|
||||
import 'echarts/lib/component/dataZoom'
|
||||
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
@@ -24,6 +24,90 @@ const initChart = () => {
|
||||
chart?.dispose()
|
||||
|
||||
chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
console.log({
|
||||
title: {
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
color: '#000',
|
||||
fontSize: 18
|
||||
},
|
||||
...(props.options.title || null)
|
||||
},
|
||||
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.35)',
|
||||
borderWidth: 0,
|
||||
...(props.options.tooltip || null)
|
||||
},
|
||||
legend: {
|
||||
right: 20,
|
||||
top: 0,
|
||||
itemGap: 10,
|
||||
itemStyle: {},
|
||||
textStyle: {
|
||||
fontSize: 12,
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
},
|
||||
itemWidth: 15,
|
||||
itemHeight: 10,
|
||||
...(props.options.legend || null)
|
||||
},
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '10px',
|
||||
right: '60px',
|
||||
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: handlerXAxis(),
|
||||
yAxis: handlerYAxis(),
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
height: 13,
|
||||
start: 0,
|
||||
bottom: '20px',
|
||||
end: 100,
|
||||
...(props.options.dataZoom || null)
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
height: 13,
|
||||
bottom: '20px',
|
||||
end: 100,
|
||||
...(props.options.dataZoom || null)
|
||||
}
|
||||
],
|
||||
color: [
|
||||
...(props.options.color || ''),
|
||||
'#07CCCA ',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
'#77DA63',
|
||||
'#D5FF6B',
|
||||
'#Ff6600',
|
||||
'#FF9100',
|
||||
'#5B6E96',
|
||||
'#66FFCC',
|
||||
'#B3B3B3'
|
||||
],
|
||||
series: props.options.series,
|
||||
...props.options.options
|
||||
})
|
||||
chart.setOption({
|
||||
title: {
|
||||
left: 'center',
|
||||
@@ -66,7 +150,6 @@ const initChart = () => {
|
||||
itemHeight: 10,
|
||||
...(props.options.legend || null)
|
||||
},
|
||||
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '10px',
|
||||
@@ -106,6 +189,7 @@ const initChart = () => {
|
||||
'#66FFCC',
|
||||
'#B3B3B3'
|
||||
],
|
||||
series: props.options.series,
|
||||
...props.options.options
|
||||
})
|
||||
setTimeout(() => {
|
||||
|
||||
@@ -17,7 +17,6 @@ import { ElDialog } from 'element-plus'
|
||||
import BaiduMap from 'vue-baidu-map-3x'
|
||||
import ExcelJS from 'exceljs'
|
||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||
|
||||
// 方式1：NPM 安装，注入 ExcelJS 对象
|
||||
VXETable.use(VXETablePluginExportXLSX, {
|
||||
ExcelJS
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
|
||||
<div v-loading='loading' class='dianyazanjiangbaojimidu'>
|
||||
<el-form :inline='true'>
|
||||
<el-form-item label='时间间隔'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
@@ -8,16 +8,12 @@
|
||||
<el-button type='primary' @click='init'>查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1;' class='mt10 dianyazanjiang'>
|
||||
<div class='mt10 dianyazanjiang'>
|
||||
<div class='first'>
|
||||
<div class='mb10'>DISDIP表格(国际发配电联盟UNIPEDE)</div>
|
||||
<div style='flex: 1'>
|
||||
<vxe-table
|
||||
v-bind='defaultAttribute'
|
||||
style='height: 100%'
|
||||
size='mini'
|
||||
:data='firstData'>
|
||||
<vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
|
||||
<div style='flex: 1;overflow: hidden'>
|
||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='firstData'>
|
||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
||||
<vxe-colgroup title='持续事件'>
|
||||
<vxe-column field='twentyMs' title='20ms'></vxe-column>
|
||||
<vxe-column field='oneHundredMs' title='100ms'></vxe-column>
|
||||
@@ -33,13 +29,9 @@
|
||||
</div>
|
||||
<div class='second'>
|
||||
<div class='mb10'>EC61000-4-11(用电终端的电压暂降抗度)</div>
|
||||
<div style='flex: 1'>
|
||||
<vxe-table
|
||||
v-bind='defaultAttribute'
|
||||
style='height: 100%'
|
||||
size='mini'
|
||||
:data='secondData'>
|
||||
<vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
|
||||
<div style='flex: 1;overflow: hidden'>
|
||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='secondData'>
|
||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
||||
<vxe-colgroup title='持续事件'>
|
||||
<vxe-column field='tenTwentyMs' title='10-20ms'></vxe-column>
|
||||
<vxe-column field='twentyOneHundredMs' title='20-100ms'></vxe-column>
|
||||
@@ -53,13 +45,9 @@
|
||||
</div>
|
||||
<div class='third'>
|
||||
<div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
|
||||
<div style='flex: 1'>
|
||||
<vxe-table
|
||||
v-bind='defaultAttribute'
|
||||
style='height: 100%'
|
||||
size='mini'
|
||||
:data='thirdData'>
|
||||
<vxe-colgroup title='剩余电压' field='name'></vxe-colgroup>
|
||||
<div style='flex: 1;overflow: hidden'>
|
||||
<vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
|
||||
<vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
|
||||
<vxe-colgroup title='持续事件'>
|
||||
<vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
|
||||
<vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
|
||||
@@ -73,7 +61,7 @@
|
||||
</vxe-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class='charts'>
|
||||
<div class='charts' id='charts'>
|
||||
<MyEchart :options='options' />
|
||||
</div>
|
||||
</div>
|
||||
@@ -105,93 +93,152 @@ const init = () => {
|
||||
formData.startTime = datePickerRef.value.timeValue[0]
|
||||
formData.endTime = datePickerRef.value.timeValue[1]
|
||||
loading.value = true
|
||||
Promise.all([
|
||||
eventDisdip(formData),
|
||||
IEC411(formData),
|
||||
IEC28(formData),
|
||||
getCoords(formData)
|
||||
]).then(res => {
|
||||
Promise.all([eventDisdip(formData), IEC411(formData), IEC28(formData), getCoords(formData)]).then(res => {
|
||||
firstData.value = res[0].data
|
||||
secondData.value = res[1].data
|
||||
thirdData.value = res[2].data
|
||||
chartsData.value = res[3].data
|
||||
options.value = {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '剩余电压(%)',
|
||||
data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100']
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间(cyc)',
|
||||
data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc']
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '次数'
|
||||
},
|
||||
grid3D: {
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
},
|
||||
title: {
|
||||
text: '暂降密度图',
|
||||
x: 'center'
|
||||
},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
// dataView: { show: true },
|
||||
// dataZoom: { show: true },
|
||||
//restore: { show: true },
|
||||
// saveAsImage: { show: true },
|
||||
myFull: {
|
||||
show: true,
|
||||
title: '全屏查看',
|
||||
icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
|
||||
onclick: () => {
|
||||
let element = document.getElementById('charts') as HTMLElement
|
||||
// 全屏，如果已经全屏，则退出全屏
|
||||
if (document.fullscreenElement) {
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
} else {
|
||||
if (element.requestFullscreen) {
|
||||
element.requestFullscreen()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: chartsData.value.map(function(item: any) {
|
||||
return {
|
||||
value: [item[0], item[1], item[2]]
|
||||
}
|
||||
}),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
},
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
inRange: {
|
||||
color: ['#313695', '#00BB00', '#ff8000', '#a50026']
|
||||
}
|
||||
},
|
||||
xAxis3D: {
|
||||
type: 'category',
|
||||
name: '剩余电压(%)',
|
||||
data: ['0-10', '10-20', '20-30', '30-40', '40-50', '50-60', '60-70', '70-80', '80-90', '90-100'],
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
opacity: 1
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间(cyc)',
|
||||
data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
emphasis: {
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
splitNumber: 10,
|
||||
minInterval: 10,
|
||||
name: '次数'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
main: {
|
||||
intensity: 1.2
|
||||
},
|
||||
ambient: {
|
||||
intensity: 0.3
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'bar3D',
|
||||
data: chartsData.value.map(function(item: any) {
|
||||
return {
|
||||
value: [item['x'], item['y'], item['z']]
|
||||
}
|
||||
}),
|
||||
shading: 'realistic',
|
||||
label: {
|
||||
show: false,
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
fontSize: 16,
|
||||
borderWidth: 1
|
||||
}
|
||||
},
|
||||
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
opacity: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
textStyle: {
|
||||
fontSize: 20,
|
||||
color: '#900'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#900'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
@@ -199,44 +246,53 @@ const init = () => {
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.dianyazanjiang {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"first charts"
|
||||
"second charts"
|
||||
"third third "
|
||||
"third third ";
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
.dianyazanjiangbaojimidu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
.first {
|
||||
grid-area: first;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.dianyazanjiang {
|
||||
flex: 1;
|
||||
min-width: 1200px;
|
||||
min-height: 800px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
'first charts'
|
||||
'second charts'
|
||||
'third third '
|
||||
'third third ';
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
|
||||
.second {
|
||||
grid-area: second;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.first {
|
||||
grid-area: first;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.third {
|
||||
grid-area: third;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
.second {
|
||||
grid-area: second;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.charts {
|
||||
grid-area: charts;
|
||||
.third {
|
||||
grid-area: third;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.charts {
|
||||
grid-area: charts;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
<SEMIF47fenxi v-if='activeName === "2"' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='电压暂降表及密度' name='3' >
|
||||
<Dianyazanjiangbiaojimidu />
|
||||
<Dianyazanjiangbiaojimidu v-if='activeName === "3"' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='暂降分布统计' name='4' >
|
||||
<Zanjiangfenbutongji />
|
||||
|
||||
Reference in New Issue
Block a user