Merge remote-tracking branch 'origin/master'
# Conflicts: # README.md
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:
|
||||
|
||||
@@ -62,3 +62,31 @@ export function getStatistic(data: any) {
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 暂降分布统计 右 获取数据
|
||||
export function getProbabilityDistribution(data: any) {
|
||||
return request({
|
||||
url: '/event-boot/monitor/getProbabilityDistribution',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 事件分析 获取数据
|
||||
export function getMonitorEventAnalyseQuery(data: any) {
|
||||
return request({
|
||||
url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
|
||||
method: 'post',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
// 事件分析 下载
|
||||
export function downloadMonitorEventWaveFile(data: any) {
|
||||
return request({
|
||||
url: '/event-boot/monitor/downloadMonitorEventWaveFile',
|
||||
method: 'post',
|
||||
data: data.lineId,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
20
src/api/event-boot/transient.ts
Normal file
20
src/api/event-boot/transient.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
export function downloadWaveFile(data: any) {
|
||||
return request({
|
||||
url: '/event-boot/transient/downloadWaveFile',
|
||||
method: 'post',
|
||||
data: data.lineId,
|
||||
responseType: 'blob'
|
||||
})
|
||||
}
|
||||
|
||||
// 事件分析 shushiboxi 获取数据
|
||||
export function getMonitorEventAnalyseWave(data:any) {
|
||||
return request({
|
||||
url: "/event-boot/transient/getTransientAnalyseWave",
|
||||
method: "post",
|
||||
data
|
||||
});
|
||||
}
|
||||
|
||||
@@ -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>()
|
||||
@@ -66,7 +66,6 @@ const initChart = () => {
|
||||
itemHeight: 10,
|
||||
...(props.options.legend || null)
|
||||
},
|
||||
|
||||
grid: {
|
||||
top: '50px',
|
||||
left: '10px',
|
||||
@@ -74,8 +73,8 @@ const initChart = () => {
|
||||
bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: handlerXAxis(),
|
||||
yAxis: handlerYAxis(),
|
||||
xAxis: props.options.xAxis ? handlerXAxis() : null,
|
||||
yAxis: props.options.yAxis ? handlerYAxis() : null,
|
||||
dataZoom: [
|
||||
{
|
||||
type: 'inside',
|
||||
@@ -95,7 +94,7 @@ const initChart = () => {
|
||||
],
|
||||
color: [
|
||||
...(props.options.color || ''),
|
||||
'#07CCCA ',
|
||||
'#07CCCA',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
'#77DA63',
|
||||
@@ -106,11 +105,12 @@ const initChart = () => {
|
||||
'#66FFCC',
|
||||
'#B3B3B3'
|
||||
],
|
||||
series: props.options.series,
|
||||
...props.options.options
|
||||
})
|
||||
setTimeout(() => {
|
||||
chart.resize()
|
||||
},0)
|
||||
}, 0)
|
||||
}
|
||||
const handlerYAxis = () => {
|
||||
let temp = {
|
||||
|
||||
@@ -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,2 +1,2 @@
|
||||
dialog 弹框标准模版
|
||||
表格模版参照 /views/userList/index.vue
|
||||
table 表格模版
|
||||
|
||||
175
src/template/table.vue
Normal file
175
src/template/table.vue
Normal file
@@ -0,0 +1,175 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
<!-- 表头 -->
|
||||
<TableHeader date-picker>
|
||||
<template v-slot:select>
|
||||
<el-form-item label='关键词:'>
|
||||
<el-input
|
||||
style='width: 240px'
|
||||
v-model='tableStore.table.params.searchValue'
|
||||
clearable
|
||||
placeholder='仅根据用户名/登录名'
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon='Plus' type='primary' @click='addUser'>添加</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- 表格 -->
|
||||
<Table ref='tableRef' />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit ref='popupEdit' />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { Plus } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide, defineOptions } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import PopupEdit from './dialog.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
// 注意名字不要重复，若要保持页面存活，名字需要和路由admin后面的字符保持一致
|
||||
defineOptions({
|
||||
name: 'auth/userlist'
|
||||
})
|
||||
const popupEdit = ref()
|
||||
const tableStore = new TableStore({
|
||||
// 若页面表格高度需要调整，请修改publicHeight(内容区域除表格外其他内容的高度)
|
||||
// publicHeight: 60,
|
||||
url: '/user-boot/user/list',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ title: '用户名称', field: 'name', minWidth: '130' },
|
||||
{ title: '登录名', field: 'loginName', minWidth: '130' },
|
||||
{ title: '角色', field: 'roleName', minWidth: '130' },
|
||||
{ title: '部门', field: 'deptName', minWidth: '200' },
|
||||
{ title: '电话', field: 'phoneShow', minWidth: '100' },
|
||||
{ title: '注册时间', field: 'registerTime', minWidth: '130' },
|
||||
{ title: '登录时间', field: 'loginTime', minWidth: '130' },
|
||||
{ title: '类型', field: 'casualUserName', minWidth: '80' },
|
||||
{
|
||||
title: '状态',
|
||||
field: 'state',
|
||||
width: '100',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
2: 'warning',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
5: 'danger'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '注销',
|
||||
1: '正常',
|
||||
2: '锁定',
|
||||
3: '待审核',
|
||||
4: '休眠',
|
||||
5: '密码过期'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '修改密码',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1
|
||||
},
|
||||
click: row => {
|
||||
ElMessageBox.prompt('二次校验密码确认', '注销用户', {
|
||||
confirmButtonText: '确认',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'password'
|
||||
}).then(({ value }) => {
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '激活',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 2 && row.state !== 5 && row.state !== 0 && row.state !== 4
|
||||
},
|
||||
click: row => {
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '注销',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-SwitchButton',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.state !== 1 && row.state !== 3
|
||||
},
|
||||
click: row => {
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.deptName = item.deptName || '/'
|
||||
item.phoneShow = item.phone || '/'
|
||||
item.roleName = item.role.length ? item.role : '/'
|
||||
switch (item.casualUser) {
|
||||
case 0:
|
||||
item.casualUserName = '临时用户'
|
||||
break
|
||||
case 1:
|
||||
item.casualUserName = '长期用户'
|
||||
break
|
||||
default:
|
||||
item.casualUserName = '/'
|
||||
break
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
// 注入到子组件
|
||||
provide('tableStore', tableStore)
|
||||
// 默认参数 参数多的话可以使用Object.assign方法
|
||||
tableStore.table.params.searchState = 1
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.casualUser = -1
|
||||
tableStore.table.params.orderBy = ''
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
// 弹框
|
||||
const addUser = () => {
|
||||
popupEdit.value.open('新增用户')
|
||||
}
|
||||
</script>
|
||||
@@ -3,6 +3,7 @@ import createAxios from '@/utils/request'
|
||||
import { requestPayload } from '@/utils/request'
|
||||
import { Method } from 'axios'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
|
||||
interface TableStoreParams {
|
||||
url: string
|
||||
pk?: string
|
||||
@@ -39,7 +40,7 @@ export default class TableStore {
|
||||
loadCallback: null,
|
||||
resetCallback: null,
|
||||
beforeSearchFun: null,
|
||||
height: mainHeight(20 + (this.showPage ? 58 : 0)).height as string,
|
||||
height: 0,
|
||||
publicHeight: 0
|
||||
})
|
||||
|
||||
@@ -55,6 +56,7 @@ export default class TableStore {
|
||||
this.table.loadCallback = options.loadCallback || null
|
||||
this.table.beforeSearchFun = options.beforeSearchFun || null
|
||||
Object.assign(this.table.params, options.params)
|
||||
this.table.height = mainHeight(20 + (this.showPage ? 58 : 0) + this.table.publicHeight).height as string
|
||||
}
|
||||
|
||||
index() {
|
||||
|
||||
@@ -23,7 +23,7 @@ const tableStore = new TableStore({
|
||||
method: 'POST',
|
||||
url: '/user-boot/user/checkUserList',
|
||||
column: [
|
||||
// { width: '60', type: 'checkbox' },
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{ title: '名称', field: 'name' },
|
||||
{ title: '登录名', field: 'loginName' },
|
||||
{ title: '角色', field: 'roleName' },
|
||||
|
||||
@@ -1,10 +1,172 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
|
||||
<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'>查询</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 { ref } from 'vue'
|
||||
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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
lineIndex: monitoringPoint.state.lineId,
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const options = ref({})
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.startTime = datePickerRef.value.timeValue[0]
|
||||
formData.endTime = datePickerRef.value.timeValue[1]
|
||||
getProbabilityDistribution(formData).then(
|
||||
(res: any) => {
|
||||
let data = res.data
|
||||
let sisttime = data.sisttime
|
||||
let persisttime = data.persisttime
|
||||
options.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
title: {
|
||||
text: '持续时间的概率分布函数',
|
||||
x: 'center'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '暂降幅值',
|
||||
nameGap: 10,
|
||||
nameTextStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '概率分布',
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '占比',
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '概率分布',
|
||||
type: 'line',
|
||||
data: sisttime,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: persisttime,
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
}
|
||||
],
|
||||
options: {
|
||||
dataZoom: null
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -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='120px'></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,17 +93,16 @@ 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 = {
|
||||
options: {
|
||||
xAxis: null,
|
||||
yAxis: null,
|
||||
dataZoom: null,
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'axis'
|
||||
@@ -124,6 +111,33 @@ const init = () => {
|
||||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
visualMap: {
|
||||
max: 20,
|
||||
show: false,
|
||||
@@ -134,12 +148,40 @@ const init = () => {
|
||||
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']
|
||||
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'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
yAxis3D: {
|
||||
type: 'category',
|
||||
name: '持续时间(cyc)',
|
||||
data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc']
|
||||
data: ['1cyc', '2cyc', '3cyc', '4cyc', '5cyc', '6~10cyc', '10~20cyc', '20~30cyc', '30~60cyc'],
|
||||
nameTextStyle: {
|
||||
color: '#111'
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#111'
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: '#111'
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
color: ['#111'],
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
zAxis3D: {
|
||||
type: 'value',
|
||||
@@ -148,6 +190,10 @@ const init = () => {
|
||||
name: '次数'
|
||||
},
|
||||
grid3D: {
|
||||
viewControl: {
|
||||
projection: 'perspective',
|
||||
distance: 250
|
||||
},
|
||||
boxWidth: 200,
|
||||
boxDepth: 80,
|
||||
light: {
|
||||
@@ -164,7 +210,7 @@ const init = () => {
|
||||
type: 'bar3D',
|
||||
data: chartsData.value.map(function(item: any) {
|
||||
return {
|
||||
value: [item[0], item[1], item[2]]
|
||||
value: [item['x'], item['y'], item['z']]
|
||||
}
|
||||
}),
|
||||
shading: 'realistic',
|
||||
@@ -193,22 +239,31 @@ const init = () => {
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.dianyazanjiang {
|
||||
.dianyazanjiangbaojimidu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: scroll;
|
||||
|
||||
.dianyazanjiang {
|
||||
flex: 1;
|
||||
min-width: 1200px;
|
||||
min-height: 800px;
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"first charts"
|
||||
"second charts"
|
||||
"third third "
|
||||
"third third ";
|
||||
'first charts'
|
||||
'second charts'
|
||||
'third third '
|
||||
'third third ';
|
||||
grid-template-rows: 1fr 1fr 1fr 1fr;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-gap: 10px;
|
||||
@@ -236,7 +291,8 @@ onMounted(() => {
|
||||
|
||||
.charts {
|
||||
grid-area: charts;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<el-tabs v-model='activeName' type='border-card' class='event-statistics' tab-position='left' :style='height'>
|
||||
<el-tab-pane label='ITIC曲线分析' name='1' >
|
||||
<el-tab-pane lazy label='ITIC曲线分析' name='1'>
|
||||
<ITICquxianfenxi />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='SEMI F47 分析' name='2' >
|
||||
<SEMIF47fenxi v-if='activeName === "2"' />
|
||||
<el-tab-pane lazy label='SEMI F47 分析' name='2'>
|
||||
<SEMIF47fenxi />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='电压暂降表及密度' name='3' >
|
||||
<el-tab-pane lazy label='电压暂降表及密度' name='3'>
|
||||
<Dianyazanjiangbiaojimidu />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='暂降分布统计' name='4' >
|
||||
<el-tab-pane lazy label='暂降分布统计' name='4'>
|
||||
<Zanjiangfenbutongji />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='暂降幅值概率分布' name='5' >
|
||||
<el-tab-pane lazy label='暂降幅值概率分布' name='5'>
|
||||
<Zanjiangfuzhigailvfenbu />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='持续时间概率分布' name='6' >
|
||||
<el-tab-pane lazy label='持续时间概率分布' name='6'>
|
||||
<Chixushijiangailvfenbu />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -36,12 +36,14 @@ const height = mainHeight(84)
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.event-statistics {
|
||||
.el-tabs__header.is-left{
|
||||
.el-tabs__header.is-left {
|
||||
margin-right: 0;
|
||||
}
|
||||
.el-tabs__content{
|
||||
|
||||
.el-tabs__content {
|
||||
height: 100%;
|
||||
.el-tab-pane{
|
||||
|
||||
.el-tab-pane {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,325 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
|
||||
<div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
|
||||
<el-form :inline='true'>
|
||||
<el-form-item label='时间间隔'>
|
||||
<DatePicker ref='datePickerRef'></DatePicker>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type='primary' @click='init'>查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
|
||||
<my-echart :options='firstOptions' style='flex: 1;height: 100%' />
|
||||
<div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
|
||||
<my-echart :options='secondOptions' style='flex: 1' />
|
||||
<my-echart :options='thirdOptions' style='flex: 1' />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const loading = ref(true)
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const formData = reactive({
|
||||
lineIndex: monitoringPoint.state.lineId,
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
flag: 1
|
||||
})
|
||||
const firstOptions = ref<any>({})
|
||||
const secondOptions = ref<any>({})
|
||||
const thirdOptions = ref<any>({})
|
||||
const firstData = ref<any>([])
|
||||
const secondData = ref<any>([])
|
||||
const thirdData = ref<any>([])
|
||||
|
||||
|
||||
const init = () => {
|
||||
|
||||
loading.value = true
|
||||
formData.startTime = datePickerRef.value.timeValue[0]
|
||||
formData.endTime = datePickerRef.value.timeValue[1]
|
||||
formData.flag = datePickerRef.value.interval
|
||||
Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
|
||||
firstData.value = res[0].data
|
||||
secondData.value = res[1].data.reason
|
||||
thirdData.value = res[1].data.types
|
||||
initFirst()
|
||||
initSecond()
|
||||
initThird()
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
const initFirst = () => {
|
||||
let months = new Array()
|
||||
let handle = new Array()
|
||||
for (let i = 0; i < firstData.value.length; i++) {
|
||||
if ((firstData.value[i].month == '01') || (i == 0)) {
|
||||
if (formData.flag == 0) {
|
||||
months[i] = firstData.value[i].month
|
||||
} else {
|
||||
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
|
||||
}
|
||||
} else {
|
||||
if (formData.flag == 0) {
|
||||
months[i] = firstData.value[i].month
|
||||
} else {
|
||||
months[i] = firstData.value[i].month + '-' + firstData.value[i].day
|
||||
}
|
||||
}
|
||||
handle[i] = firstData.value[i].times
|
||||
}
|
||||
|
||||
firstOptions.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
title: {
|
||||
text:
|
||||
formData.flag == 3
|
||||
? '月份统计'
|
||||
: formData.flag == 2
|
||||
? '季度统计'
|
||||
: formData.flag == 1
|
||||
? '年份统计'
|
||||
: '',
|
||||
x: 'center'
|
||||
},
|
||||
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)',
|
||||
formatter: function(params: any) {
|
||||
let tips = ''
|
||||
tips += '<font>时间:' + params[0].name + '</font><br/>'
|
||||
tips += '<font>暂降次数:' + params[0].data + '</font>'
|
||||
return tips
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
data: ['暂降次数'],
|
||||
x: 'right'
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: months,
|
||||
name: '时间'
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '次',
|
||||
minInterval: 1
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '暂降次数',
|
||||
type: 'bar',
|
||||
barMaxWidth: 30,
|
||||
barMinHeight: 5,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function(params: any) {
|
||||
if (params.data == 0) {
|
||||
return '#ccc'
|
||||
} else {
|
||||
return '#07CCCA'
|
||||
}
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
label: { show: true, position: 'top' },
|
||||
color: '#8B008B'
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: handle
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const initSecond = () => {
|
||||
let reaArray = []
|
||||
let valueArray = []
|
||||
secondData.value.reverse()
|
||||
for (let i = 0; i < secondData.value.length; i++) {
|
||||
reaArray.push(secondData.value[i].reason)
|
||||
valueArray.push({
|
||||
name: secondData.value[i].reason,
|
||||
value: secondData.value[i].times
|
||||
})
|
||||
}
|
||||
secondOptions.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
animation: false,
|
||||
title: {
|
||||
text: '暂降原因',
|
||||
x: 'center'
|
||||
},
|
||||
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)',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: reaArray
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '暂降原因',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center: ['50%', '53%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lableLine: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: valueArray,
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
const initThird = () => {
|
||||
let typeArray = []
|
||||
let valueArray = []
|
||||
for (let i = 0; i < thirdData.value.length; i++) {
|
||||
typeArray.push(thirdData.value[i].type)
|
||||
valueArray.push({
|
||||
name: thirdData.value[i].type,
|
||||
value: thirdData.value[i].times
|
||||
}
|
||||
)
|
||||
}
|
||||
thirdOptions.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
animation: false,
|
||||
title: {
|
||||
text: '暂降类型',
|
||||
x: 'center'
|
||||
},
|
||||
|
||||
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)',
|
||||
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||||
},
|
||||
legend: {
|
||||
orient: 'vertical',
|
||||
left: 'left',
|
||||
data: typeArray
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '暂降类型',
|
||||
type: 'pie',
|
||||
radius: '70%',
|
||||
center: ['50%', '60%'],
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
lableLine: {
|
||||
normal: {
|
||||
show: false
|
||||
},
|
||||
emphasis: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
data: valueArray,
|
||||
itemStyle: {
|
||||
emphasis: {
|
||||
shadowBlur: 10,
|
||||
shadowOffsetX: 0,
|
||||
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
<style lang='scss'>
|
||||
.zanjiangfenbutongji {
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,184 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
|
||||
<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'>查询</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 { ref } from 'vue'
|
||||
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 '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
import { getProbabilityDistribution } from '@/api/event-boot/monitor'
|
||||
|
||||
const datePickerRef = ref()
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const loading = ref(true)
|
||||
const formData = reactive({
|
||||
lineIndex: monitoringPoint.state.lineId,
|
||||
startTime: '',
|
||||
endTime: ''
|
||||
})
|
||||
const options = ref({})
|
||||
|
||||
const init = () => {
|
||||
loading.value = true
|
||||
formData.startTime = datePickerRef.value.timeValue[0]
|
||||
formData.endTime = datePickerRef.value.timeValue[1]
|
||||
getProbabilityDistribution(formData).then(
|
||||
(res: any) => {
|
||||
let data = res.data
|
||||
let eventValue = data.eventvalue
|
||||
let pereventValue = data.pereventvalue
|
||||
options.value = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
title: {
|
||||
text: '暂降幅值的概率分布函数',
|
||||
x: 'center'
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
left: 10,
|
||||
data: ['概率分布', '占比'],
|
||||
|
||||
textStyle: {
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
|
||||
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
|
||||
},
|
||||
calculable: true,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
name: '暂降幅值',
|
||||
nameGap: 10,
|
||||
nameTextStyle: {
|
||||
fontSize: 12
|
||||
},
|
||||
data: [
|
||||
'0',
|
||||
'10%',
|
||||
'20%',
|
||||
'30%',
|
||||
'40%',
|
||||
'50%',
|
||||
'60%',
|
||||
'70%',
|
||||
'80%',
|
||||
'90%',
|
||||
'100%'
|
||||
]
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '概率分布',
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
},
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
// 使用深浅的间隔色
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
name: '占比',
|
||||
|
||||
nameTextStyle: {
|
||||
fontSize: 15
|
||||
},
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dashed',
|
||||
opacity: 0.5
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '概率分布',
|
||||
type: 'line',
|
||||
data: eventValue,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '占比',
|
||||
type: 'bar',
|
||||
data: pereventValue,
|
||||
barWidth: 30,
|
||||
itemStyle: {
|
||||
normal: { show: true }
|
||||
}
|
||||
}
|
||||
],
|
||||
options:{
|
||||
dataZoom: null,
|
||||
}
|
||||
}
|
||||
nextTick(() => {
|
||||
loading.value = false
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
})
|
||||
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -1,10 +1,119 @@
|
||||
<template>
|
||||
<div class='default-main'>
|
||||
|
||||
<div>
|
||||
<!-- 表头 -->
|
||||
<TableHeader date-picker>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon='Download' type='primary' @click='download'>波形下载</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!-- 表格 -->
|
||||
<Table ref='tableRef' :checkboxConfig='checkboxConfig' />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
import { Download } from '@element-plus/icons-vue'
|
||||
import { ref, onMounted, provide, reactive } from 'vue'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { checkUser } from '@/api/user-boot/user'
|
||||
import { VxeTablePropTypes } from 'vxe-table'
|
||||
import { downloadWaveFile, getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
|
||||
const dictData = useDictData()
|
||||
const eventTypeOptions = dictData.getBasicData('Event_Statis')
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const tableStore = new TableStore({
|
||||
publicHeight: 60,
|
||||
url: '/event-boot/monitor/getMonitorEventAnalyseQuery',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{ title: '序号', type: 'seq', width: '60' },
|
||||
{ title: '变电站名称', field: 'subName', minWidth: '130' },
|
||||
{ title: '监测点名称', field: 'lineName', minWidth: '130' },
|
||||
{ title: '网络参数', field: 'ip', minWidth: '130' },
|
||||
{ title: '电压等级(kV)', field: 'voltageScale', width: '100' },
|
||||
{ title: '暂降发生时刻', field: 'startTime', width: '200' },
|
||||
{ title: '暂降类型', field: 'advanceType', minWidth: '130' },
|
||||
{ title: '暂降原因', field: 'advanceReason', minWidth: '130' },
|
||||
{ title: '触发类型', field: 'eventTypeName', minWidth: '80' },
|
||||
{ title: '暂降(骤升)幅值(%)', field: 'featureAmplitude', minWidth: '80' },
|
||||
{ title: '持续时间(s)', field: 'duration', minWidth: '80' },
|
||||
{ title: '严重度', field: 'severity', minWidth: '80' },
|
||||
{
|
||||
title: '操作',
|
||||
width: '180',
|
||||
render: 'buttons',
|
||||
fixed: 'right',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形查看',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Lock',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.fileFlag === 0
|
||||
},
|
||||
click: row => {
|
||||
getMonitorEventAnalyseWave({
|
||||
id: row.eventId,
|
||||
systemType: 0,
|
||||
type: 0
|
||||
}).then(res => {
|
||||
console.log(res)
|
||||
ElMessage.error('暂无可下载的波形文件!')
|
||||
})
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
loadCallback: () => {
|
||||
tableStore.table.data.forEach((item: any) => {
|
||||
item.eventTypeName = eventTypeOptions.find(item2 => item2.id === item.eventType)?.name
|
||||
item.featureAmplitude = (item.featureAmplitude * 100).toFixed(0)
|
||||
})
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.lineId = monitoringPoint.state.lineId
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
|
||||
checkMethod: ({ row }) => {
|
||||
return row.fileFlag === 1
|
||||
}
|
||||
})
|
||||
const download = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择数据')
|
||||
return
|
||||
}
|
||||
downloadWaveFile({
|
||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
||||
}).then((res: any) => {
|
||||
if (res.type == 'application/json') {
|
||||
ElMessage.warning('暂无可下载的波形文件!')
|
||||
return
|
||||
}
|
||||
ElMessage.success('下载中。。。!')
|
||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '波形分析下载' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link) //释放标签
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style></style>
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
<template>
|
||||
<div class='default-main' style='position: relative'>
|
||||
<el-tabs v-model='activeName' type='border-card' class='demo-tabs'>
|
||||
<el-tab-pane label='导航' name='1' :style='height'>
|
||||
<el-tab-pane label='导航' name='1' :style='height' lazy>
|
||||
<Navigation @changeTab='changeTab' />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='事件统计' name='2' >
|
||||
<el-tab-pane label='事件统计' name='2' lazy>
|
||||
<EventStatistics />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='事件分析' name='3' >
|
||||
<el-tab-pane label='事件分析' name='3' lazy>
|
||||
<EventStudy />
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label='运行情况' name='4' >
|
||||
<el-tab-pane label='运行情况' name='4' lazy>
|
||||
<RunningCondition />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
@@ -32,7 +32,7 @@ defineOptions({
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(82)
|
||||
const activeName = ref('2')
|
||||
const activeName = ref('3')
|
||||
watch(
|
||||
() => router.currentRoute.value.query.lineId,
|
||||
(newLineId, oldLineId) => {
|
||||
|
||||
Reference in New Issue
Block a user