Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
2106e2e9c1 | ||
|
|
536f22584d | ||
|
|
490b52b525 | ||
|
|
1dbecb19cc | ||
|
|
8527939eb1 | ||
|
|
13f11596e4 | ||
|
|
2330b50147 | ||
|
|
d9dfd804c5 | ||
|
|
1c01fe5ae1 | ||
|
|
1a09c31669 | ||
|
|
bda7373133 | ||
|
|
03d302ded8 | ||
|
|
4f907a80c4 |
File diff suppressed because one or more lines are too long
@@ -12,7 +12,7 @@ import { provide, onMounted, ref } from 'vue'
|
|||||||
|
|
||||||
// let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
|
// let buildUrl = 'wss://pqmcn.com:8087/mqtt'//102
|
||||||
// let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
|
// let buildUrl = 'ws://pqmcn.com:8073/mqtt' //27
|
||||||
let buildUrl = 'ws://192.168.1.103:8083/mqtt' //27
|
let buildUrl = 'ws://112.4.144.18:38083/mqtt' //27
|
||||||
|
|
||||||
// 从 Nginx 获取 MQTT URL
|
// 从 Nginx 获取 MQTT URL
|
||||||
const fetchMqttUrl = async () => {
|
const fetchMqttUrl = async () => {
|
||||||
|
|||||||
@@ -25,7 +25,6 @@ export function objTree() {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//云设备录入树
|
//云设备录入树
|
||||||
export function getCldTree() {
|
export function getCldTree() {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
@@ -40,4 +39,11 @@ export function lineTree() {
|
|||||||
method: 'POST'
|
method: 'POST'
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//APF报表树
|
||||||
|
export function getUserDevTree(data) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-harmonic-boot/pqSensitiveUser/getUserDevTree',
|
||||||
|
method: 'POST',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -26,3 +26,30 @@ export function deleteUser(data: any) {
|
|||||||
data: data
|
data: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 新增治理方案绑定
|
||||||
|
export function saveGovernPlan(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/pqGovernPlan/save',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 修改治理方案绑定
|
||||||
|
export function updateGovernPlan(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/pqGovernPlan/update',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 删除治理方案绑定
|
||||||
|
export function deleteGovernPlan(data: any) {
|
||||||
|
return request({
|
||||||
|
url: '/cs-harmonic-boot/pqGovernPlan/delete',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -35,7 +35,7 @@ export const editEquipmentDelivery = (data: any) => {
|
|||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery',
|
url: '/cs-device-boot/EquipmentDelivery/updateEquipmentDelivery',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
data: data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -119,3 +119,11 @@ export function resetFactory(data: any) {
|
|||||||
params: data
|
params: data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
//修改mac后接入
|
||||||
|
export function accessByUpdateMac(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/access-boot/device/accessByUpdateMac',
|
||||||
|
method: 'post',
|
||||||
|
params: data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|||||||
@@ -84,7 +84,7 @@ export const updateTimer = (data: any) => {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// 补招配置
|
//补召配置
|
||||||
export const runTimer = (data: any) => {
|
export const runTimer = (data: any) => {
|
||||||
return request({
|
return request({
|
||||||
url: '/system-boot/timer/run',
|
url: '/system-boot/timer/run',
|
||||||
|
|||||||
@@ -36,6 +36,20 @@ export function addVersion(data:any) {
|
|||||||
data
|
data
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
export function updateVersion(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-system-boot/appVersion/update',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
export function deleteVersion(data: any) {
|
||||||
|
return createAxios({
|
||||||
|
url: '/cs-system-boot/appVersion/delete',
|
||||||
|
method: 'post',
|
||||||
|
params:data
|
||||||
|
})
|
||||||
|
}
|
||||||
export function getLastData(data:any) {
|
export function getLastData(data:any) {
|
||||||
return createAxios({
|
return createAxios({
|
||||||
url: '/cs-system-boot/appVersion/getLastData',
|
url: '/cs-system-boot/appVersion/getLastData',
|
||||||
|
|||||||
81
src/components/CnDialog/CnDialog.vue
Normal file
81
src/components/CnDialog/CnDialog.vue
Normal file
@@ -0,0 +1,81 @@
|
|||||||
|
<template>
|
||||||
|
<ElDialogInner
|
||||||
|
v-bind="dialogAttrs"
|
||||||
|
:width="resolvedWidth"
|
||||||
|
:class="dialogClass"
|
||||||
|
:draggable="resolvedDraggable"
|
||||||
|
:close-on-click-modal="closeOnClickModal"
|
||||||
|
>
|
||||||
|
<template v-for="(_, name) in $slots" #[name]="slotData">
|
||||||
|
<slot :name="name" v-bind="slotData || {}" />
|
||||||
|
</template>
|
||||||
|
</ElDialogInner>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ElDialog as ElDialogInner } from 'element-plus'
|
||||||
|
import { computed, useAttrs } from 'vue'
|
||||||
|
import {
|
||||||
|
getDialogPreset,
|
||||||
|
resolveDialogSize,
|
||||||
|
resolveDialogSizeByClass,
|
||||||
|
type DialogSize
|
||||||
|
} from '@/config/dialog'
|
||||||
|
|
||||||
|
defineOptions({ inheritAttrs: false })
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
/** 显式指定弹框尺寸:small | middle | big */
|
||||||
|
dialogSize?: DialogSize
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const attrs = useAttrs()
|
||||||
|
|
||||||
|
const resolvedSize = computed<DialogSize>(() => {
|
||||||
|
if (props.dialogSize) return props.dialogSize
|
||||||
|
|
||||||
|
const width = attrs.width as string | number | undefined
|
||||||
|
if (width !== undefined && width !== null && width !== '') {
|
||||||
|
return resolveDialogSize(width)
|
||||||
|
}
|
||||||
|
|
||||||
|
return resolveDialogSizeByClass(attrs.class)
|
||||||
|
})
|
||||||
|
|
||||||
|
const dialogPreset = computed(() => getDialogPreset(resolvedSize.value))
|
||||||
|
|
||||||
|
const resolvedWidth = computed(() => dialogPreset.value.width)
|
||||||
|
|
||||||
|
const dialogClass = computed(() => [
|
||||||
|
'cn-dialog',
|
||||||
|
`cn-dialog--${resolvedSize.value}`,
|
||||||
|
dialogPreset.value.class,
|
||||||
|
attrs.class
|
||||||
|
])
|
||||||
|
|
||||||
|
const dialogAttrs = computed(() => {
|
||||||
|
const {
|
||||||
|
width: _width,
|
||||||
|
class: _class,
|
||||||
|
draggable: _draggable,
|
||||||
|
closeOnClickModal: _closeOnClickModal,
|
||||||
|
...rest
|
||||||
|
} = attrs
|
||||||
|
const { 'close-on-click-modal': _closeOnClickModalKebab, ...restWithoutKebab } = rest as Record<
|
||||||
|
string,
|
||||||
|
unknown
|
||||||
|
>
|
||||||
|
return restWithoutKebab
|
||||||
|
})
|
||||||
|
|
||||||
|
const resolvedDraggable = computed(() => {
|
||||||
|
if (attrs.draggable !== undefined) return attrs.draggable as boolean
|
||||||
|
return dialogPreset.value.draggable
|
||||||
|
})
|
||||||
|
|
||||||
|
const closeOnClickModal = computed(() => {
|
||||||
|
if (attrs.closeOnClickModal !== undefined) return attrs.closeOnClickModal as boolean
|
||||||
|
if (attrs['close-on-click-modal'] !== undefined) return attrs['close-on-click-modal'] as boolean
|
||||||
|
return dialogPreset.value.closeOnClickModal
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@@ -6,10 +6,10 @@
|
|||||||
</el-row>
|
</el-row>
|
||||||
<el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
|
<el-row class="ba-array-item" v-for="(item, idx) in state.value" :gutter="10" :key="idx">
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input v-model="item.key"></el-input>
|
<el-input maxlength="32" show-word-limit v-model="item.key"></el-input>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="10">
|
<el-col :span="10">
|
||||||
<el-input v-model="item.value"></el-input>
|
<el-input maxlength="32" show-word-limit v-model="item.value"></el-input>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="4">
|
<el-col :span="4">
|
||||||
<el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />
|
<el-button @click="onDelArrayItem(idx)" size="small" icon="el-icon-Delete" circle />
|
||||||
|
|||||||
@@ -61,7 +61,7 @@
|
|||||||
</transition>
|
</transition>
|
||||||
</div>
|
</div>
|
||||||
<template #reference>
|
<template #reference>
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit
|
||||||
v-model="state.inputValue"
|
v-model="state.inputValue"
|
||||||
:size="size"
|
:size="size"
|
||||||
:disabled="disabled"
|
:disabled="disabled"
|
||||||
|
|||||||
@@ -1,38 +1,21 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--F47曲线 -->
|
<!--F47曲线 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange"
|
||||||
ref="TableHeaderRef"
|
datePicker v-if="fullscreen"></TableHeader>
|
||||||
:showReset="false"
|
|
||||||
:timeKeyList="prop.timeKey"
|
|
||||||
@selectChange="selectChange"
|
|
||||||
datePicker
|
|
||||||
v-if="fullscreen"
|
|
||||||
></TableHeader>
|
|
||||||
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
||||||
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
||||||
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
||||||
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
||||||
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
||||||
</el-descriptions>
|
</el-descriptions>
|
||||||
<my-echart
|
<my-echart v-loading="tableStore.table.loading" ref="chartRef" class="tall" :options="echartList" :style="{
|
||||||
v-loading="tableStore.table.loading"
|
width: prop.width,
|
||||||
ref="chartRef"
|
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
class="tall"
|
}" @chart-click="handleChartClick" />
|
||||||
:options="echartList"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
|
||||||
}"
|
|
||||||
@chart-click="handleChartClick"
|
|
||||||
/>
|
|
||||||
<el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
|
<el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
|
||||||
<waveFormAnalysis
|
<waveFormAnalysis v-loading="loading" ref="waveFormAnalysisRef" @handleHideCharts="isWaveCharts = false"
|
||||||
v-loading="loading"
|
:wp="wp" />
|
||||||
ref="waveFormAnalysisRef"
|
|
||||||
@handleHideCharts="isWaveCharts = false"
|
|
||||||
:wp="wp"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -123,9 +106,9 @@ const tableStore: any = new TableStore({
|
|||||||
text: `F47曲线`
|
text: `F47曲线`
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: ['可容忍事件', '不可容忍事件'],
|
data: ['分割线', '可容忍事件', '不可容忍事件'],
|
||||||
itemWidth: 10,
|
// itemWidth: 10,
|
||||||
itemHeight: 10,
|
// itemHeight: 10,
|
||||||
itemGap: 15
|
itemGap: 15
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@@ -149,9 +132,14 @@ const tableStore: any = new TableStore({
|
|||||||
formatter: function (a: any) {
|
formatter: function (a: any) {
|
||||||
var relVal = `<strong>${a.seriesName}</strong><br/>`
|
var relVal = `<strong>${a.seriesName}</strong><br/>`
|
||||||
|
|
||||||
relVal += "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
relVal += "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
relVal += "<font style='color:" + "'>特征幅值:" + Math.floor(a.value[1] * 100) / 100 + '%</font><br/>'
|
||||||
relVal += "<font style='color:" + "'>特征幅值:" + a.value[1].toFixed(2) + '%</font>'
|
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>监测点名称:" + (a.value[4] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>设备名称:" + (a.value[5] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>项目名称:" + (a.value[6] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>工程名称:" + (a.value[7] || '/') + '</font>'
|
||||||
|
|
||||||
return relVal
|
return relVal
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -173,10 +161,10 @@ const tableStore: any = new TableStore({
|
|||||||
// max: function (value: any) {
|
// max: function (value: any) {
|
||||||
// return value.max + 20
|
// return value.max + 20
|
||||||
// },
|
// },
|
||||||
max: function (value) {
|
// max: function (value) {
|
||||||
// 先取原始最大值+20,再向上取整到最近的10的倍数,确保刻度够用且规整
|
// // 先取原始最大值+20,再向上取整到最近的10的倍数,确保刻度够用且规整
|
||||||
return Math.ceil((value.max + 20) / 10) * 10
|
// return Math.ceil((value.max + 20) / 10) * 10
|
||||||
},
|
// },
|
||||||
// splitNumber: 10,
|
// splitNumber: 10,
|
||||||
// interval: 10,
|
// interval: 10,
|
||||||
// minInterval: 10,
|
// minInterval: 10,
|
||||||
@@ -188,7 +176,7 @@ const tableStore: any = new TableStore({
|
|||||||
dataZoom: null,
|
dataZoom: null,
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '边界线',
|
name: '分割线',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: [
|
data: [
|
||||||
[0.05, 0],
|
[0.05, 0],
|
||||||
@@ -201,6 +189,7 @@ const tableStore: any = new TableStore({
|
|||||||
[1000, 80]
|
[1000, 80]
|
||||||
],
|
],
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
|
|
||||||
tooltips: {
|
tooltips: {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
@@ -285,8 +274,11 @@ function gongfunction(arr: any) {
|
|||||||
let time = arr[i].time
|
let time = arr[i].time
|
||||||
let eventId = arr[i].eventId
|
let eventId = arr[i].eventId
|
||||||
let lineName = arr[i].lineName
|
let lineName = arr[i].lineName
|
||||||
|
let equipmentName = arr[i].equipmentName
|
||||||
|
let projectName = arr[i].projectName
|
||||||
|
let engineeringName = arr[i].engineeringName
|
||||||
// let index =arr[i].eventDetailIndex;
|
// let index =arr[i].eventDetailIndex;
|
||||||
point = [xx, yy, time, eventId, lineName]
|
point = [xx, yy, time, eventId, lineName, equipmentName, projectName, engineeringName]
|
||||||
|
|
||||||
if (xx <= 0.003) {
|
if (xx <= 0.003) {
|
||||||
let line = 0
|
let line = 0
|
||||||
@@ -461,9 +453,10 @@ const handleTolerableEventClick = async (row: any) => {
|
|||||||
if (res != undefined) {
|
if (res != undefined) {
|
||||||
boxoList.value = {
|
boxoList.value = {
|
||||||
persistTime: row.value[0], //持续时间
|
persistTime: row.value[0], //持续时间
|
||||||
featureAmplitude: (row.value[1] / 100).toFixed(2), //残余电压
|
featureAmplitude: (row.value[1] / 100), //残余电压
|
||||||
startTime: row.value[2], //时间
|
startTime: row.value[2], //时间
|
||||||
lineName: row.value[4] //监测点名称
|
lineName: row.value[4], //监测点名称
|
||||||
|
engineeringName: row.value[6],
|
||||||
}
|
}
|
||||||
boxoList.value.systemType = 'YPT'
|
boxoList.value.systemType = 'YPT'
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
@@ -484,10 +477,6 @@ const handleTolerableEventClick = async (row: any) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// 不可容忍事件点击处理函数
|
|
||||||
const handleIntolerableEventClick = (params: any) => {
|
|
||||||
console.log('不可容忍事件详情:', params)
|
|
||||||
}
|
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => prop.timeKey,
|
() => prop.timeKey,
|
||||||
@@ -510,6 +499,6 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
436
src/components/cockpit/ITICurve/index.vue
Normal file
436
src/components/cockpit/ITICurve/index.vue
Normal file
@@ -0,0 +1,436 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!--ITIC曲线 -->
|
||||||
|
<TableHeader ref="TableHeaderRef" :showReset="false" :timeKeyList="prop.timeKey" @selectChange="selectChange"
|
||||||
|
datePicker v-if="fullscreen"></TableHeader>
|
||||||
|
<el-descriptions class="mt2" direction="vertical" :column="4" border>
|
||||||
|
<el-descriptions-item align="center" label="名称">{{ data.name }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item align="center" label="事件总数">{{ data.gs }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item align="center" label="可容忍">{{ data.krr }}</el-descriptions-item>
|
||||||
|
<el-descriptions-item align="center" label="不可容忍">{{ data.bkrr }}</el-descriptions-item>
|
||||||
|
</el-descriptions>
|
||||||
|
<my-echart v-loading="tableStore.table.loading" ref="chartRef" class="tall" :options="echartList" :style="{
|
||||||
|
width: prop.width,
|
||||||
|
height: `calc(${prop.height} - 80px - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}" @chart-click="handleChartClick" />
|
||||||
|
<el-dialog v-model="isWaveCharts" v-if="isWaveCharts" draggable :title="dialogTitle" append-to-body width="70%">
|
||||||
|
<waveFormAnalysis v-loading="loading" ref="waveFormAnalysisRef" @handleHideCharts="isWaveCharts = false"
|
||||||
|
:wp="wp" />
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref, onMounted, provide, reactive, watch, computed, nextTick } from 'vue'
|
||||||
|
import TableStore from '@/utils/tableStore'
|
||||||
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
||||||
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
|
import { analyseWave } from '@/api/common'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
|
||||||
|
const prop = defineProps({
|
||||||
|
w: { type: [String, Number] },
|
||||||
|
h: { type: [String, Number] },
|
||||||
|
width: { type: [String, Number] },
|
||||||
|
height: { type: [String, Number] },
|
||||||
|
timeKey: { type: Array as () => string[] },
|
||||||
|
timeValue: { type: Object },
|
||||||
|
interval: { type: Number }
|
||||||
|
})
|
||||||
|
|
||||||
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
|
const dialogTitle = ref('波形分析')
|
||||||
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
|
headerHeight.value = height
|
||||||
|
|
||||||
|
if (datePickerValue && datePickerValue.timeValue) {
|
||||||
|
// 更新时间参数
|
||||||
|
tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
|
||||||
|
tableStore.table.params.searchEndTime = datePickerValue.timeValue[1]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算是否全屏展示
|
||||||
|
const fullscreen = computed(() => {
|
||||||
|
const w = Number(prop.w)
|
||||||
|
const h = Number(prop.h)
|
||||||
|
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||||
|
// 执行相应逻辑
|
||||||
|
return true
|
||||||
|
} else {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const echartList = ref()
|
||||||
|
|
||||||
|
const chartRef = ref()
|
||||||
|
// 波形
|
||||||
|
const isWaveCharts = ref(false)
|
||||||
|
|
||||||
|
const loading = ref(false)
|
||||||
|
|
||||||
|
const wp = ref({})
|
||||||
|
|
||||||
|
const boxoList: any = ref({})
|
||||||
|
|
||||||
|
const waveFormAnalysisRef: any = ref(null)
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
name: '事件个数',
|
||||||
|
gs: 0,
|
||||||
|
krr: 0,
|
||||||
|
bkrr: 0
|
||||||
|
})
|
||||||
|
const tableStore: any = new TableStore({
|
||||||
|
url: '/cs-harmonic-boot/csevent/f47Curve',
|
||||||
|
method: 'POST',
|
||||||
|
|
||||||
|
showPage: false,
|
||||||
|
|
||||||
|
column: [],
|
||||||
|
beforeSearchFun: () => {
|
||||||
|
setTime()
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
const gongData = gongfunction(tableStore.table.data)
|
||||||
|
data.gs = tableStore.table.data.length
|
||||||
|
data.krr = gongData.pointI.length
|
||||||
|
data.bkrr = gongData.pointIun.length
|
||||||
|
echartList.value = {
|
||||||
|
title: {
|
||||||
|
text: `ITIC曲线`
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
|
||||||
|
// itemWidth: 10,
|
||||||
|
// itemHeight: 10,
|
||||||
|
itemGap: 15
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
show: true,
|
||||||
|
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)',
|
||||||
|
borderWidth: 0,
|
||||||
|
formatter: function (a: any) {
|
||||||
|
var relVal = `<strong>${a.seriesName}</strong><br/>`
|
||||||
|
|
||||||
|
relVal += "<font style='color:" + "'>发生时间:" + a.value[2] + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>特征幅值:" + Math.floor(a.value[1] * 100) / 100 + '%</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>持续时间:" + a.value[0] + 's</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>监测点名称:" + (a.value[4] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>设备名称:" + (a.value[5] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>项目名称:" + (a.value[6] || '/') + '</font><br/>'
|
||||||
|
relVal += "<font style='color:" + "'>工程名称:" + (a.value[7] || '/') + '</font>'
|
||||||
|
|
||||||
|
return relVal
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
xAxis: [
|
||||||
|
{
|
||||||
|
type: 'log',
|
||||||
|
min: 0.001,
|
||||||
|
max: 1000,
|
||||||
|
splitLine: {
|
||||||
|
show: false
|
||||||
|
},
|
||||||
|
name: 's'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
yAxis: [
|
||||||
|
{
|
||||||
|
type: 'value',
|
||||||
|
splitNumber: 10,
|
||||||
|
minInterval: 3,
|
||||||
|
name: '%'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
color: ['#FF8C00', '#00BFFF', 'green', 'red'],
|
||||||
|
options: {
|
||||||
|
dataZoom: null,
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '上限',
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
[0.001, 200],
|
||||||
|
[0.003, 140],
|
||||||
|
[0.003, 120],
|
||||||
|
[0.5, 120],
|
||||||
|
[0.5, 110],
|
||||||
|
[10, 110],
|
||||||
|
[1000, 110]
|
||||||
|
],
|
||||||
|
showSymbol: false,
|
||||||
|
tooltips: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '下限',
|
||||||
|
type: 'line',
|
||||||
|
data: [
|
||||||
|
[0.02, 0],
|
||||||
|
[0.02, 70],
|
||||||
|
[0.5, 70],
|
||||||
|
[0.5, 80],
|
||||||
|
[10, 80],
|
||||||
|
[10, 90],
|
||||||
|
[1000, 90]
|
||||||
|
],
|
||||||
|
showSymbol: false,
|
||||||
|
tooltips: {
|
||||||
|
show: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: gongData.pointI,
|
||||||
|
legendSymbol: 'circle'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '不可容忍事件',
|
||||||
|
type: 'scatter',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 8,
|
||||||
|
data: gongData.pointIun,
|
||||||
|
legendSymbol: 'rect'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const tableRef = ref()
|
||||||
|
provide('tableRef', tableRef)
|
||||||
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
|
const setTime = () => {
|
||||||
|
const time = getTime(
|
||||||
|
(TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
|
||||||
|
prop.timeKey,
|
||||||
|
fullscreen.value
|
||||||
|
? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
|
||||||
|
: prop.timeValue
|
||||||
|
)
|
||||||
|
|
||||||
|
if (Array.isArray(time)) {
|
||||||
|
tableStore.table.params.searchBeginTime = time[0]
|
||||||
|
tableStore.table.params.searchEndTime = time[1]
|
||||||
|
TableHeaderRef.value?.setInterval(time[2] - 0)
|
||||||
|
TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
|
||||||
|
} else {
|
||||||
|
console.warn('获取时间失败,time 不是一个有效数组')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function gongfunction(arr: any) {
|
||||||
|
let standI = 0
|
||||||
|
let unstandI = 0
|
||||||
|
let pointIun: any[] = []
|
||||||
|
let pointI: any[] = []
|
||||||
|
const total = arr.length
|
||||||
|
|
||||||
|
if (total > 0) {
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
const xx = arr[i].persistTime
|
||||||
|
const yy = arr[i].eventValue
|
||||||
|
const time = arr[i].time
|
||||||
|
const eventId = arr[i].eventId
|
||||||
|
const lineName = arr[i].lineName
|
||||||
|
let equipmentName = arr[i].equipmentName
|
||||||
|
let projectName = arr[i].projectName
|
||||||
|
let engineeringName = arr[i].engineeringName
|
||||||
|
// let index =arr[i].eventDetailIndex;
|
||||||
|
const point = [xx, yy, time, eventId, lineName, equipmentName, projectName, engineeringName]
|
||||||
|
|
||||||
|
if (xx <= 0.003) {
|
||||||
|
const line = 230 - 30000 * xx
|
||||||
|
if (yy > line) {
|
||||||
|
unstandI++
|
||||||
|
pointIun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } }
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
standI++
|
||||||
|
pointI.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (xx <= 0.02) {
|
||||||
|
if (yy > 120) {
|
||||||
|
unstandI++
|
||||||
|
pointIun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } }
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
standI++
|
||||||
|
pointI.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (xx <= 0.5) {
|
||||||
|
if (yy > 120 || yy < 70) {
|
||||||
|
unstandI++
|
||||||
|
pointIun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } }
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
standI++
|
||||||
|
pointI.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else if (xx <= 10) {
|
||||||
|
if (yy > 110 || yy < 80) {
|
||||||
|
unstandI++
|
||||||
|
pointIun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } }
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
standI++
|
||||||
|
pointI.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (yy > 110 || yy < 90) {
|
||||||
|
unstandI++
|
||||||
|
pointIun.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'red' } }
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
standI++
|
||||||
|
pointI.push({
|
||||||
|
value: point,
|
||||||
|
itemStyle: { normal: { color: 'green' } }
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
standI,
|
||||||
|
unstandI,
|
||||||
|
pointI,
|
||||||
|
pointIun
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
tableStore.index()
|
||||||
|
}, 100)
|
||||||
|
})
|
||||||
|
|
||||||
|
// 点击事件处理函数
|
||||||
|
const handleChartClick = (params: any) => {
|
||||||
|
if (params.seriesName === '可容忍事件') {
|
||||||
|
// 处理可容忍事件点击
|
||||||
|
dialogTitle.value = '可容忍事件波形分析'
|
||||||
|
handleTolerableEventClick(params)
|
||||||
|
} else if (params.seriesName === '不可容忍事件') {
|
||||||
|
dialogTitle.value = '不可容忍事件波形分析'
|
||||||
|
// 处理不可容忍事件点击
|
||||||
|
// ElMessage.info(`点击了不可容忍事件: 持续时间${params.value[0]}s, 幅值${params.value[1].toFixed(2)}%`)
|
||||||
|
handleTolerableEventClick(params)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 可容忍事件点击处理函数
|
||||||
|
const handleTolerableEventClick = async (row: any) => {
|
||||||
|
loading.value = true
|
||||||
|
nextTick(() => {
|
||||||
|
if (waveFormAnalysisRef.value) {
|
||||||
|
//waveFormAnalysisRef.value.setHeight(false, 360)
|
||||||
|
// waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const messageInstance = ElMessage.info(`正在加载,请稍等...`)
|
||||||
|
await analyseWave(row.value[3]) //eventId
|
||||||
|
.then(res => {
|
||||||
|
row.loading1 = false
|
||||||
|
if (res != undefined) {
|
||||||
|
boxoList.value = {
|
||||||
|
persistTime: row.value[0], //持续时间
|
||||||
|
featureAmplitude: (row.value[1] / 100), //残余电压
|
||||||
|
startTime: row.value[2], //时间
|
||||||
|
lineName: row.value[4], //监测点名称
|
||||||
|
engineeringName: row.value[6],
|
||||||
|
}
|
||||||
|
boxoList.value.systemType = 'YPT'
|
||||||
|
wp.value = res.data
|
||||||
|
}
|
||||||
|
|
||||||
|
isWaveCharts.value = true
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
messageInstance.close()
|
||||||
|
row.loading1 = false
|
||||||
|
loading.value = false
|
||||||
|
})
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
||||||
|
waveFormAnalysisRef.value && waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => prop.timeKey,
|
||||||
|
val => {
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
watch(
|
||||||
|
() => prop.timeValue,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
// 当外部时间值变化时,更新表格的时间参数
|
||||||
|
if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
|
||||||
|
tableStore.table.params.searchBeginTime = newVal[0]
|
||||||
|
tableStore.table.params.searchEndTime = newVal[1]
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
deep: true
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const addMenu = () => { }
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped></style>
|
||||||
@@ -1,20 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--暂降方向统计 -->
|
<!--暂降方向统计 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker
|
||||||
ref="TableHeaderRef"
|
:timeKeyList="prop.timeKey" v-if="fullscreen"></TableHeader>
|
||||||
:showReset="false"
|
<my-echart v-loading="tableStore.table.loading" class="tall" :options="echartList"
|
||||||
@selectChange="selectChange"
|
:style="{ width: prop.width, height: `calc(${prop.height} )` }" />
|
||||||
datePicker
|
|
||||||
:timeKeyList="prop.timeKey"
|
|
||||||
v-if="fullscreen"
|
|
||||||
></TableHeader>
|
|
||||||
<my-echart
|
|
||||||
v-loading="tableStore.table.loading"
|
|
||||||
class="tall"
|
|
||||||
:options="echartList"
|
|
||||||
:style="{ width: prop.width, height: `calc(${prop.height} )` }"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -29,7 +19,7 @@ const prop = defineProps({
|
|||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
width: { type: [String, Number] },
|
width: { type: [String, Number] },
|
||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number }
|
||||||
})
|
})
|
||||||
@@ -126,7 +116,11 @@ const tableStore: any = new TableStore({
|
|||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: '暂降方向统计',
|
text: '暂降方向统计',
|
||||||
left: 'center'
|
left: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: '15'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: total + '次',
|
text: total + '次',
|
||||||
@@ -205,6 +199,6 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -81,51 +81,70 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '指标名称',
|
title: '指标名称',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
minWidth: '90'
|
minWidth: 120
|
||||||
|
}, {
|
||||||
|
title: '越限时间',
|
||||||
|
field: 'time',
|
||||||
|
minWidth: 100,
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越限最高监测点名称',
|
||||||
|
field: 'lineName',
|
||||||
|
minWidth: 140,
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '越限程度(%)',
|
||||||
|
field: 'extent',
|
||||||
|
minWidth: 100,
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.cellValue ? Math.floor(row.cellValue * 100) / 100 : '/'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '越限最大值',
|
title: '越限最大值',
|
||||||
field: 'maxValue',
|
field: 'maxValue',
|
||||||
minWidth: '70',
|
minWidth: 100,
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
const extentValue =
|
const extentValue =
|
||||||
row.maxValue !== null && row.maxValue !== undefined && row.maxValue !== ''
|
row.maxValue !== null && row.maxValue !== undefined && row.maxValue !== ''
|
||||||
? Math.floor(row.maxValue * 100) / 100
|
? Math.floor(row.maxValue * 100) / 100
|
||||||
: '/'
|
: '/'
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${extentValue}</span>`
|
return extentValue == '/' ? '/' : `<span style='cursor: pointer;text-decoration: underline;'>${extentValue}</span>`
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '国标限值',
|
title: '国标限值',
|
||||||
field: 'internationalValue',
|
field: 'internationalValue',
|
||||||
minWidth: '60'
|
minWidth: 100, formatter: (row: any) => {
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '越限程度(%)',
|
|
||||||
field: 'extent',
|
|
||||||
minWidth: '70',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
return Math.floor(row.cellValue * 100) / 100
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '越限时间',
|
|
||||||
field: 'time',
|
|
||||||
minWidth: '60',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
return row.cellValue || '/'
|
return row.cellValue || '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '越限最高监测点',
|
title: '设备名称', field: 'devName', minWidth: 130, align: 'center', formatter: (row: any) => {
|
||||||
field: 'lineName',
|
|
||||||
minWidth: '90',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
return row.cellValue || '/'
|
return row.cellValue || '/'
|
||||||
}
|
}
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
title: '项目名称', field: 'projectName', minWidth: 130, align: 'center', formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工程名称', field: 'engineeringName', minWidth: 130, align: 'center', formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
setTime()
|
setTime()
|
||||||
@@ -135,7 +154,7 @@ const tableStore: any = new TableStore({
|
|||||||
|
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '指标越限严重度'
|
text: '指标越限程度'
|
||||||
},
|
},
|
||||||
|
|
||||||
xAxis: {
|
xAxis: {
|
||||||
@@ -154,7 +173,7 @@ const tableStore: any = new TableStore({
|
|||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
name: '越限占比',
|
name: '指标越限程度',
|
||||||
data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
|
data: tableStore.table.data.map((item: any) => Math.floor(item.extent * 100) / 100),
|
||||||
barMaxWidth: 30
|
barMaxWidth: 30
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,65 +1,58 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-control">
|
||||||
<!--治理效果报表 -->
|
<!--治理效果报表 -->
|
||||||
<TableHeader
|
<div v-show="fullscreen">
|
||||||
:showReset="false"
|
<!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
|
||||||
:timeKeyList="prop.timeKey"
|
<APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick" template @init="handleNodeClick"></APFTree>
|
||||||
ref="TableHeaderRef"
|
|
||||||
datePicker
|
|
||||||
@selectChange="selectChange"
|
|
||||||
v-if="fullscreen"
|
|
||||||
>
|
|
||||||
<template v-slot:select>
|
|
||||||
<el-form-item label="模板策略">
|
|
||||||
<el-select
|
|
||||||
filterable
|
|
||||||
v-model="tableStore.table.params.tempId"
|
|
||||||
placeholder="请选择模板策略"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in templateList"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.excelName"
|
|
||||||
:value="item.id"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="监测对象">
|
|
||||||
<el-select
|
|
||||||
filterable
|
|
||||||
v-model="tableStore.table.params.sensitiveUserId"
|
|
||||||
placeholder="请选择监测对象"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
<template v-slot:operation>
|
|
||||||
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
|
||||||
</template>
|
|
||||||
</TableHeader>
|
|
||||||
<div style="display: flex">
|
|
||||||
<div
|
|
||||||
id="luckysheet"
|
|
||||||
:style="{
|
|
||||||
width: `calc(${prop.width} )`,
|
|
||||||
height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef" datePicker
|
||||||
|
@selectChange="selectChange" v-if="fullscreen">
|
||||||
|
<template v-slot:select>
|
||||||
|
<el-form-item label="模板策略">
|
||||||
|
<el-select filterable v-model="tableStore.table.params.tempId" placeholder="请选择模板策略" clearable>
|
||||||
|
<el-option v-for="item in templateList" :key="item.id" :label="item.excelName"
|
||||||
|
:value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<!-- <el-form-item label="监测对象">
|
||||||
|
<el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象"
|
||||||
|
clearable>
|
||||||
|
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item> -->
|
||||||
|
</template>
|
||||||
|
<template v-slot:operation>
|
||||||
|
<el-button @click="downloadExcel" class="" type="primary" icon="el-icon-Download">导出</el-button>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<div id="luckysheet" :style="{
|
||||||
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
|
height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}" v-if="tableStore.table.data.length"></div>
|
||||||
|
<el-empty description="暂无报表" v-else style="flex: 1" :style="{
|
||||||
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
|
height: `calc(${prop.height} - 57px + ${fullscreen ? 0 : 56}px)`
|
||||||
|
}"></el-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
|
import { ref, onMounted, onUnmounted, provide, reactive, watch, h, computed, nextTick } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { exportExcel } from '@/views/govern/reportForms/export.js'
|
import { exportExcel } from '@/views/govern/reportForms/export.js'
|
||||||
|
import { destroyLuckysheet, renderLuckysheetReport } from '@/utils/luckysheetHelper'
|
||||||
|
import { buildExportBaseName } from '@/utils/echartMethod'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||||
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
|
import APFTree from '@/components/tree/govern/APFTree.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -67,39 +60,42 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
|
|
||||||
// 报表模板列表
|
// 报表模板列表
|
||||||
const templateList = ref()
|
const templateList = ref([])
|
||||||
|
|
||||||
// 监测对象
|
// 监测对象
|
||||||
const idList = ref()
|
const idList = ref()
|
||||||
|
|
||||||
// 监测对象
|
|
||||||
const initListByIds = () => {
|
|
||||||
getListByIds({}).then((res: any) => {
|
|
||||||
if (res.data?.length > 0) {
|
|
||||||
idList.value = res.data
|
|
||||||
|
|
||||||
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
|
const exportSubjectName = ref('')
|
||||||
tableStore.table.params.sensitiveUserId = idList.value[0].id
|
|
||||||
|
const handleNodeClick = async (data: any) => {
|
||||||
|
if (templateList.value.length == 0) {
|
||||||
|
await querySysExcel({}).then(res => {
|
||||||
|
templateList.value = res.data.filter(item => item.excelType == 4)
|
||||||
|
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
|
||||||
|
tableStore.table.params.tempId = templateList.value[0].id
|
||||||
}
|
}
|
||||||
templateListData()
|
})
|
||||||
} else {
|
}
|
||||||
querySysExcel({}).then(res => {
|
|
||||||
templateList.value = res.data.filter(item => item.excelType == 4)
|
if (data?.level == 3 || data?.level == 2) {
|
||||||
if (!tableStore.table.params.tempId && templateList.value?.length > 0) {
|
exportSubjectName.value = data.name || ''
|
||||||
tableStore.table.params.tempId = templateList.value[0].id
|
tableStore.exportName = { subject: exportSubjectName.value, feature: '治理效果报表' }
|
||||||
}
|
tableStore.table.params.sensitiveUserId = data.id
|
||||||
})
|
await tableStore.index()
|
||||||
tableStore.table.loading = false
|
} else {
|
||||||
}
|
tableStore.table.loading = false
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const templateListData = () => {
|
const templateListData = () => {
|
||||||
querySysExcel({}).then(res => {
|
querySysExcel({}).then(res => {
|
||||||
templateList.value = res.data.filter(item => item.excelType == 4)
|
templateList.value = res.data.filter(item => item.excelType == 4)
|
||||||
@@ -113,11 +109,22 @@ const templateListData = () => {
|
|||||||
}
|
}
|
||||||
// 下载表格
|
// 下载表格
|
||||||
const downloadExcel = () => {
|
const downloadExcel = () => {
|
||||||
exportExcel(luckysheet.getAllSheets(), '治理效果报表')
|
exportExcel(
|
||||||
|
luckysheet.getAllSheets(),
|
||||||
|
buildExportBaseName({
|
||||||
|
subject: exportSubjectName.value,
|
||||||
|
feature: '治理效果报表',
|
||||||
|
date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
|
||||||
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initListByIds()
|
|
||||||
|
// initListByIds()
|
||||||
|
})
|
||||||
|
onUnmounted(() => {
|
||||||
|
destroyLuckysheet()
|
||||||
})
|
})
|
||||||
|
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
@@ -159,16 +166,7 @@ const tableStore: any = new TableStore({
|
|||||||
// }
|
// }
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
luckysheet.create({
|
renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
|
||||||
container: 'luckysheet',
|
|
||||||
title: '', // 表 头名
|
|
||||||
lang: 'zh', // 中文
|
|
||||||
showtoolbar: false, // 是否显示工具栏
|
|
||||||
showinfobar: false, // 是否显示顶部信息栏
|
|
||||||
showsheetbar: true, // 是否显示底部sheet按钮
|
|
||||||
allowEdit: false, // 禁止所有编辑操作(必填)
|
|
||||||
data: tableStore.table.data
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
@@ -204,6 +202,12 @@ watch(
|
|||||||
tableStore.index()
|
tableStore.index()
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
watch(
|
||||||
|
() => prop.height,
|
||||||
|
val => {
|
||||||
|
renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
|
||||||
|
}
|
||||||
|
)
|
||||||
watch(
|
watch(
|
||||||
() => prop.timeValue,
|
() => prop.timeValue,
|
||||||
(newVal, oldVal) => {
|
(newVal, oldVal) => {
|
||||||
@@ -218,4 +222,11 @@ watch(
|
|||||||
// :deep(.el-select) {
|
// :deep(.el-select) {
|
||||||
// min-width: 80px;
|
// min-width: 80px;
|
||||||
// }
|
// }
|
||||||
|
.device-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.cn-tree) {
|
||||||
|
padding: 0 10px 0 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<!-- 总体指标占比详情谐波含有率 -->
|
<!-- 总体指标占比详情谐波含有率 -->
|
||||||
<div>
|
<div>
|
||||||
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
||||||
@@ -8,22 +8,10 @@
|
|||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="统计指标" label-width="80px">
|
<el-form-item label="统计指标" label-width="80px">
|
||||||
<el-select
|
<el-select multiple :multiple-limit="2" collapse-tags collapse-tags-tooltip
|
||||||
multiple
|
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)" filterable>
|
||||||
:multiple-limit="2"
|
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
|
||||||
collapse-tags
|
:value="item.id"></el-option>
|
||||||
collapse-tags-tooltip
|
|
||||||
v-model="searchForm.index"
|
|
||||||
placeholder="请选择统计指标"
|
|
||||||
@change="onIndexChange($event)"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in indexOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@@ -33,12 +21,8 @@
|
|||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="统计类型">
|
<el-form-item label="统计类型">
|
||||||
<el-select
|
<el-select style="min-width: 90px !important" placeholder="请选择" v-model="searchForm.valueType"
|
||||||
style="min-width: 90px !important"
|
filterable>
|
||||||
placeholder="请选择"
|
|
||||||
v-model="searchForm.valueType"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option value="max" label="最大值"></el-option>
|
<el-option value="max" label="最大值"></el-option>
|
||||||
<el-option value="min" label="最小值"></el-option>
|
<el-option value="min" label="最小值"></el-option>
|
||||||
<el-option value="avg" label="平均值"></el-option>
|
<el-option value="avg" label="平均值"></el-option>
|
||||||
@@ -46,38 +30,21 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<div
|
<div class="history_count" v-for="(item, index) in countData" :key="index"
|
||||||
class="history_count"
|
v-show="item.countOptions.length != 0">
|
||||||
v-for="(item, index) in countData"
|
|
||||||
:key="index"
|
|
||||||
v-show="item.countOptions.length != 0"
|
|
||||||
>
|
|
||||||
<span class="mr12">
|
<span class="mr12">
|
||||||
{{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
|
{{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
|
||||||
</span>
|
</span>
|
||||||
<el-select
|
<el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
|
||||||
v-model="item.count"
|
style="width: 100px" class="mr20" filterable>
|
||||||
@change="onCountChange($event, index)"
|
<el-option v-for="vv in item.countOptions" :key="vv"
|
||||||
placeholder="请选择谐波次数"
|
:label="item.name.includes('间谐波') ? vv - 0.5 : vv" :value="vv"></el-option>
|
||||||
style="width: 100px"
|
|
||||||
class="mr20"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="vv in item.countOptions"
|
|
||||||
:key="vv"
|
|
||||||
:label="item.name.includes('间谐波') ? vv - 0.5 : vv"
|
|
||||||
:value="vv"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||||
<el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
|
|
||||||
缺失数据
|
|
||||||
</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,7 +61,7 @@ import { ref, onMounted, watch } from 'vue'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||||
import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
|
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
@@ -109,6 +76,7 @@ const props = defineProps({
|
|||||||
type: Array
|
type: Array
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const dialogTitle = ref('趋势图')
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
// console.log("🚀 ~ props:", props.TrendList)
|
// console.log("🚀 ~ props:", props.TrendList)
|
||||||
@@ -165,14 +133,14 @@ const initCode = (field: string, title: string) => {
|
|||||||
let codeKey = field.includes('flickerOvertime')
|
let codeKey = field.includes('flickerOvertime')
|
||||||
? '闪变'
|
? '闪变'
|
||||||
: field.includes('uharm')
|
: field.includes('uharm')
|
||||||
? '谐波电压'
|
? '谐波电压'
|
||||||
: field.includes('iharm')
|
: field.includes('iharm')
|
||||||
? '谐波电流'
|
? '谐波电流'
|
||||||
: field.includes('voltageDevOvertime')
|
: field.includes('voltageDevOvertime')
|
||||||
? '电压偏差'
|
? '电压偏差'
|
||||||
: field.includes('ubalanceOvertime')
|
: field.includes('ubalanceOvertime')
|
||||||
? '不平衡'
|
? '不平衡'
|
||||||
: ''
|
: ''
|
||||||
|
|
||||||
// const titleMap: Record<string, number> = {
|
// const titleMap: Record<string, number> = {
|
||||||
// flickerOvertime: 0,
|
// flickerOvertime: 0,
|
||||||
@@ -375,14 +343,18 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
echartsData.value = {
|
echartsData.value = {
|
||||||
|
exportFileName: {
|
||||||
|
subject: trendRequestData.value?.lineName,
|
||||||
|
feature: '趋势图',
|
||||||
|
date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
itemWidth: 20,
|
itemWidth: 20,
|
||||||
itemHeight: 20,
|
itemHeight: 20,
|
||||||
itemStyle: { opacity: 0 }, //去圆点
|
itemStyle: { opacity: 0 }, //去圆点
|
||||||
type: 'scroll', // 开启滚动分页
|
type: 'scroll', // 开启滚动分页
|
||||||
// orient: 'vertical', // 垂直排列
|
// orient: 'vertical', // 垂直排列
|
||||||
top: 5,
|
|
||||||
right: 70
|
|
||||||
// width: 550,
|
// width: 550,
|
||||||
// height: 50
|
// height: 50
|
||||||
},
|
},
|
||||||
@@ -442,26 +414,18 @@ const setEchart = () => {
|
|||||||
myTool1: {
|
myTool1: {
|
||||||
show: true,
|
show: true,
|
||||||
title: '下载csv',
|
title: '下载csv',
|
||||||
icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
|
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||||||
onclick: e => {
|
onclick: () => {
|
||||||
// console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
|
exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
|
||||||
|
}
|
||||||
let list = echartsData.value.options.series?.map((item: any) => item.data)
|
},
|
||||||
let dataList = list[0]?.map((item: any, index: any) => {
|
myTool2: {
|
||||||
let value = [item[0], item[1]]
|
show: true,
|
||||||
list.forEach((item1: any, index1: any) => {
|
title: timeControl.value ? '关闭缺失数据' : '缺失数据',
|
||||||
if (index1 > 0) {
|
icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
|
||||||
value.push(item1 && item1[index] ? item1[index][1] : null)
|
iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
|
||||||
}
|
onclick: () => {
|
||||||
})
|
setTimeControl()
|
||||||
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
exportCSV(
|
|
||||||
echartsData.value.options.series.map((item: any) => item.name),
|
|
||||||
dataList,
|
|
||||||
'监测点指标趋势.csv'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -506,10 +470,10 @@ const setEchart = () => {
|
|||||||
return item.anotherName == '电压负序分量'
|
return item.anotherName == '电压负序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName == '电压正序分量'
|
: item.anotherName == '电压正序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName == '电压零序分量'
|
: item.anotherName == '电压零序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName
|
: item.anotherName
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
]
|
]
|
||||||
@@ -543,10 +507,10 @@ const setEchart = () => {
|
|||||||
(kk[0].anotherName == '电压负序分量'
|
(kk[0].anotherName == '电压负序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName == '电压正序分量'
|
: kk[0].anotherName == '电压正序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName == '电压零序分量'
|
: kk[0].anotherName == '电压零序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName)
|
: kk[0].anotherName)
|
||||||
)
|
)
|
||||||
|
|
||||||
let seriesList: any = []
|
let seriesList: any = []
|
||||||
@@ -644,7 +608,7 @@ const onIndexChange = (val: any) => {
|
|||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => searchForm.value.index,
|
() => searchForm.value.index,
|
||||||
(val: any, oldval: any) => {},
|
(val: any, oldval: any) => { },
|
||||||
{
|
{
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true
|
immediate: true
|
||||||
@@ -652,6 +616,7 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
const openDialog = async (row: any, field: any, title: any) => {
|
const openDialog = async (row: any, field: any, title: any) => {
|
||||||
|
dialogTitle.value = row?.lineName + '_趋势图'
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
trendRequestData.value = row
|
trendRequestData.value = row
|
||||||
|
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测点">
|
<!-- <el-form-item label="监测点">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="tableStore.table.params.lineId"
|
v-model="tableStore.table.params.lineId"
|
||||||
placeholder="请选择监测点"
|
placeholder="请选择监测点"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
:value="item.lineId"
|
:value="item.lineId"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
||||||
@@ -38,7 +38,7 @@ import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
|||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
const harmonicRatioRef: any = ref(null)
|
const harmonicRatioRef: any = ref(null)
|
||||||
|
const title = ref('指标越限详情')
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const height = mainHeight(0, 2).height as any
|
const height = mainHeight(0, 2).height as any
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '日期',
|
title: '日期',
|
||||||
field: 'time',
|
field: 'time',
|
||||||
width: '150',
|
width: '120',
|
||||||
sortable: true
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
width: '150'
|
width: '120'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '长时闪变越限(%)',
|
title: '长时闪变越限(%)',
|
||||||
@@ -143,6 +143,7 @@ tableStore.table.params.sortBy = ''
|
|||||||
tableStore.table.params.orderBy = ''
|
tableStore.table.params.orderBy = ''
|
||||||
const open = async (row: any,searchBeginTime:any,searchEndTime:any,interval:any,list:any) => {
|
const open = async (row: any,searchBeginTime:any,searchEndTime:any,interval:any,list:any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
|
title.value = row.lineName + '_指标越限详情'
|
||||||
options.value = list
|
options.value = list
|
||||||
// initCSlineList()
|
// initCSlineList()
|
||||||
tableStore.table.params.lineId = row.lineId
|
tableStore.table.params.lineId = row.lineId
|
||||||
@@ -161,7 +162,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,interval:any,
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name' && column.field != 'time') {
|
if (column.field != 'lineName' &&column.field != 'name' && column.field != 'time') {
|
||||||
dialogFlag.value = true
|
dialogFlag.value = true
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
|||||||
@@ -1,28 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--电网侧指标越限统计 -->
|
<!--电网侧指标越限统计 -->
|
||||||
<TableHeader
|
<TableHeader :showReset="false" ref="TableHeaderRef" @selectChange="selectChange" datePicker
|
||||||
:showReset="false"
|
:timeKeyList="prop.timeKey" v-if="fullscreen"></TableHeader>
|
||||||
ref="TableHeaderRef"
|
<my-echart class="tall" :options="echartList" :style="{
|
||||||
@selectChange="selectChange"
|
width: prop.width,
|
||||||
datePicker
|
height: `calc(${prop.height} / 2 )`
|
||||||
:timeKeyList="prop.timeKey"
|
}" />
|
||||||
v-if="fullscreen"
|
<Table ref="tableRef" @cell-click="cellClickEvent"
|
||||||
></TableHeader>
|
:height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`" isGroup></Table>
|
||||||
<my-echart
|
|
||||||
class="tall"
|
|
||||||
:options="echartList"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} / 2 )`
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<Table
|
|
||||||
ref="tableRef"
|
|
||||||
@cell-click="cellClickEvent"
|
|
||||||
:height="`calc(${prop.height} / 2 - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`"
|
|
||||||
isGroup
|
|
||||||
></Table>
|
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||||
</div>
|
</div>
|
||||||
@@ -141,17 +127,20 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '监测点名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
minWidth: '90'
|
minWidth: 150
|
||||||
},
|
},
|
||||||
|
{ title: '设备名称', field: 'devName', minWidth: 150, align: 'center', },
|
||||||
|
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
|
||||||
{
|
{
|
||||||
title: '越限占比(%)',
|
title: '越限占比(%)',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: '长时闪变',
|
title: '长时闪变',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
minWidth: '70',
|
minWidth: '80',
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||||||
@@ -218,7 +207,7 @@ const cellClickEvent = ({ row, column }: any) => {
|
|||||||
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||||||
tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
||||||
tableStore.table.params.interval || prop.interval,
|
tableStore.table.params.interval || prop.interval,
|
||||||
tableStore.table.data
|
tableStore.table.data
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -261,6 +250,6 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -1,47 +1,32 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-control">
|
||||||
<!--指标越限时间分布
|
<!--指标越限时间分布
|
||||||
-->
|
-->
|
||||||
<TableHeader
|
<div v-show="fullscreen">
|
||||||
:showReset="false"
|
<PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
||||||
:timeKeyList="prop.timeKey"
|
</div>
|
||||||
ref="TableHeaderRef"
|
<div>
|
||||||
@selectChange="selectChange"
|
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
|
||||||
datePicker
|
@selectChange="selectChange" datePicker v-if="fullscreen">
|
||||||
v-if="fullscreen"
|
<!-- <template v-slot:select>
|
||||||
>
|
<el-form-item label="监测点">
|
||||||
<template v-slot:select>
|
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
||||||
<el-form-item label="监测点">
|
<el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
|
||||||
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
:value="item.lineId" />
|
||||||
<el-option
|
</el-select>
|
||||||
v-for="item in lineList"
|
</el-form-item>
|
||||||
:key="item.lineId"
|
</template> -->
|
||||||
:label="item.name"
|
</TableHeader>
|
||||||
:value="item.lineId"
|
<div v-loading="tableStore.table.loading">
|
||||||
/>
|
<my-echart class="tall" v-if="lineShow" :options="echartList1" :style="{
|
||||||
</el-select>
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</TableHeader>
|
|
||||||
<div v-loading="tableStore.table.loading">
|
|
||||||
<my-echart
|
|
||||||
class="tall"
|
|
||||||
v-if="lineShow"
|
|
||||||
:options="echartList1"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
<el-empty v-else description="暂无监测点" :style="{
|
||||||
<el-empty
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
v-else
|
|
||||||
description="暂无监测点"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
<!-- <my-echart
|
||||||
<!-- <my-echart
|
|
||||||
class="mt10"
|
class="mt10"
|
||||||
:options="echartList1"
|
:options="echartList1"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -49,6 +34,7 @@
|
|||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
}"
|
}"
|
||||||
/> -->
|
/> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -59,7 +45,7 @@ import TableHeader from '@/components/table/header/index.vue'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
import PointTree from '@/components/tree/govern/pointTree.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -67,7 +53,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
||||||
@@ -106,17 +93,28 @@ const echartList1 = ref()
|
|||||||
|
|
||||||
const probabilityData = ref()
|
const probabilityData = ref()
|
||||||
|
|
||||||
const initLineList = async () => {
|
// const initLineList = async () => {
|
||||||
cslineList({}).then(res => {
|
// cslineList({}).then(res => {
|
||||||
if (res.data.length == 0) {
|
// if (res.data.length == 0) {
|
||||||
lineShow.value = false
|
// lineShow.value = false
|
||||||
return (tableStore.table.loading = false)
|
// return (tableStore.table.loading = false)
|
||||||
}
|
// }
|
||||||
lineShow.value = true
|
// lineShow.value = true
|
||||||
lineList.value = res.data
|
// lineList.value = res.data
|
||||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
// tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
// tableStore.index()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
const nodeClick = (e: any) => {
|
||||||
|
if (e == undefined) {
|
||||||
|
}
|
||||||
|
if (e.level == 3) {
|
||||||
|
tableStore.table.params.lineId = e.id
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
}
|
||||||
|
}
|
||||||
|
const pointTypeChange = (val: any, obj: any) => {
|
||||||
|
nodeClick(obj)
|
||||||
}
|
}
|
||||||
|
|
||||||
// 越限程度概率分布
|
// 越限程度概率分布
|
||||||
@@ -438,7 +436,7 @@ const tableStore: any = new TableStore({
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initLineList()
|
// initLineList()
|
||||||
})
|
})
|
||||||
|
|
||||||
const setTime = () => {
|
const setTime = () => {
|
||||||
@@ -475,6 +473,14 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.device-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.cn-tree) {
|
||||||
|
padding: 0 10px 0 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -101,7 +101,7 @@ const tableStore: any = new TableStore({
|
|||||||
setTime()
|
setTime()
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
value.value = tableStore.table.params.searchBeginTime
|
value.value = dayjs(tableStore.table.params.searchBeginTime).toDate()
|
||||||
if (tableStore.table.data && tableStore.table.data.length > 0) {
|
if (tableStore.table.data && tableStore.table.data.length > 0) {
|
||||||
list.value = tableStore.table.data.map((item: any) => {
|
list.value = tableStore.table.data.map((item: any) => {
|
||||||
// 将 items 数组转换为带换行的文本
|
// 将 items 数组转换为带换行的文本
|
||||||
|
|||||||
@@ -1,46 +1,31 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-control">
|
||||||
<!--指标越限概率分布 -->
|
<!--指标越限概率分布 -->
|
||||||
<TableHeader
|
<div v-show="fullscreen">
|
||||||
:showReset="false"
|
<PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
||||||
:timeKeyList="prop.timeKey"
|
</div>
|
||||||
ref="TableHeaderRef"
|
<div>
|
||||||
@selectChange="selectChange"
|
<TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
|
||||||
datePicker
|
@selectChange="selectChange" datePicker v-if="fullscreen">
|
||||||
v-if="fullscreen"
|
<!-- <template v-slot:select>
|
||||||
>
|
<el-form-item label="监测点">
|
||||||
<template v-slot:select>
|
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
||||||
<el-form-item label="监测点">
|
<el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
|
||||||
<el-select size="small" filterable v-model="tableStore.table.params.lineId">
|
:value="item.lineId" />
|
||||||
<el-option
|
</el-select>
|
||||||
v-for="item in lineList"
|
</el-form-item>
|
||||||
:key="item.lineId"
|
</template> -->
|
||||||
:label="item.name"
|
</TableHeader>
|
||||||
:value="item.lineId"
|
<div v-loading="tableStore.table.loading">
|
||||||
/>
|
<my-echart v-if="lineShow" class="tall" :options="echartList" :style="{
|
||||||
</el-select>
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
</el-form-item>
|
|
||||||
</template>
|
|
||||||
</TableHeader>
|
|
||||||
<div v-loading="tableStore.table.loading">
|
|
||||||
<my-echart
|
|
||||||
v-if="lineShow"
|
|
||||||
class="tall"
|
|
||||||
:options="echartList"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
<el-empty v-else description="暂无监测点" :style="{
|
||||||
<el-empty
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
v-else
|
|
||||||
description="暂无监测点"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
<!-- <my-echart
|
||||||
<!-- <my-echart
|
|
||||||
class="mt10"
|
class="mt10"
|
||||||
:options="echartList1"
|
:options="echartList1"
|
||||||
:style="{
|
:style="{
|
||||||
@@ -48,7 +33,9 @@
|
|||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
}"
|
}"
|
||||||
/> -->
|
/> -->
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -58,7 +45,7 @@ import TableHeader from '@/components/table/header/index.vue'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
import PointTree from '@/components/tree/govern/pointTree.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -66,7 +53,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
const lineShow = ref(true)
|
const lineShow = ref(true)
|
||||||
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
// const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
|
||||||
@@ -105,18 +93,31 @@ const echartList1 = ref()
|
|||||||
|
|
||||||
const probabilityData = ref()
|
const probabilityData = ref()
|
||||||
|
|
||||||
const initLineList = async () => {
|
// const initLineList = async () => {
|
||||||
cslineList({}).then(res => {
|
// cslineList({}).then(res => {
|
||||||
if (res.data.length == 0) {
|
// if (res.data.length == 0) {
|
||||||
lineShow.value = false
|
// lineShow.value = false
|
||||||
return (tableStore.table.loading = false)
|
// return (tableStore.table.loading = false)
|
||||||
}
|
// }
|
||||||
lineShow.value = true
|
// lineShow.value = true
|
||||||
lineList.value = res.data
|
// lineList.value = res.data
|
||||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
// tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
// tableStore.index()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
|
||||||
|
const nodeClick = (e: any) => {
|
||||||
|
if (e == undefined) {
|
||||||
|
}
|
||||||
|
if (e.level == 3) {
|
||||||
|
tableStore.table.params.lineId = e.id
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
|
const pointTypeChange = (val: any, obj: any) => {
|
||||||
|
nodeClick(obj)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
// 越限程度概率分布
|
// 越限程度概率分布
|
||||||
const initProbabilityData = () => {
|
const initProbabilityData = () => {
|
||||||
@@ -437,7 +438,7 @@ const tableStore: any = new TableStore({
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initLineList()
|
// initLineList()
|
||||||
})
|
})
|
||||||
|
|
||||||
const setTime = () => {
|
const setTime = () => {
|
||||||
@@ -474,6 +475,13 @@ watch(
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped>
|
||||||
|
.device-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
:deep(.cn-tree) {
|
||||||
|
padding: 0 10px 0 0 !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog draggable title="趋势图" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="dialogTitle" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<!-- 总体指标占比详情谐波含有率 -->
|
<!-- 总体指标占比详情谐波含有率 -->
|
||||||
<div>
|
<div>
|
||||||
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
<TableHeader ref="tableHeaderRef" :showSearch="false" @selectChange="selectChange">
|
||||||
@@ -8,22 +8,10 @@
|
|||||||
<DatePicker ref="datePickerRef"></DatePicker>
|
<DatePicker ref="datePickerRef"></DatePicker>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="统计指标" label-width="80px">
|
<el-form-item label="统计指标" label-width="80px">
|
||||||
<el-select
|
<el-select multiple :multiple-limit="2" collapse-tags collapse-tags-tooltip
|
||||||
multiple
|
v-model="searchForm.index" placeholder="请选择统计指标" @change="onIndexChange($event)" filterable>
|
||||||
:multiple-limit="2"
|
<el-option v-for="item in indexOptions" :key="item.id" :label="item.name"
|
||||||
collapse-tags
|
:value="item.id"></el-option>
|
||||||
collapse-tags-tooltip
|
|
||||||
v-model="searchForm.index"
|
|
||||||
placeholder="请选择统计指标"
|
|
||||||
@change="onIndexChange($event)"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in indexOptions"
|
|
||||||
:key="item.id"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.id"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
@@ -33,12 +21,8 @@
|
|||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="统计类型">
|
<el-form-item label="统计类型">
|
||||||
<el-select
|
<el-select style="min-width: 120px !important" placeholder="请选择" v-model="searchForm.valueType"
|
||||||
style="min-width: 120px !important"
|
filterable>
|
||||||
placeholder="请选择"
|
|
||||||
v-model="searchForm.valueType"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option value="max" label="最大值"></el-option>
|
<el-option value="max" label="最大值"></el-option>
|
||||||
<el-option value="min" label="最小值"></el-option>
|
<el-option value="min" label="最小值"></el-option>
|
||||||
<el-option value="avg" label="平均值"></el-option>
|
<el-option value="avg" label="平均值"></el-option>
|
||||||
@@ -46,38 +30,21 @@
|
|||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item>
|
<el-form-item>
|
||||||
<div
|
<div class="history_count" v-for="(item, index) in countData" :key="index"
|
||||||
class="history_count"
|
v-show="item.countOptions.length != 0">
|
||||||
v-for="(item, index) in countData"
|
|
||||||
:key="index"
|
|
||||||
v-show="item.countOptions.length != 0"
|
|
||||||
>
|
|
||||||
<span class="mr12">
|
<span class="mr12">
|
||||||
{{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
|
{{ item.name.includes('次数') ? item.name : item.name + '谐波次数' }}
|
||||||
</span>
|
</span>
|
||||||
<el-select
|
<el-select v-model="item.count" @change="onCountChange($event, index)" placeholder="请选择谐波次数"
|
||||||
v-model="item.count"
|
style="width: 100px" class="mr20" filterable>
|
||||||
@change="onCountChange($event, index)"
|
<el-option v-for="vv in item.countOptions" :key="vv"
|
||||||
placeholder="请选择谐波次数"
|
:label="item.name.includes('间谐波') ? vv - 0.5 : vv" :value="vv"></el-option>
|
||||||
style="width: 100px"
|
|
||||||
class="mr20"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="vv in item.countOptions"
|
|
||||||
:key="vv"
|
|
||||||
:label="item.name.includes('间谐波') ? vv - 0.5 : vv"
|
|
||||||
:value="vv"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||||
<el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
|
|
||||||
缺失数据
|
|
||||||
</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,7 +61,7 @@ import { ref, onMounted, watch } from 'vue'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||||
import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
|
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
@@ -109,6 +76,7 @@ const props = defineProps({
|
|||||||
type: Array
|
type: Array
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
const dialogTitle = ref('趋势图')
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
// console.log("🚀 ~ props:", props.TrendList)
|
// console.log("🚀 ~ props:", props.TrendList)
|
||||||
@@ -181,14 +149,14 @@ const initCode = (field: string, title: string) => {
|
|||||||
let codeKey = field.includes('flickerOvertime')
|
let codeKey = field.includes('flickerOvertime')
|
||||||
? '闪变'
|
? '闪变'
|
||||||
: field.includes('uharm')
|
: field.includes('uharm')
|
||||||
? '谐波电压'
|
? '谐波电压'
|
||||||
: field.includes('iharm')
|
: field.includes('iharm')
|
||||||
? '谐波电流'
|
? '谐波电流'
|
||||||
: field.includes('voltageDevOvertime')
|
: field.includes('uaberrance')
|
||||||
? '电压偏差'
|
? '电压偏差'
|
||||||
: field.includes('ubalanceOvertime')
|
: field.includes('ubalanceOvertime')
|
||||||
? '不平衡'
|
? '不平衡'
|
||||||
: ''
|
: ''
|
||||||
let defaultIndex = indexOptions.value.findIndex((item: any) => item.name.includes(codeKey)) || 0
|
let defaultIndex = indexOptions.value.findIndex((item: any) => item.name.includes(codeKey)) || 0
|
||||||
|
|
||||||
searchForm.value.index[0] = indexOptions.value[defaultIndex].id
|
searchForm.value.index[0] = indexOptions.value[defaultIndex].id
|
||||||
@@ -374,14 +342,18 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
echartsData.value = {
|
echartsData.value = {
|
||||||
|
exportFileName: {
|
||||||
|
subject: trendRequestData.value?.lineName,
|
||||||
|
feature: '趋势图',
|
||||||
|
date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
itemWidth: 20,
|
itemWidth: 20,
|
||||||
itemHeight: 20,
|
itemHeight: 20,
|
||||||
itemStyle: { opacity: 0 }, //去圆点
|
itemStyle: { opacity: 0 }, //去圆点
|
||||||
type: 'scroll', // 开启滚动分页
|
type: 'scroll', // 开启滚动分页
|
||||||
// orient: 'vertical', // 垂直排列
|
// orient: 'vertical', // 垂直排列
|
||||||
top: 5,
|
|
||||||
right: 70
|
|
||||||
// width: 550,
|
// width: 550,
|
||||||
// height: 50
|
// height: 50
|
||||||
},
|
},
|
||||||
@@ -441,26 +413,18 @@ const setEchart = () => {
|
|||||||
myTool1: {
|
myTool1: {
|
||||||
show: true,
|
show: true,
|
||||||
title: '下载csv',
|
title: '下载csv',
|
||||||
icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
|
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||||||
onclick: e => {
|
onclick: () => {
|
||||||
// console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
|
exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
|
||||||
|
}
|
||||||
let list = echartsData.value.options.series?.map((item: any) => item.data)
|
},
|
||||||
let dataList = list[0]?.map((item: any, index: any) => {
|
myTool2: {
|
||||||
let value = [item[0], item[1]]
|
show: true,
|
||||||
list.forEach((item1: any, index1: any) => {
|
title: timeControl.value ? '关闭缺失数据' : '缺失数据',
|
||||||
if (index1 > 0) {
|
icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
|
||||||
value.push(item1 && item1[index] ? item1[index][1] : null)
|
iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
|
||||||
}
|
onclick: () => {
|
||||||
})
|
setTimeControl()
|
||||||
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
exportCSV(
|
|
||||||
echartsData.value.options.series.map((item: any) => item.name),
|
|
||||||
dataList,
|
|
||||||
'历史趋势.csv'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -505,10 +469,10 @@ const setEchart = () => {
|
|||||||
return item.anotherName == '电压负序分量'
|
return item.anotherName == '电压负序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName == '电压正序分量'
|
: item.anotherName == '电压正序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName == '电压零序分量'
|
: item.anotherName == '电压零序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: item.anotherName
|
: item.anotherName
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
]
|
]
|
||||||
@@ -542,10 +506,10 @@ const setEchart = () => {
|
|||||||
(kk[0].anotherName == '电压负序分量'
|
(kk[0].anotherName == '电压负序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName == '电压正序分量'
|
: kk[0].anotherName == '电压正序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName == '电压零序分量'
|
: kk[0].anotherName == '电压零序分量'
|
||||||
? '电压不平衡'
|
? '电压不平衡'
|
||||||
: kk[0].anotherName)
|
: kk[0].anotherName)
|
||||||
)
|
)
|
||||||
|
|
||||||
let seriesList: any = []
|
let seriesList: any = []
|
||||||
@@ -643,7 +607,7 @@ const onIndexChange = (val: any) => {
|
|||||||
}
|
}
|
||||||
watch(
|
watch(
|
||||||
() => searchForm.value.index,
|
() => searchForm.value.index,
|
||||||
(val: any, oldval: any) => {},
|
(val: any, oldval: any) => { },
|
||||||
{
|
{
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true
|
immediate: true
|
||||||
@@ -652,6 +616,8 @@ watch(
|
|||||||
|
|
||||||
const openDialog = async (row: any, field: any, title: any) => {
|
const openDialog = async (row: any, field: any, title: any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
|
|
||||||
|
dialogTitle.value = row?.lineName + '_趋势图'
|
||||||
trendRequestData.value = row
|
trendRequestData.value = row
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
|||||||
@@ -1,9 +1,9 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
||||||
<template v-slot:select>
|
<!-- <template v-slot:select>
|
||||||
<el-form-item label="监测点">
|
<el-form-item label="监测点">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="tableStore.table.params.lineId"
|
v-model="tableStore.table.params.lineId"
|
||||||
@@ -19,7 +19,7 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template> -->
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -28,7 +28,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, provide,nextTick } from 'vue'
|
import { ref, provide, nextTick } from 'vue'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
@@ -40,7 +40,7 @@ const dialogVisible: any = ref(false)
|
|||||||
const harmonicRatioRef: any = ref(null)
|
const harmonicRatioRef: any = ref(null)
|
||||||
|
|
||||||
const dialogFlag = ref(false)
|
const dialogFlag = ref(false)
|
||||||
|
const title = ref('指标越限详情')
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const height = mainHeight(0, 2).height as any
|
const height = mainHeight(0, 2).height as any
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
@@ -77,18 +77,18 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '日期',
|
title: '日期',
|
||||||
field: 'time',
|
field: 'time',
|
||||||
width: '150',
|
width: '120',
|
||||||
sortable: true
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '监测点名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
width: '150'
|
width: '150'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '越限(分钟)',
|
title: '长时闪变越限(分钟)',
|
||||||
field: 'flickerOvertime',
|
field: 'flickerOvertime',
|
||||||
width: '90',
|
width: '100',
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flickerOvertime}</span>`
|
||||||
@@ -130,7 +130,7 @@ const tableStore: any = new TableStore({
|
|||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
},
|
},
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
}
|
}
|
||||||
@@ -140,15 +140,16 @@ const tableStore: any = new TableStore({
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
tableStore.table.params.sortBy = ''
|
tableStore.table.params.sortBy = ''
|
||||||
tableStore.table.params.orderBy = ''
|
tableStore.table.params.orderBy = ''
|
||||||
const open = async (row: any,searchBeginTime:any,searchEndTime:any,data:any=[]) => {
|
const open = async (row: any, searchBeginTime: any, searchEndTime: any, data: any = []) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
// initCSlineList()
|
// initCSlineList()
|
||||||
options.value = data
|
options.value = data
|
||||||
|
title.value = row.lineName + '_指标越限详情'
|
||||||
tableStore.table.params.lineId = row.lineId
|
tableStore.table.params.lineId = row.lineId
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
|
tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
|
||||||
tableStore.table.params.searchBeginTime =searchBeginTime
|
tableStore.table.params.searchBeginTime = searchBeginTime
|
||||||
tableStore.table.params.searchEndTime = searchEndTime
|
tableStore.table.params.searchEndTime = searchEndTime
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
@@ -157,11 +158,11 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,data:any=[])
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name' && column.field != 'time') {
|
if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
|
||||||
dialogFlag.value = true
|
dialogFlag.value = true
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
harmonicRatioRef.value.openDialog(row,column.field,column.title.replace(/次/g, ""))
|
harmonicRatioRef.value.openDialog(row, column.field, column.title.replace(/次/g, ""))
|
||||||
})
|
})
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,31 +1,23 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--主要监测点列表 -->
|
<!--主要监测点列表 -->
|
||||||
<TableHeader
|
<TableHeader :showReset="false" showExport :timeKeyList="prop.timeKey" @selectChange="selectChange"
|
||||||
:showReset="false"
|
v-if="fullscreen" ref="TableHeaderRef">
|
||||||
:timeKeyList="prop.timeKey"
|
|
||||||
@selectChange="selectChange"
|
|
||||||
v-if="fullscreen"
|
|
||||||
|
|
||||||
ref="TableHeaderRef"
|
|
||||||
>
|
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="关键字筛选">
|
<el-form-item label="关键字筛选">
|
||||||
<el-input v-model="tableStore.table.params.keywords" clearable placeholder="请输入监测点名称" />
|
<el-input maxlength="32" show-word-limit v-model="tableStore.table.params.keywords" clearable
|
||||||
|
placeholder="请输入监测点名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table
|
<Table ref="tableRef" @cell-click="cellClickEvent"
|
||||||
ref="tableRef"
|
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"></Table>
|
||||||
@cell-click="cellClickEvent"
|
|
||||||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
|
||||||
></Table>
|
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
|
import { ref, onMounted, provide, watch, computed } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
@@ -41,7 +33,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
const OverLimitDetailsRef = ref()
|
const OverLimitDetailsRef = ref()
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
@@ -90,17 +83,17 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '监测点名称',
|
title: '监测点名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
minWidth: '90',
|
minWidth: 150,
|
||||||
render: 'customTemplate',
|
|
||||||
customTemplate: (row: any) => {
|
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
{ title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
|
||||||
{
|
{
|
||||||
title: '监测对象类型',
|
title: '监测对象类型',
|
||||||
field: 'objType',
|
field: 'objType',
|
||||||
minWidth: '90',
|
minWidth: '100',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue || '/'
|
return row.cellValue || '/'
|
||||||
}
|
}
|
||||||
@@ -114,7 +107,11 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{ title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true }
|
{
|
||||||
|
title: '主要存在的电能质量问题', field: 'problems', minWidth: '250', render: 'customTemplate', customTemplate: (row: any) => {
|
||||||
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.problems}</span>`
|
||||||
|
}
|
||||||
|
}
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
setTime()
|
setTime()
|
||||||
@@ -131,12 +128,12 @@ provide('tableStore', tableStore)
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field == 'lineName') {
|
if (column.field == 'problems') {
|
||||||
|
|
||||||
let time = getTimeOfTheMonth('3');
|
let time = getTimeOfTheMonth('3');
|
||||||
OverLimitDetailsRef.value.open(
|
OverLimitDetailsRef.value.open(
|
||||||
row,
|
row,
|
||||||
time[0],
|
time[0],
|
||||||
time[1],
|
time[1],
|
||||||
tableStore.table.data
|
tableStore.table.data
|
||||||
)
|
)
|
||||||
@@ -176,7 +173,13 @@ watch(
|
|||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
watch(
|
||||||
|
() => prop.flag,
|
||||||
|
val => {
|
||||||
|
tableStore.showPage = fullscreen.value ? true : false
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const addMenu = () => {}
|
const addMenu = () => { }
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -148,7 +148,6 @@ const open = async (row: any) => {
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
console.log(row, '1111')
|
|
||||||
if (column.field != 'name' && column.field != 'time') {
|
if (column.field != 'name' && column.field != 'time') {
|
||||||
harmonicRatioRef.value.openDialog(row)
|
harmonicRatioRef.value.openDialog(row)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,95 +1,64 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-control">
|
||||||
<!--指标拟合图 -->
|
<!--指标拟合图 -->
|
||||||
<TableHeader
|
<div v-show="fullscreen">
|
||||||
datePicker
|
<PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
|
||||||
@selectChange="selectChange"
|
</div>
|
||||||
v-if="fullscreen"
|
<div>
|
||||||
ref="TableHeaderRef"
|
<TableHeader datePicker @selectChange="selectChange" v-if="fullscreen" ref="TableHeaderRef"
|
||||||
:timeKeyList="prop.timeKey"
|
:timeKeyList="prop.timeKey">
|
||||||
>
|
<template v-slot:select>
|
||||||
<template v-slot:select>
|
<!-- <el-form-item label="监测点">
|
||||||
<el-form-item label="监测点">
|
<el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
|
||||||
<el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
|
<el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
|
||||||
<el-option
|
:value="item.lineId" />
|
||||||
v-for="item in lineList"
|
|
||||||
:key="item.lineId"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.lineId"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="用户功率">
|
|
||||||
<el-select
|
|
||||||
filterable
|
|
||||||
v-model="tableStore.table.params.power"
|
|
||||||
placeholder="请选择用户功率"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="统计类型">
|
|
||||||
<el-select
|
|
||||||
style="min-width: 120px !important"
|
|
||||||
placeholder="请选择"
|
|
||||||
v-model="tableStore.table.params.valueType"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option value="max" label="最大值"></el-option>
|
|
||||||
<el-option value="min" label="最小值"></el-option>
|
|
||||||
<el-option value="avg" label="平均值"></el-option>
|
|
||||||
<el-option value="cp95" label="cp95"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="电能质量指标">
|
|
||||||
<el-select
|
|
||||||
filterable
|
|
||||||
v-model="tableStore.table.params.indicator"
|
|
||||||
placeholder="请选择电能质量指标"
|
|
||||||
clearable
|
|
||||||
>
|
|
||||||
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<div v-if="shouldShowHarmonicCount()" style="display: flex; color: var(--el-text-color-regular)">
|
|
||||||
<span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.harmonicCount"
|
|
||||||
placeholder="请选择谐波次数"
|
|
||||||
style="min-width: 80px !important"
|
|
||||||
filterable
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="num in harmonicCountOptions"
|
|
||||||
:key="num"
|
|
||||||
:label="num"
|
|
||||||
:value="num"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</el-form-item> -->
|
||||||
</el-form-item>
|
<el-form-item label="用户功率">
|
||||||
</template>
|
<el-select filterable v-model="tableStore.table.params.power" placeholder="请选择用户功率" clearable>
|
||||||
</TableHeader>
|
<el-option v-for="item in powerList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
<div v-loading="tableStore.table.loading">
|
</el-select>
|
||||||
<my-echart
|
</el-form-item>
|
||||||
class="tall"
|
<el-form-item label="统计类型">
|
||||||
v-if="lineShow"
|
<el-select style="min-width: 120px !important" placeholder="请选择"
|
||||||
:options="echartList"
|
v-model="tableStore.table.params.valueType" filterable>
|
||||||
:style="{
|
<el-option value="max" label="最大值"></el-option>
|
||||||
width: prop.width,
|
<el-option value="min" label="最小值"></el-option>
|
||||||
|
<el-option value="avg" label="平均值"></el-option>
|
||||||
|
<el-option value="cp95" label="cp95"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="电能质量指标">
|
||||||
|
<el-select filterable v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标"
|
||||||
|
clearable>
|
||||||
|
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name"
|
||||||
|
:value="item.id" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<div v-if="shouldShowHarmonicCount()"
|
||||||
|
style="display: flex; color: var(--el-text-color-regular)">
|
||||||
|
<span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
|
||||||
|
<el-select v-model="tableStore.table.params.harmonicCount" placeholder="请选择谐波次数"
|
||||||
|
style="min-width: 80px !important" filterable>
|
||||||
|
<el-option v-for="num in harmonicCountOptions" :key="num" :label="num"
|
||||||
|
:value="num"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
|
||||||
|
<div v-loading="tableStore.table.loading">
|
||||||
|
<my-echart class="tall" v-if="lineShow" :options="echartList" :style="{
|
||||||
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px )`
|
||||||
}"
|
}" />
|
||||||
/>
|
<el-empty v-else description="暂无监测点" :style="{
|
||||||
<el-empty
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
v-else
|
|
||||||
description="暂无监测点"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -103,6 +72,9 @@ import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit'
|
|||||||
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
import { ElMessage } from 'element-plus'
|
import { ElMessage } from 'element-plus'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
|
import { exportSeriesCSV } from '@/utils/echartMethod'
|
||||||
|
import PointTree from '@/components/tree/govern/pointTree.vue'
|
||||||
|
|
||||||
|
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
@@ -111,7 +83,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
@@ -128,6 +101,8 @@ const lineShow = ref(true)
|
|||||||
const fullscreen = computed(() => {
|
const fullscreen = computed(() => {
|
||||||
const w = Number(prop.w)
|
const w = Number(prop.w)
|
||||||
const h = Number(prop.h)
|
const h = Number(prop.h)
|
||||||
|
|
||||||
|
|
||||||
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
if (!isNaN(w) && !isNaN(h) && w === 12 && h === 6) {
|
||||||
// 执行相应逻辑
|
// 执行相应逻辑
|
||||||
return true
|
return true
|
||||||
@@ -148,18 +123,32 @@ const exceedingTheLimitList: any = ref([
|
|||||||
|
|
||||||
const indicatorList = ref()
|
const indicatorList = ref()
|
||||||
|
|
||||||
const initLineList = async () => {
|
// const initLineList = async () => {
|
||||||
cslineList({}).then(res => {
|
// cslineList({}).then(res => {
|
||||||
setTime()
|
// setTime()
|
||||||
if (res.data.length == 0) {
|
// if (res.data.length == 0) {
|
||||||
lineShow.value = false
|
// lineShow.value = false
|
||||||
return (tableStore.table.loading = false)
|
// return (tableStore.table.loading = false)
|
||||||
}
|
// }
|
||||||
lineShow.value = true
|
// lineShow.value = true
|
||||||
lineList.value = res.data
|
// lineList.value = res.data
|
||||||
tableStore.table.params.lineId = lineList.value[0].lineId
|
// tableStore.table.params.lineId = lineList.value[0].lineId
|
||||||
|
// initCode()
|
||||||
|
// })
|
||||||
|
// }
|
||||||
|
const exportSubjectName = ref('')
|
||||||
|
const nodeClick = (e: any) => {
|
||||||
|
if (e == undefined) {
|
||||||
|
}
|
||||||
|
if (e.level == 3) {
|
||||||
|
exportSubjectName.value = e.name || ''
|
||||||
|
tableStore.table.params.lineId = e.id
|
||||||
|
tableStore.exportName = { subject: exportSubjectName.value, feature: '主要监测点列表' }
|
||||||
initCode()
|
initCode()
|
||||||
})
|
}
|
||||||
|
}
|
||||||
|
const pointTypeChange = (val: any, obj: any) => {
|
||||||
|
nodeClick(obj)
|
||||||
}
|
}
|
||||||
|
|
||||||
const echartList = ref()
|
const echartList = ref()
|
||||||
@@ -174,37 +163,139 @@ const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const formatExceedanceValue = (value: any) => {
|
||||||
|
if (value == 0) return '不越限'
|
||||||
|
if (value == 1) return '越限'
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
const COLOR_NOT_EXCEED = '#2ab914'
|
||||||
|
const COLOR_EXCEED = '#e26257'
|
||||||
|
|
||||||
|
const mapExceedanceChartValue = (val: number) => {
|
||||||
|
if (val == 1) return 1
|
||||||
|
if (val == 0) return 10
|
||||||
|
return val
|
||||||
|
}
|
||||||
|
|
||||||
|
const getExceedanceChartText = (val: number | string) => {
|
||||||
|
if (val === 1 || val === '1') return '越限'
|
||||||
|
if (val === 10 || val === '10') return '不越限'
|
||||||
|
return formatExceedanceValue(val)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 越限阶梯线分段着色:不越限绿色,越限红色 */
|
||||||
|
const buildColoredExceedanceSeries = (data: any[], seriesName: string) => {
|
||||||
|
const points = data.filter(item => item[1] != null).map(item => [item[0], mapExceedanceChartValue(item[1])])
|
||||||
|
if (points.length === 0) return []
|
||||||
|
|
||||||
|
const series: any[] = []
|
||||||
|
let i = 0
|
||||||
|
|
||||||
|
while (i < points.length) {
|
||||||
|
const value = points[i][1]
|
||||||
|
const color = value === 1 ? COLOR_EXCEED : COLOR_NOT_EXCEED
|
||||||
|
const segment: any[] = []
|
||||||
|
|
||||||
|
if (i > 0 && points[i][1] !== points[i - 1][1]) {
|
||||||
|
segment.push([points[i][0], points[i - 1][1]])
|
||||||
|
}
|
||||||
|
|
||||||
|
segment.push(points[i])
|
||||||
|
let j = i + 1
|
||||||
|
|
||||||
|
while (j < points.length && points[j][1] === value) {
|
||||||
|
segment.push(points[j])
|
||||||
|
j++
|
||||||
|
}
|
||||||
|
|
||||||
|
if (j < points.length) {
|
||||||
|
segment.push([points[j][0], value])
|
||||||
|
}
|
||||||
|
|
||||||
|
series.push({
|
||||||
|
name: seriesName,
|
||||||
|
type: 'line',
|
||||||
|
step: 'end',
|
||||||
|
showSymbol: false,
|
||||||
|
clip: true,
|
||||||
|
data: segment,
|
||||||
|
yAxisIndex: 1,
|
||||||
|
lineStyle: { color, width: 2 }
|
||||||
|
})
|
||||||
|
|
||||||
|
i = j
|
||||||
|
}
|
||||||
|
|
||||||
|
return series
|
||||||
|
}
|
||||||
|
|
||||||
|
const qualityChartData = ref<any[]>([])
|
||||||
|
|
||||||
|
const getSeriesForCsvExport = () => {
|
||||||
|
const indicatorSeriesName = indicatorList.value?.find(
|
||||||
|
(item: any) => item.id === tableStore.table.params.indicator
|
||||||
|
)?.name
|
||||||
|
const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name
|
||||||
|
const powerSeries = echartList.value.options.series.find((item: any) => item.type === 'bar')
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
name: powerSeries?.name || powerName,
|
||||||
|
data: powerSeries?.data || []
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: indicatorSeriesName,
|
||||||
|
data: qualityChartData.value.map(point => [point[0], formatExceedanceValue(point[1]), point[2]])
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
const getChartExportFileName = () => ({
|
||||||
|
subject: exportSubjectName.value,
|
||||||
|
feature: '负荷曲线拟合图',
|
||||||
|
date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
|
||||||
|
})
|
||||||
|
|
||||||
const setEchart = () => {
|
const setEchart = () => {
|
||||||
// 获取当前选择的功率和指标名称
|
// 获取当前选择的功率和指标名称
|
||||||
const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name || '功率'
|
const powerName = powerList.value?.find((item: any) => item.id === tableStore.table.params.power)?.name || '功率'
|
||||||
const indicatorName =
|
const indicatorName =
|
||||||
indicatorList.value?.find((item: any) => item.id === tableStore.table.params.indicator)?.name || '电能质量指标'
|
indicatorList.value?.find((item: any) => item.id === tableStore.table.params.indicator)?.name || '电能质量指标'
|
||||||
|
|
||||||
|
const chartTitle = `${indicatorName}与${powerName}负荷曲线拟合图`
|
||||||
|
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
|
exportFileName: getChartExportFileName(),
|
||||||
title: {
|
title: {
|
||||||
text: `${indicatorName}与${powerName}负荷曲线拟合图`
|
text: chartTitle
|
||||||
|
},
|
||||||
|
toolbox: {
|
||||||
|
featureProps: {
|
||||||
|
myTool1: {
|
||||||
|
show: true,
|
||||||
|
title: '下载csv',
|
||||||
|
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||||||
|
onclick: () => {
|
||||||
|
exportSeriesCSV(getSeriesForCsvExport(), echartList.value.exportFileName)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
formatter: function (params: any) {
|
formatter: function (params: any) {
|
||||||
let result = params[0].axisValueLabel
|
let result = params[0].axisValueLabel
|
||||||
params.forEach((item: any) => {
|
const powerItem = params.find((item: any) => item.seriesName === powerName)
|
||||||
if (item.seriesName === indicatorName) {
|
if (powerItem) {
|
||||||
// 对于电能质量指标,格式化Y轴值显示
|
result += `<br/>${powerItem.marker}${powerItem.seriesName}: ${powerItem.value[1]} ${powerItem.value[2] || ''}`
|
||||||
let valueText = ''
|
}
|
||||||
if (item.value[1] == 0) {
|
const indicatorItems = params.filter(
|
||||||
valueText = '不越限'
|
(item: any) => item.seriesName === indicatorName && item?.data?.[1] != null
|
||||||
} else if (item.value[1] == 1) {
|
)
|
||||||
valueText = '越限'
|
if (indicatorItems.length) {
|
||||||
} else {
|
const item = indicatorItems[indicatorItems.length - 1]
|
||||||
valueText = item.value[1]
|
result += `<br/>${item.marker}${indicatorName}: ${getExceedanceChartText(item.data[1])}`
|
||||||
}
|
}
|
||||||
result += `<br/>${item.marker}${item.seriesName}: ${valueText}`
|
|
||||||
} else {
|
|
||||||
// 对于功率数据,正常显示数值
|
|
||||||
result += `<br/>${item.marker}${item.seriesName}: ${item.value[1]} ${item.value[2]}`
|
|
||||||
}
|
|
||||||
})
|
|
||||||
return result
|
return result
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -218,35 +309,76 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
dataZoom: [
|
||||||
|
{
|
||||||
|
type: 'inside',
|
||||||
|
height: 13,
|
||||||
|
start: 0,
|
||||||
|
bottom: '20px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'filter'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
start: 0,
|
||||||
|
height: 13,
|
||||||
|
bottom: '20px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'filter'
|
||||||
|
}
|
||||||
|
|
||||||
|
],
|
||||||
yAxis: [
|
yAxis: [
|
||||||
{},
|
{},
|
||||||
indicatorName
|
indicatorName
|
||||||
? {
|
? {
|
||||||
|
position: 'right',
|
||||||
min: 0,
|
min: 0,
|
||||||
max: 1,
|
max: 11,
|
||||||
|
interval: 1,
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
color: ['#ccc'],
|
||||||
|
type: 'dashed',
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
axisLabel: {
|
axisLabel: {
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
if (value === 0) {
|
if (value === 1) return '越限'
|
||||||
return '不越限'
|
if (value === 10) return '不越限'
|
||||||
} else if (value === 1) {
|
return ''
|
||||||
return '越限'
|
|
||||||
}
|
|
||||||
return value
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
: {}
|
: {}
|
||||||
],
|
],
|
||||||
grid: {
|
// grid: {
|
||||||
left: '10px',
|
// left: '10px',
|
||||||
right: '20px'
|
// right: '30px',
|
||||||
},
|
// },
|
||||||
options: {
|
options: {
|
||||||
|
// dataZoom: [
|
||||||
|
// {
|
||||||
|
// type: 'inside',
|
||||||
|
// start: 0,
|
||||||
|
// end: 100,
|
||||||
|
// filterMode: 'filter'
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// type: 'slider',
|
||||||
|
// start: 0,
|
||||||
|
// end: 100,
|
||||||
|
// height: 13,
|
||||||
|
// bottom: '20px',
|
||||||
|
// filterMode: 'filter'
|
||||||
|
// }
|
||||||
|
// ],
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
name: powerName, // 动态设置功率名称
|
name: powerName,
|
||||||
data: [],
|
data: [],
|
||||||
|
clip: true,
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: function (params: any) {
|
color: function (params: any) {
|
||||||
@@ -259,15 +391,6 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
yAxisIndex: 0
|
yAxisIndex: 0
|
||||||
},
|
|
||||||
{
|
|
||||||
name: indicatorName, // 动态设置指标名称
|
|
||||||
type: 'line',
|
|
||||||
step: 'end',
|
|
||||||
showSymbol: false,
|
|
||||||
// smooth: true,
|
|
||||||
data: [],
|
|
||||||
yAxisIndex: 1
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
@@ -313,9 +436,12 @@ const setEchart = () => {
|
|||||||
const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null)
|
const hasPowerData = processedPowerData.length > 0 && processedPowerData.some(item => item[1] !== null)
|
||||||
const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null)
|
const hasQualityData = processedQualityData.length > 0 && processedQualityData.some(item => item[1] !== null)
|
||||||
|
|
||||||
// 更新图表配置
|
qualityChartData.value = processedQualityData
|
||||||
|
echartList.value.options.series = [
|
||||||
|
echartList.value.options.series[0],
|
||||||
|
...buildColoredExceedanceSeries(processedQualityData, indicatorName)
|
||||||
|
]
|
||||||
echartList.value.options.series[0].data = processedPowerData
|
echartList.value.options.series[0].data = processedPowerData
|
||||||
echartList.value.options.series[1].data = processedQualityData
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('处理图表数据时出错:', error)
|
console.error('处理图表数据时出错:', error)
|
||||||
}
|
}
|
||||||
@@ -451,7 +577,7 @@ watch(
|
|||||||
)
|
)
|
||||||
|
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
await initLineList()
|
// await initCode()
|
||||||
})
|
})
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
@@ -493,4 +619,11 @@ watch(
|
|||||||
// :deep(.el-select) {
|
// :deep(.el-select) {
|
||||||
// min-width: 80px;
|
// min-width: 80px;
|
||||||
// }
|
// }
|
||||||
|
.device-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.cn-tree) {
|
||||||
|
padding: 0 10px 0 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测点">
|
<!-- <el-form-item label="监测点">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="tableStore.table.params.lineId"
|
v-model="tableStore.table.params.lineId"
|
||||||
placeholder="请选择监测点"
|
placeholder="请选择监测点"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
:value="item.lineId"
|
:value="item.lineId"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
||||||
@@ -38,7 +38,7 @@ import { cslineList ,governLineList} from '@/api/harmonic-boot/cockpit/cockpit'
|
|||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
const harmonicRatioRef: any = ref(null)
|
const harmonicRatioRef: any = ref(null)
|
||||||
|
const title = ref('指标越限详情')
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const height = mainHeight(0, 2).height as any
|
const height = mainHeight(0, 2).height as any
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '日期',
|
title: '日期',
|
||||||
field: 'time',
|
field: 'time',
|
||||||
width: '150',
|
width: '120',
|
||||||
sortable: true
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
width: '150'
|
width: '120'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '长时闪变越限(%)',
|
title: '长时闪变越限(%)',
|
||||||
@@ -144,6 +144,7 @@ tableStore.table.params.orderBy = ''
|
|||||||
const time:any=ref([])
|
const time:any=ref([])
|
||||||
const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
|
const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
|
title.value = row.lineName + '_指标越限详情'
|
||||||
time.value=[searchBeginTime,searchEndTime]
|
time.value=[searchBeginTime,searchEndTime]
|
||||||
initCSlineList()
|
initCSlineList()
|
||||||
tableStore.table.params.lineId = row.lineId
|
tableStore.table.params.lineId = row.lineId
|
||||||
@@ -159,7 +160,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any) => {
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name' && column.field != 'time') {
|
if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
|
||||||
dialogFlag.value = true
|
dialogFlag.value = true
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
|||||||
@@ -1,55 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
|
|
||||||
<!-- 监测点列表 -->
|
<!-- 监测点列表 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :showReset="false" showExport @selectChange="selectChange" v-if="fullscreen"
|
||||||
ref="TableHeaderRef"
|
:timeKeyList="prop.timeKey">
|
||||||
:showReset="false"
|
|
||||||
@selectChange="selectChange"
|
|
||||||
v-if="fullscreen"
|
|
||||||
:timeKeyList="prop.timeKey"
|
|
||||||
>
|
|
||||||
<template #select>
|
<template #select>
|
||||||
<el-form-item label="关键字筛选">
|
<el-form-item label="关键字筛选">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit style="width: 240px"
|
||||||
maxlength="32"
|
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入监测点名称" />
|
||||||
show-word-limit
|
|
||||||
style="width: 240px"
|
|
||||||
v-model.trim="tableStore.table.params.searchValue"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入监测点名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table
|
<Table ref="tableRef" @cell-click="cellClickEvent"
|
||||||
ref="tableRef"
|
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"></Table>
|
||||||
@cell-click="cellClickEvent"
|
|
||||||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
|
||||||
></Table>
|
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<OverLimitDetails ref="OverLimitDetailsRef" />
|
<OverLimitDetails ref="OverLimitDetailsRef" />
|
||||||
|
|
||||||
<!-- 上传对话框 -->
|
<!-- 上传对话框 -->
|
||||||
<el-dialog
|
<el-dialog v-model="uploadDialogVisible" title="上传报告" append-to-body width="500px" @closed="handleDialogClosed">
|
||||||
v-model="uploadDialogVisible"
|
<el-upload ref="uploadRef" class="upload-demo" action="" accept=".doc,.docx,.PDF" :on-change="handleChange"
|
||||||
title="上传报告"
|
:before-upload="beforeUpload" :limit="1" :auto-upload="false" :on-exceed="handleExceed"
|
||||||
append-to-body
|
:on-remove="handleRemove" :file-list="fileList">
|
||||||
width="500px"
|
|
||||||
@closed="handleDialogClosed"
|
|
||||||
>
|
|
||||||
<el-upload
|
|
||||||
ref="uploadRef"
|
|
||||||
class="upload-demo"
|
|
||||||
action=""
|
|
||||||
accept=".doc,.docx,.PDF"
|
|
||||||
:on-change="handleChange"
|
|
||||||
:before-upload="beforeUpload"
|
|
||||||
:limit="1"
|
|
||||||
:auto-upload="false"
|
|
||||||
:on-exceed="handleExceed"
|
|
||||||
:on-remove="handleRemove"
|
|
||||||
:file-list="fileList"
|
|
||||||
>
|
|
||||||
<el-button type="primary">点击上传</el-button>
|
<el-button type="primary">点击上传</el-button>
|
||||||
<template #tip>
|
<template #tip>
|
||||||
<div class="el-upload__tip">请上传Word或PDF文件</div>
|
<div class="el-upload__tip">请上传Word或PDF文件</div>
|
||||||
@@ -58,7 +29,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
<el-button @click="uploadDialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="handleUpload">确定</el-button>
|
<el-button type="primary" @click="handleUpload" :loading="loading">确定</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -66,15 +37,15 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, onMounted, provide, reactive, watch, h } from 'vue'
|
import { ref, onMounted, provide, watch, computed } from 'vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||||
import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue'
|
import OverLimitDetails from '@/components/cockpit/monitoringPointList/components/overLimitDetails.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { uploadReport, getReportUrl } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import { getTime } from '@/utils/formatTime'
|
|
||||||
|
|
||||||
|
import { downLoadFile } from '@/api/cs-system-boot/manage'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -82,7 +53,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
@@ -94,7 +66,7 @@ const uploadDialogVisible = ref(false)
|
|||||||
const currentUploadRow = ref<any>(null)
|
const currentUploadRow = ref<any>(null)
|
||||||
const uploadRef = ref()
|
const uploadRef = ref()
|
||||||
const fileList = ref([])
|
const fileList = ref([])
|
||||||
|
const loading = ref(false)
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
headerHeight.value = height
|
headerHeight.value = height
|
||||||
|
|
||||||
@@ -135,20 +107,23 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '监测点名称',
|
title: '监测点名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
minWidth: '120',
|
minWidth: 150,
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.lineName}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row?.cellValue || '/'}</span>`
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '监测类型',
|
|
||||||
field: 'position',
|
|
||||||
minWidth: '80',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
return row.cellValue || '/'
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{ title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
|
||||||
|
// {
|
||||||
|
// title: '监测类型',
|
||||||
|
// field: 'position',
|
||||||
|
// minWidth: '100',
|
||||||
|
// formatter: (row: any) => {
|
||||||
|
// return row.cellValue || '/'
|
||||||
|
// }
|
||||||
|
// },
|
||||||
// {
|
// {
|
||||||
// title: '监测点状态',
|
// title: '监测点状态',
|
||||||
// field: 'runStatus',
|
// field: 'runStatus',
|
||||||
@@ -162,50 +137,38 @@ const tableStore: any = new TableStore({
|
|||||||
title: '监测点状态',
|
title: '监测点状态',
|
||||||
field: 'runStatus',
|
field: 'runStatus',
|
||||||
render: 'tag',
|
render: 'tag',
|
||||||
|
width: 90,
|
||||||
width: 100,
|
|
||||||
custom: {
|
custom: {
|
||||||
停运: 'danger',
|
0: 'success',
|
||||||
退运: 'danger',
|
2: 'danger',
|
||||||
运行: 'success',
|
|
||||||
在线: 'success',
|
|
||||||
中断: 'warning',
|
|
||||||
离线: 'danger',
|
|
||||||
检修: 'warning',
|
|
||||||
调试: 'warning',
|
|
||||||
null: 'info'
|
null: 'info'
|
||||||
},
|
},
|
||||||
replaceValue: {
|
replaceValue: {
|
||||||
运行: '运行',
|
0: '在线',
|
||||||
在线: '在线',
|
2: '离线',
|
||||||
退运: '退运',
|
|
||||||
停运: '停运',
|
|
||||||
中断: '中断',
|
|
||||||
检修: '检修',
|
|
||||||
离线: '离线',
|
|
||||||
调试: '调试',
|
|
||||||
null: '/'
|
null: '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
title: '电压等级(kV)',
|
||||||
|
field: 'volGrade',
|
||||||
|
minWidth: '100',
|
||||||
|
formatter: (row: any) => {
|
||||||
|
return row.cellValue == 0 ? '/' : row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
title: '治理对象',
|
title: '治理对象',
|
||||||
field: 'sensitiveUser',
|
field: 'sensitiveUser',
|
||||||
minWidth: '90',
|
minWidth: '100',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue || '/'
|
return row.cellValue || '/'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '电压等级',
|
title: '治理方案',
|
||||||
field: 'volGrade',
|
|
||||||
minWidth: '80',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
return row.cellValue == 0 ? '/' : row.cellValue + 'kV' || '/'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '是否治理',
|
|
||||||
field: 'govern',
|
field: 'govern',
|
||||||
minWidth: '80',
|
minWidth: '80',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
@@ -240,9 +203,9 @@ const tableStore: any = new TableStore({
|
|||||||
// }
|
// }
|
||||||
// },
|
// },
|
||||||
{
|
{
|
||||||
title: '报告',
|
title: '治理前报告',
|
||||||
field: 'reportFilePath',
|
field: 'reportFilePath',
|
||||||
minWidth: '120',
|
minWidth: '150',
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return row.cellValue == null ? '/' : row.cellValue.split('/').pop()
|
return row.cellValue == null ? '/' : row.cellValue.split('/').pop()
|
||||||
}
|
}
|
||||||
@@ -274,7 +237,7 @@ const tableStore: any = new TableStore({
|
|||||||
icon: 'el-icon-EditPen',
|
icon: 'el-icon-EditPen',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
click: row => {
|
click: row => {
|
||||||
downloadTheReport(row.lineId, row.reportFilePath)
|
downloadTheReport(row.reportFilePath)
|
||||||
},
|
},
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return row.reportFilePath == null || row.reportFilePath.length == 0
|
return row.reportFilePath == null || row.reportFilePath.length == 0
|
||||||
@@ -339,42 +302,32 @@ const cellClickEvent = ({ row, column }: any) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 下载报告
|
// 下载报告(支持 doc/docx/pdf)
|
||||||
const downloadTheReport = (lineId: string, name: string) => {
|
const downloadTheReport = async (reportFilePath: string) => {
|
||||||
getReportUrl({ lineId: lineId }).then((res: any) => {
|
if (!reportFilePath) {
|
||||||
forceDownloadPdf(res.data, name.split('/').pop() || '')
|
ElMessage.warning('暂无报告可下载')
|
||||||
})
|
return
|
||||||
}
|
}
|
||||||
const forceDownloadPdf = async (pdfUrl, fileName = '文件.pdf') => {
|
ElMessage.info('下载中......')
|
||||||
try {
|
try {
|
||||||
// 1. 请求 PDF 并转为 Blob(关键:绕开浏览器直接解析)
|
const resp = (await downLoadFile(reportFilePath)) as unknown as Blob
|
||||||
const response = await fetch(pdfUrl, {
|
if (resp?.type === 'application/json') {
|
||||||
method: 'GET'
|
ElMessage.error('下载失败')
|
||||||
// 若需要鉴权,添加请求头(如 token)
|
return
|
||||||
})
|
}
|
||||||
|
const fileName = reportFilePath.split('/').pop() || '报告'
|
||||||
// 校验响应是否成功
|
const blob = new Blob([resp], { type: resp.type || 'application/octet-stream' })
|
||||||
if (!response.ok) throw new Error(`请求失败:${response.status}`)
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
// 2. 将响应转为 Blob(指定类型为 PDF,确保兼容性)
|
link.href = url
|
||||||
const blob = await response.blob()
|
link.download = fileName
|
||||||
const pdfBlob = new Blob([blob], { type: 'application/pdf' })
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
// 3. 创建临时 URL 并触发下载
|
document.body.removeChild(link)
|
||||||
const blobUrl = URL.createObjectURL(pdfBlob)
|
window.URL.revokeObjectURL(url)
|
||||||
const a = document.createElement('a')
|
ElMessage.success('下载成功')
|
||||||
a.href = blobUrl
|
} catch (error: any) {
|
||||||
a.download = fileName // 此时 Blob URL 是同源的,download 必生效
|
ElMessage.error('下载失败: ' + (error.message || '未知错误'))
|
||||||
a.style.display = 'none'
|
|
||||||
document.body.appendChild(a)
|
|
||||||
a.click() // 触发下载
|
|
||||||
|
|
||||||
// 4. 清理资源(避免内存泄漏)
|
|
||||||
document.body.removeChild(a)
|
|
||||||
URL.revokeObjectURL(blobUrl)
|
|
||||||
} catch (error) {
|
|
||||||
console.error('PDF 下载失败:', error)
|
|
||||||
// ElMessage.error('文件下载失败,请检查网络或文件地址') // 适配 Element Plus
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -431,7 +384,7 @@ const beforeUpload = (file: any) => {
|
|||||||
|
|
||||||
const handleUpload = async () => {
|
const handleUpload = async () => {
|
||||||
// return
|
// return
|
||||||
|
loading.value = true
|
||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append('file', fileList.value[0]?.raw)
|
formData.append('file', fileList.value[0]?.raw)
|
||||||
formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '')
|
formData.append('lineId', currentUploadRow.value?.lineId || currentUploadRow.value?.id || '')
|
||||||
@@ -442,15 +395,24 @@ const handleUpload = async () => {
|
|||||||
uploadDialogVisible.value = false
|
uploadDialogVisible.value = false
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
return Promise.resolve(result)
|
return Promise.resolve(result)
|
||||||
|
|
||||||
} catch (error: any) {
|
} catch (error: any) {
|
||||||
ElMessage.error('上传失败: ' + (error.message || '未知错误'))
|
ElMessage.error('上传失败: ' + (error.message || '未知错误'))
|
||||||
return Promise.reject(error)
|
return Promise.reject(error)
|
||||||
|
} finally {
|
||||||
|
loading.value = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
})
|
})
|
||||||
|
watch(
|
||||||
|
() => prop.flag,
|
||||||
|
val => {
|
||||||
|
tableStore.showPage = fullscreen.value ? true : false
|
||||||
|
}
|
||||||
|
)
|
||||||
watch(
|
watch(
|
||||||
() => prop.timeKey,
|
() => prop.timeKey,
|
||||||
val => {
|
val => {
|
||||||
|
|||||||
@@ -75,9 +75,6 @@
|
|||||||
</template>
|
</template>
|
||||||
<template #operation>
|
<template #operation>
|
||||||
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
<el-button type="primary" icon="el-icon-Search" @click="init()">查询</el-button>
|
||||||
<el-button :type="timeControl ? 'primary' : ''" icon="el-icon-Sort" @click="setTimeControl">
|
|
||||||
缺失数据
|
|
||||||
</el-button>
|
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
</div>
|
</div>
|
||||||
@@ -94,7 +91,7 @@ import { ref, onMounted, watch } from 'vue'
|
|||||||
import MyEchart from '@/components/echarts/MyEchart.vue'
|
import MyEchart from '@/components/echarts/MyEchart.vue'
|
||||||
import { useDictData } from '@/stores/dictData'
|
import { useDictData } from '@/stores/dictData'
|
||||||
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
import { queryStatistical } from '@/api/system-boot/csstatisticalset'
|
||||||
import { yMethod, exportCSV, completeTimeSeries } from '@/utils/echartMethod'
|
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { trendData } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import DatePicker from '@/components/form/datePicker/index.vue'
|
import DatePicker from '@/components/form/datePicker/index.vue'
|
||||||
@@ -380,14 +377,18 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
echartsData.value = {
|
echartsData.value = {
|
||||||
|
exportFileName: {
|
||||||
|
subject: trendRequestData.value?.lineName,
|
||||||
|
feature: '趋势图',
|
||||||
|
date: datePickerRef.value?.timeValue?.[1] || datePickerRef.value?.timeValue?.[0]
|
||||||
|
},
|
||||||
legend: {
|
legend: {
|
||||||
itemWidth: 20,
|
itemWidth: 20,
|
||||||
itemHeight: 20,
|
itemHeight: 20,
|
||||||
itemStyle: { opacity: 0 }, //去圆点
|
itemStyle: { opacity: 0 }, //去圆点
|
||||||
type: 'scroll', // 开启滚动分页
|
type: 'scroll', // 开启滚动分页
|
||||||
// orient: 'vertical', // 垂直排列
|
// orient: 'vertical', // 垂直排列
|
||||||
top: 5,
|
|
||||||
right: 70
|
|
||||||
// width: 550,
|
// width: 550,
|
||||||
// height: 50
|
// height: 50
|
||||||
},
|
},
|
||||||
@@ -448,26 +449,18 @@ const setEchart = () => {
|
|||||||
myTool1: {
|
myTool1: {
|
||||||
show: true,
|
show: true,
|
||||||
title: '下载csv',
|
title: '下载csv',
|
||||||
icon: 'path://M588.8 551.253333V512H352v39.253333h236.373333z m0 78.933334v-39.253334H352v39.253334h236.373333z m136.533333 78.933333V334.933333l-157.866666-157.866666H273.066667A59.306667 59.306667 0 0 0 213.333333 236.373333v551.253334a59.306667 59.306667 0 0 0 59.306667 59.306666h274.773333v42.666667H853.333333v-180.48zM568.746667 234.666667l100.266666 100.693333h-81.066666a20.053333 20.053333 0 0 1-19.626667-20.053333z m-20.48 573.013333H273.066667a19.2 19.2 0 0 1-17.493334-19.626667V236.373333a19.2 19.2 0 0 1 19.626667-19.626666h256v98.133333a58.88 58.88 0 0 0 58.88 59.306667h96.426667v334.933333h-98.133334v-39.68H352v39.68h196.266667z m100.266666 23.04a37.973333 37.973333 0 0 1-32 15.786667 38.826667 38.826667 0 0 1-32.426666-15.786667 53.76 53.76 0 0 1-10.24-32.853333 42.666667 42.666667 0 0 1 42.666666-47.786667 35.84 35.84 0 0 1 37.546667 29.866667h-12.8a23.893333 23.893333 0 0 0-24.746667-19.2c-17.066667 0-29.013333 14.08-29.013333 35.84s11.52 37.546667 28.586667 37.546666a26.453333 26.453333 0 0 0 26.453333-25.6h12.8a39.253333 39.253333 0 0 1-7.253333 22.186667z m59.733334 15.786667a35.84 35.84 0 0 1-40.106667-34.56H682.666667a23.893333 23.893333 0 0 0 26.88 23.04c12.8 0 22.613333-6.4 22.613333-15.786667s-4.266667-11.52-14.506667-13.653333l-21.333333-5.12c-17.066667-4.266667-24.32-11.52-24.32-23.893334s12.8-26.453333 34.133333-26.453333a31.573333 31.573333 0 0 1 35.413334 30.293333h-13.653334a19.626667 19.626667 0 0 0-22.613333-18.773333c-12.8 0-20.48 5.12-20.48 12.8s5.12 11.093333 17.066667 13.653333l14.933333 2.986667a42.666667 42.666667 0 0 1 20.906667 8.96 23.893333 23.893333 0 0 1 7.68 17.92c-0.426667 17.066667-14.506667 28.16-37.12 28.16z m88.746666 0h-14.506666l-32.426667-92.16h14.08l19.626667 59.733333 6.4 20.053333c0-9.386667 3.413333-12.8 5.546666-20.053333l19.2-59.733333h14.08z',
|
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||||||
onclick: e => {
|
onclick: () => {
|
||||||
// console.log("🚀 ~ init ~ echartsData.value:", echartsData.value.options.series.map(item => item.data))
|
exportSeriesCSV(echartsData.value.options.series, echartsData.value.exportFileName)
|
||||||
|
}
|
||||||
let list = echartsData.value.options.series?.map((item: any) => item.data)
|
},
|
||||||
let dataList = list[0]?.map((item: any, index: any) => {
|
myTool2: {
|
||||||
let value = [item[0], item[1]]
|
show: true,
|
||||||
list.forEach((item1: any, index1: any) => {
|
title: timeControl.value ? '关闭缺失数据' : '缺失数据',
|
||||||
if (index1 > 0) {
|
icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
|
||||||
value.push(item1 && item1[index] ? item1[index][1] : null)
|
iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
|
||||||
}
|
onclick: () => {
|
||||||
})
|
setTimeControl()
|
||||||
|
|
||||||
return value
|
|
||||||
})
|
|
||||||
exportCSV(
|
|
||||||
echartsData.value.options.series.map((item: any) => item.name),
|
|
||||||
dataList,
|
|
||||||
'监测点指标趋势.csv'
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 指标越限详情 -->
|
<!-- 指标越限详情 -->
|
||||||
<el-dialog draggable title="指标越限详情" v-model="dialogVisible" append-to-body width="70%">
|
<el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="1200">
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测点">
|
<!-- <el-form-item label="监测点">
|
||||||
<el-select
|
<el-select
|
||||||
v-model="tableStore.table.params.lineId"
|
v-model="tableStore.table.params.lineId"
|
||||||
placeholder="请选择监测点"
|
placeholder="请选择监测点"
|
||||||
@@ -18,7 +18,7 @@
|
|||||||
:value="item.lineId"
|
:value="item.lineId"
|
||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item>
|
</el-form-item> -->
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
<Table ref="tableRef" @cell-click="cellClickEvent" isGroup :height="height"></Table>
|
||||||
@@ -38,7 +38,7 @@ import { cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
|
|||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible: any = ref(false)
|
||||||
const harmonicRatioRef: any = ref(null)
|
const harmonicRatioRef: any = ref(null)
|
||||||
|
const title = ref('指标越限详情')
|
||||||
const options = ref()
|
const options = ref()
|
||||||
const height = mainHeight(0, 2).height as any
|
const height = mainHeight(0, 2).height as any
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
@@ -76,13 +76,13 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '日期',
|
title: '日期',
|
||||||
field: 'time',
|
field: 'time',
|
||||||
width: '150',
|
width: '120',
|
||||||
sortable: true
|
sortable: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
width: '150'
|
width: '120'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '长时闪变越限(%)',
|
title: '长时闪变越限(%)',
|
||||||
@@ -144,6 +144,7 @@ tableStore.table.params.orderBy = ''
|
|||||||
const open = async (row: any,searchBeginTime:any,searchEndTime:any,data: any) => {
|
const open = async (row: any,searchBeginTime:any,searchEndTime:any,data: any) => {
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
// initCSlineList()
|
// initCSlineList()
|
||||||
|
title.value = row.lineName + '_指标越限详情'
|
||||||
options.value = data
|
options.value = data
|
||||||
tableStore.table.params.lineId = row.lineId
|
tableStore.table.params.lineId = row.lineId
|
||||||
|
|
||||||
@@ -158,7 +159,7 @@ const open = async (row: any,searchBeginTime:any,searchEndTime:any,data: any) =>
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name' && column.field != 'time') {
|
if (column.field != 'lineName' && column.field != 'name' && column.field != 'time') {
|
||||||
dialogFlag.value = true
|
dialogFlag.value = true
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
|
|||||||
@@ -142,17 +142,20 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '监测点名称',
|
||||||
field: 'lineName',
|
field: 'lineName',
|
||||||
minWidth: '90'
|
minWidth: 150
|
||||||
},
|
},
|
||||||
|
{ title: '设备名称', field: 'devName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
|
||||||
{
|
{
|
||||||
title: '越限占比(%)',
|
title: '越限占比(%)',
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: '长时闪变',
|
title: '长时闪变',
|
||||||
field: 'flicker',
|
field: 'flicker',
|
||||||
minWidth: '70',
|
minWidth: '80',
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
return `<span style='cursor: pointer;text-decoration: underline;'>${row.flicker}</span>`
|
||||||
|
|||||||
@@ -1,32 +1,17 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--敏感负荷列表 -->
|
<!--敏感负荷列表 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" v-if="fullscreen"
|
||||||
ref="TableHeaderRef"
|
:timeKeyList="prop.timeKey">
|
||||||
:showReset="false"
|
|
||||||
@selectChange="selectChange"
|
|
||||||
v-if="fullscreen"
|
|
||||||
:timeKeyList="prop.timeKey"
|
|
||||||
>
|
|
||||||
<template #select>
|
<template #select>
|
||||||
<el-form-item label="关键字筛选">
|
<el-form-item label="关键字筛选">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit style="width: 240px"
|
||||||
maxlength="32"
|
v-model.trim="tableStore.table.params.searchValue" clearable placeholder="请输入用户名称" />
|
||||||
show-word-limit
|
|
||||||
style="width: 240px"
|
|
||||||
v-model.trim="tableStore.table.params.searchValue"
|
|
||||||
clearable
|
|
||||||
placeholder="请输入敏感负荷名称"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
<Table
|
<Table ref="tableRef" @cell-click="cellClickEvent"
|
||||||
ref="tableRef"
|
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`" isGroup></Table>
|
||||||
@cell-click="cellClickEvent"
|
|
||||||
:height="`calc(${prop.height} - ${headerHeight}px + ${fullscreen ? -58 : 56}px )`"
|
|
||||||
isGroup
|
|
||||||
></Table>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -44,7 +29,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
@@ -91,13 +77,13 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '敏感负荷名称',
|
title: '用户名称',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
minWidth: '90'
|
minWidth: '90'
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '敏感负荷类型',
|
title: '用户类型',
|
||||||
field: 'loadType',
|
field: 'loadType',
|
||||||
minWidth: '70',
|
minWidth: '70',
|
||||||
formatter: row => {
|
formatter: row => {
|
||||||
@@ -125,7 +111,7 @@ const tableStore: any = new TableStore({
|
|||||||
setTime()
|
setTime()
|
||||||
},
|
},
|
||||||
|
|
||||||
loadCallback: () => {}
|
loadCallback: () => { }
|
||||||
})
|
})
|
||||||
tableStore.table.params.searchValue = ''
|
tableStore.table.params.searchValue = ''
|
||||||
const tableRef = ref()
|
const tableRef = ref()
|
||||||
@@ -136,7 +122,6 @@ provide('tableStore', tableStore)
|
|||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name') {
|
if (column.field != 'name') {
|
||||||
console.log(row)
|
|
||||||
OverLimitDetailsRef.value.open(row)
|
OverLimitDetailsRef.value.open(row)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -179,5 +164,11 @@ watch(
|
|||||||
deep: true
|
deep: true
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
watch(
|
||||||
|
() => prop.flag,
|
||||||
|
val => {
|
||||||
|
tableStore.showPage = fullscreen.value ? true : false
|
||||||
|
}
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -1,203 +1,156 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 暂态事件详情 -->
|
<el-dialog draggable title="暂态事件" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
|
<TableHeader datePicker showExport ref="tableHeaderRef" @selectChange="selectChange"
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
|
@onResetForm="onResetForm">
|
||||||
<template v-slot:select>
|
<template v-slot:operation>
|
||||||
<el-form-item label="监测点" v-if="props.showLine">
|
<el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
|
||||||
<el-select v-model="tableStore.table.params.lineId" filterable placeholder="请选择监测点名称">
|
|
||||||
<el-option
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="暂态类型">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.eventType"
|
|
||||||
style="min-width: 150px"
|
|
||||||
clearable
|
|
||||||
placeholder="请选择暂态类型"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in eventList"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
|
|
||||||
|
<MultiCondition v-model:visible="filterVisible" :params="tableStore.table.params" ref="multiConditionRef"
|
||||||
|
@confirm="onFilterConfirm" />
|
||||||
|
|
||||||
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 查看波形 -->
|
|
||||||
<el-dialog
|
<el-dialog v-model="isWaveCharts" draggable title="波形分析" append-to-body width="70%" @close="handleHideCharts">
|
||||||
v-model="isWaveCharts"
|
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
||||||
draggable
|
@handleHideCharts="handleHideCharts" :wp="wp" />
|
||||||
title="波形分析"
|
|
||||||
append-to-body
|
|
||||||
v-if="isWaveCharts"
|
|
||||||
width="70%"
|
|
||||||
@close="handleHideCharts"
|
|
||||||
>
|
|
||||||
<waveFormAnalysis
|
|
||||||
v-loading="loading"
|
|
||||||
ref="waveFormAnalysisRef"
|
|
||||||
@handleHideCharts="handleHideCharts"
|
|
||||||
:wp="wp"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, provide } from 'vue'
|
import { ref, provide, nextTick } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import MultiCondition from '@/views/govern/alarm/multiCondition.vue'
|
||||||
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
||||||
import { analyseWave } from '@/api/common'
|
import { analyseWave } from '@/api/common'
|
||||||
import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
||||||
interface Props {
|
import { buildWaveExportFileName, getExportSubjectFromRow } from '@/utils/echartMethod'
|
||||||
showLine?: boolean
|
import { useDictData } from '@/stores/dictData'
|
||||||
}
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const dialogVisible = ref(false)
|
||||||
showLine: true
|
const waveFormAnalysisRef = ref()
|
||||||
})
|
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
|
||||||
const waveFormAnalysisRef: any = ref(null)
|
|
||||||
// 波形
|
|
||||||
const isWaveCharts = ref(false)
|
const isWaveCharts = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const wp = ref({})
|
const wp = ref({})
|
||||||
const boxoList: any = ref({})
|
const boxoList: any = ref({})
|
||||||
|
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
|
const filterVisible = ref(false)
|
||||||
|
const multiConditionRef = ref<InstanceType<typeof MultiCondition>>()
|
||||||
|
const currentOpenTime = ref('')
|
||||||
|
|
||||||
|
const dictData = useDictData()
|
||||||
|
const ReasonList: any = dictData.getBasicData('Event_Reason')
|
||||||
|
const EventTypeList: any = dictData.getBasicData('Event_Type')
|
||||||
|
|
||||||
const options = ref()
|
|
||||||
const heightRef = ref(mainHeight(168, 2.1).height)
|
const heightRef = ref(mainHeight(168, 2.1).height)
|
||||||
const selectChange = (flag: boolean, h: any) => {
|
const selectChange = (_flag: boolean, h: number) => {
|
||||||
heightRef.value = mainHeight(h, 2.1).height
|
heightRef.value = mainHeight(h, 2.1).height
|
||||||
}
|
}
|
||||||
const eventList = [
|
|
||||||
{ label: '电压暂降', value: '1' },
|
|
||||||
{ label: '电压中断', value: '2' },
|
|
||||||
{ label: '电压暂升', value: '3' }
|
|
||||||
]
|
|
||||||
const getSimpleLineList = async () => {
|
|
||||||
const res = await getSimpleLine()
|
|
||||||
options.value = res.data
|
|
||||||
}
|
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-harmonic-boot/event/pageEvent',
|
url: '/cs-harmonic-boot/eventUser/queryEventpageWeb',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
showPage: true,
|
showPage: true,
|
||||||
exportName: '暂态事件详情',
|
exportName: '暂态事件',
|
||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
field: 'index',
|
|
||||||
title: '序号',
|
title: '序号',
|
||||||
width: '80',
|
width: 80,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{ title: '发生时刻', field: 'startTime', align: 'center', minWidth: 180, sortable: true },
|
||||||
title: '暂态时间',
|
{ title: '暂降幅值(%)', minWidth: 120, field: 'evtParamVVaDepth', align: 'center', sortable: true },
|
||||||
field: 'startTime',
|
{ title: '持续时间(s)', field: 'evtParamTm', minWidth: 110, align: 'center', sortable: true },
|
||||||
minWidth: '180'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '测点名称',
|
|
||||||
field: 'lineName',
|
|
||||||
minWidth: '150'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '暂态类型',
|
|
||||||
field: 'tag',
|
|
||||||
minWidth: '100'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '特征幅值(%)',
|
|
||||||
field: 'amplitude',
|
|
||||||
minWidth: '100'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '暂降深度(%)',
|
|
||||||
field: 'depth',
|
|
||||||
minWidth: '100',
|
|
||||||
formatter: (row: any) => {
|
|
||||||
// 当暂态类型不是电压暂升时,计算暂降深度 = 100 - 特征幅值
|
|
||||||
if (row.row.tag !== '电压暂升') {
|
|
||||||
const amplitude = parseFloat(row.row.amplitude)
|
|
||||||
if (!isNaN(amplitude)) {
|
|
||||||
return 100 - amplitude
|
|
||||||
}
|
|
||||||
return '-'
|
|
||||||
} else {
|
|
||||||
// 电压暂升时不显示暂降深度
|
|
||||||
return '/'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '持续时间(S)',
|
|
||||||
field: 'persistTime',
|
|
||||||
minWidth: '100'
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: '严重度',
|
title: '严重度',
|
||||||
field: 'severity',
|
field: 'severity',
|
||||||
minWidth: '80'
|
minWidth: 80,
|
||||||
|
align: 'center',
|
||||||
|
sortable: true,
|
||||||
|
formatter: (row: any) => row.cellValue ? row.cellValue : '/'
|
||||||
|
},
|
||||||
|
{ title: '相别', field: 'evtParamPhase', minWidth: 80, align: 'center' },
|
||||||
|
{ title: '触发类型', field: 'showName', minWidth: 100, align: 'center' },
|
||||||
|
{
|
||||||
|
title: '暂降原因',
|
||||||
|
field: 'advanceReason',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => ReasonList.find((item: any) => item.id == row.cellValue)?.name || '其他'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '波形',
|
title: '暂降类型',
|
||||||
minWidth: '100',
|
field: 'advanceType',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
|
||||||
|
},
|
||||||
|
{ title: '监测点名称', field: 'lineName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
|
||||||
|
{ title: '设备名称', field: 'equipmentName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '项目名称', field: 'projectName', minWidth: 150, align: 'center' },
|
||||||
|
{ title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center' },
|
||||||
|
{
|
||||||
|
title: '发生位置',
|
||||||
|
field: 'sagSource',
|
||||||
|
minWidth: 120,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '暂无'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
align: 'center',
|
||||||
|
width: 150,
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
text: '波形分析',
|
text: '暂无波形',
|
||||||
|
type: 'info',
|
||||||
|
icon: 'el-icon-DataLine',
|
||||||
|
render: 'basicButton',
|
||||||
|
disabled: row => {
|
||||||
|
|
||||||
|
return row.wavePath
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'edit',
|
||||||
|
title: '波形分析',
|
||||||
type: 'primary',
|
type: 'primary',
|
||||||
icon: 'el-icon-DataLine',
|
icon: 'el-icon-DataLine',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
loading: 'loading1',
|
loading: 'loading1',
|
||||||
disabled: row => {
|
disabled: (row: any) => !row.wavePath,
|
||||||
return !row.wavePath
|
click: async (row: any) => {
|
||||||
},
|
|
||||||
|
|
||||||
click: async row => {
|
|
||||||
row.loading1 = true
|
row.loading1 = true
|
||||||
|
|
||||||
|
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
// 在打开弹窗时立即设置高度
|
|
||||||
nextTick(() => {
|
|
||||||
if (waveFormAnalysisRef.value) {
|
|
||||||
// waveFormAnalysisRef.value.setHeight(false, 360)
|
|
||||||
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await analyseWave(row.id)
|
await analyseWave(row.id)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
isWaveCharts.value = true
|
|
||||||
loading.value = true
|
|
||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
if (res != undefined) {
|
if (res != undefined) {
|
||||||
boxoList.value = row
|
loading.value = true
|
||||||
// boxoList.value = {
|
isWaveCharts.value = true
|
||||||
// ...row,
|
boxoList.value = {
|
||||||
// duration: row.persistTime // 将 persistTime 值赋给 duration
|
...row,
|
||||||
// }
|
engineeringName: row.projectName,
|
||||||
boxoList.value.featureAmplitude = (row.amplitude - 0) / 100
|
persistTime: row.evtParamTm,
|
||||||
// row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
featureAmplitude:
|
||||||
boxoList.value.systemType = 'YPT'
|
row.evtParamVVaDepth != '-' ? (row.evtParamVVaDepth - 0) / 100 : null,
|
||||||
|
systemType: 'YPT',
|
||||||
|
}
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
@@ -208,40 +161,142 @@ const tableStore: any = new TableStore({
|
|||||||
})
|
})
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
waveFormAnalysisRef.value &&
|
if (waveFormAnalysisRef.value) {
|
||||||
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
||||||
|
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
text: '暂无波形',
|
title: '波形下载',
|
||||||
type: 'info',
|
type: 'primary',
|
||||||
icon: 'el-icon-DataLine',
|
icon: 'el-icon-Check',
|
||||||
|
loading: 'loading2',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: (row: any) => !row.wavePath,
|
||||||
return !!row.wavePath
|
click: (row: any) => {
|
||||||
|
row.loading2 = true
|
||||||
|
ElMessage.info('下载中......')
|
||||||
|
getFileZip({ eventId: row.id }).then(res => {
|
||||||
|
const blob = new Blob([res as unknown as BlobPart], { type: 'application/zip' })
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
ElMessage.success('波形下载成功')
|
||||||
|
row.loading2 = false
|
||||||
|
}).catch(() => {
|
||||||
|
row.loading2 = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => { },
|
||||||
loadCallback: () => {}
|
resetCallback: () => {
|
||||||
|
restoreOpenDayTime()
|
||||||
|
},
|
||||||
|
loadCallback: () => {
|
||||||
|
tableStore.table.data.forEach((item: any) => {
|
||||||
|
item.loading = false
|
||||||
|
item.evtParamTm =
|
||||||
|
item.evtParamTm.split('s')[0] != '-' ? (item.evtParamTm.split('s')[0] - 0).toFixed(2) : '-'
|
||||||
|
item.evtParamVVaDepth =
|
||||||
|
item.evtParamVVaDepth.split('%')[0] != '-'
|
||||||
|
? (item.evtParamVVaDepth.split('%')[0] - 0).toFixed(2)
|
||||||
|
: '-'
|
||||||
|
})
|
||||||
|
}
|
||||||
})
|
})
|
||||||
tableStore.table.params.eventType = ''
|
|
||||||
|
tableStore.table.params.type = 0
|
||||||
|
Object.assign(tableStore.table.params, {
|
||||||
|
featureAmplitudeMin: undefined,
|
||||||
|
featureAmplitudeMax: undefined,
|
||||||
|
evtParamTmMin: undefined,
|
||||||
|
evtParamTmMax: undefined,
|
||||||
|
severityMin: undefined,
|
||||||
|
severityMax: undefined,
|
||||||
|
fileFlag: ''
|
||||||
|
})
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const open = async (time: any) => {
|
|
||||||
tableStore.table.params.eventType = ''
|
const resetFilterParams = () => {
|
||||||
dialogVisible.value = true
|
Object.assign(tableStore.table.params, {
|
||||||
getSimpleLineList()
|
featureAmplitudeMin: undefined,
|
||||||
tableStore.table.params.lineId = ''
|
featureAmplitudeMax: undefined,
|
||||||
|
evtParamTmMin: undefined,
|
||||||
|
evtParamTmMax: undefined,
|
||||||
|
severityMin: undefined,
|
||||||
|
severityMax: undefined,
|
||||||
|
fileFlag: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const restoreOpenDayTime = () => {
|
||||||
|
if (!currentOpenTime.value || !tableHeaderRef.value) return
|
||||||
|
tableHeaderRef.value.setInterval(5)
|
||||||
|
tableHeaderRef.value.setTimeInterval([currentOpenTime.value, currentOpenTime.value])
|
||||||
|
tableStore.table.params.searchBeginTime = currentOpenTime.value
|
||||||
|
tableStore.table.params.searchEndTime = currentOpenTime.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const syncInitDataForReset = () => {
|
||||||
|
if (!tableStore.initData) return
|
||||||
|
Object.assign(tableStore.initData, {
|
||||||
|
searchBeginTime: currentOpenTime.value,
|
||||||
|
searchEndTime: currentOpenTime.value,
|
||||||
|
startTime: currentOpenTime.value,
|
||||||
|
endTime: currentOpenTime.value,
|
||||||
|
featureAmplitudeMin: undefined,
|
||||||
|
featureAmplitudeMax: undefined,
|
||||||
|
evtParamTmMin: undefined,
|
||||||
|
evtParamTmMax: undefined,
|
||||||
|
severityMin: undefined,
|
||||||
|
severityMax: undefined,
|
||||||
|
fileFlag: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openFilterDialog = () => {
|
||||||
|
filterVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onFilterConfirm = () => {
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onResetForm = () => {
|
||||||
|
filterVisible.value = false
|
||||||
|
resetFilterParams()
|
||||||
|
multiConditionRef.value?.reset()
|
||||||
|
syncInitDataForReset()
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
tableHeaderRef.value.setInterval(5)
|
restoreOpenDayTime()
|
||||||
tableHeaderRef.value.setTimeInterval([time, time])
|
})
|
||||||
tableStore.table.params.searchBeginTime = time
|
}
|
||||||
tableStore.table.params.searchEndTime = time
|
|
||||||
|
const open = (time: string) => {
|
||||||
|
currentOpenTime.value = time
|
||||||
|
dialogVisible.value = true
|
||||||
|
filterVisible.value = false
|
||||||
|
resetFilterParams()
|
||||||
|
multiConditionRef.value?.reset()
|
||||||
|
tableStore.table.params.pageNum = 1
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
restoreOpenDayTime()
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
|
nextTick(() => {
|
||||||
|
syncInitDataForReset()
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -252,4 +307,5 @@ const handleHideCharts = () => {
|
|||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -32,9 +32,9 @@
|
|||||||
<template #content>
|
<template #content>
|
||||||
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
<!-- <span v-html="list?.filter(item => item.time == data.day)[0]?.type || ''"></span> -->
|
||||||
<div v-for="item in list?.filter((item:any) => item.name == data.day)">
|
<div v-for="item in list?.filter((item:any) => item.name == data.day)">
|
||||||
<div>电压暂降:{{ item.eventDown || 0 }}</div>
|
<div>暂降: {{ item.eventDown || 0 }}</div>
|
||||||
<div>电压中断:{{ item.eventOff || 0 }}</div>
|
<div>中断: {{ item.eventOff || 0 }}</div>
|
||||||
<div>电压暂升:{{ item.eventUp || 0 }}</div>
|
<div>暂升: {{ item.eventUp || 0 }}</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<div
|
<div
|
||||||
@@ -43,13 +43,13 @@
|
|||||||
v-for="item in list?.filter((item:any) => item.name == data.day)"
|
v-for="item in list?.filter((item:any) => item.name == data.day)"
|
||||||
@click="descentClick(item)"
|
@click="descentClick(item)"
|
||||||
>
|
>
|
||||||
<!-- <div>电压暂降:{{ item.eventDown || 0 }}</div>
|
<!-- <div>暂降:{{ item.eventDown || 0 }}</div>
|
||||||
<div>电压中断:{{ item.eventOff || 0 }}</div>
|
<div>中断:{{ item.eventOff || 0 }}</div>
|
||||||
<div>电压暂升:{{ item.eventUp || 0 }}</div> -->
|
<div>暂升:{{ item.eventUp || 0 }}</div> -->
|
||||||
<template v-if="fullscreen">
|
<template v-if="fullscreen">
|
||||||
<div>电压暂降:{{ item.eventDown || 0 }}</div>
|
<div>暂降: {{ item.eventDown || 0 }}</div>
|
||||||
<div>电压中断:{{ item.eventOff || 0 }}</div>
|
<div>中断: {{ item.eventOff || 0 }}</div>
|
||||||
<div>电压暂升:{{ item.eventUp || 0 }}</div>
|
<div>暂升: {{ item.eventUp || 0 }}</div>
|
||||||
</template>
|
</template>
|
||||||
<template v-else>暂态事件</template>
|
<template v-else>暂态事件</template>
|
||||||
</div>
|
</div>
|
||||||
@@ -58,7 +58,7 @@
|
|||||||
</template>
|
</template>
|
||||||
</el-calendar>
|
</el-calendar>
|
||||||
<!-- 暂态事件列表 -->
|
<!-- 暂态事件列表 -->
|
||||||
<TransientList ref="transientListRef" :showLine="false" />
|
<TransientList ref="transientListRef" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
@@ -131,7 +131,7 @@ const tableStore: any = new TableStore({
|
|||||||
},
|
},
|
||||||
|
|
||||||
loadCallback: () => {
|
loadCallback: () => {
|
||||||
value.value = tableStore.table.params.searchBeginTime
|
value.value = dayjs(tableStore.table.params.searchBeginTime).toDate()
|
||||||
list.value = tableStore.table.data
|
list.value = tableStore.table.data
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,22 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--暂态事件概率分布 -->
|
<!--暂态事件概率分布 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false" @selectChange="selectChange"
|
||||||
ref="TableHeaderRef"
|
datePicker v-if="fullscreen"></TableHeader>
|
||||||
:timeKeyList="prop.timeKey"
|
<my-echart class="tall" :options="echartList" :style="{
|
||||||
:showReset="false"
|
width: prop.width,
|
||||||
@selectChange="selectChange"
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
datePicker
|
}" />
|
||||||
v-if="fullscreen"
|
|
||||||
></TableHeader>
|
|
||||||
<my-echart
|
|
||||||
class="tall"
|
|
||||||
:options="echartList"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<!-- <my-echart
|
<!-- <my-echart
|
||||||
class="mt10"
|
class="mt10"
|
||||||
:options="echartList1"
|
:options="echartList1"
|
||||||
@@ -170,7 +160,11 @@ const tableStore: any = new TableStore({
|
|||||||
},
|
},
|
||||||
title: {
|
title: {
|
||||||
text: '暂态事件概率分布',
|
text: '暂态事件概率分布',
|
||||||
x: 'center'
|
x: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: '15'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
visualMap: {
|
visualMap: {
|
||||||
max: 500,
|
max: 500,
|
||||||
@@ -206,22 +200,22 @@ const tableStore: any = new TableStore({
|
|||||||
},
|
},
|
||||||
grid3D: {
|
grid3D: {
|
||||||
viewControl: {
|
viewControl: {
|
||||||
projection: 'perspective',
|
projection: 'perspective',
|
||||||
distance: 260,
|
distance: 260,
|
||||||
rotateSensitivity: 10,
|
rotateSensitivity: 10,
|
||||||
zoomSensitivity: 2
|
zoomSensitivity: 2
|
||||||
|
},
|
||||||
|
boxWidth: 150,
|
||||||
|
boxDepth: 100,
|
||||||
|
boxHeight: 100,
|
||||||
|
light: {
|
||||||
|
main: {
|
||||||
|
intensity: 1.2
|
||||||
},
|
},
|
||||||
boxWidth: 150,
|
ambient: {
|
||||||
boxDepth: 100,
|
intensity: 0.4
|
||||||
boxHeight: 100,
|
|
||||||
light: {
|
|
||||||
main: {
|
|
||||||
intensity: 1.2
|
|
||||||
},
|
|
||||||
ambient: {
|
|
||||||
intensity: 0.4
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
@@ -242,7 +236,7 @@ const tableStore: any = new TableStore({
|
|||||||
|
|
||||||
echartList1.value = {
|
echartList1.value = {
|
||||||
title: {
|
title: {
|
||||||
text: '越限时间概率分布'
|
text: '暂态事件概率分布',
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: 'category',
|
type: 'category',
|
||||||
|
|||||||
@@ -1,197 +1,179 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!-- 暂态事件详情 -->
|
<el-dialog draggable :title="title" v-model="dialogVisible" append-to-body width="70%">
|
||||||
<el-dialog draggable title="暂态事件详情 " v-model="dialogVisible" append-to-body width="70%">
|
<TableHeader datePicker showExport ref="tableHeaderRef" @selectChange="selectChange"
|
||||||
<TableHeader datePicker showExport :showReset="false" ref="tableHeaderRef" @selectChange="selectChange">
|
@onResetForm="onResetForm">
|
||||||
<template v-slot:select>
|
<template v-slot:operation>
|
||||||
<el-form-item label="监测点">
|
<el-button type="primary" icon="el-icon-Operation" @click="openFilterDialog">事件筛选</el-button>
|
||||||
<el-select filterable v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称">
|
|
||||||
<el-option
|
|
||||||
v-for="item in options"
|
|
||||||
:key="item.lineId"
|
|
||||||
:label="item.name"
|
|
||||||
:value="item.lineId"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="暂态类型">
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.eventType"
|
|
||||||
style="min-width: 150px"
|
|
||||||
clearable
|
|
||||||
placeholder="请选择暂态类型"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="item in eventList"
|
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
</template>
|
</template>
|
||||||
</TableHeader>
|
</TableHeader>
|
||||||
|
|
||||||
|
<MultiCondition
|
||||||
|
v-model:visible="filterVisible"
|
||||||
|
:fixed-target="filterTarget"
|
||||||
|
:params="tableStore.table.params"
|
||||||
|
ref="multiConditionRef"
|
||||||
|
@confirm="onFilterConfirm"
|
||||||
|
/>
|
||||||
|
|
||||||
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
<Table ref="tableRef" isGroup :height="heightRef"></Table>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 查看波形 -->
|
|
||||||
<el-dialog
|
<el-dialog v-model="isWaveCharts" draggable title="波形分析" append-to-body width="70%" @close="handleHideCharts">
|
||||||
v-model="isWaveCharts"
|
<waveFormAnalysis v-loading="loading" v-if="isWaveCharts" ref="waveFormAnalysisRef"
|
||||||
draggable
|
@handleHideCharts="handleHideCharts" :wp="wp" />
|
||||||
title="波形分析"
|
|
||||||
append-to-body
|
|
||||||
width="70%"
|
|
||||||
@close="handleHideCharts"
|
|
||||||
>
|
|
||||||
<waveFormAnalysis
|
|
||||||
v-loading="loading"
|
|
||||||
v-if="isWaveCharts"
|
|
||||||
ref="waveFormAnalysisRef"
|
|
||||||
@handleHideCharts="handleHideCharts"
|
|
||||||
:wp="wp"
|
|
||||||
/>
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, provide } from 'vue'
|
import { ref, provide, nextTick } from 'vue'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
import Table from '@/components/table/index.vue'
|
import Table from '@/components/table/index.vue'
|
||||||
import TableHeader from '@/components/table/header/index.vue'
|
import TableHeader from '@/components/table/header/index.vue'
|
||||||
import TableStore from '@/utils/tableStore'
|
import TableStore from '@/utils/tableStore'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import MultiCondition from '@/views/govern/alarm/multiCondition.vue'
|
||||||
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
import waveFormAnalysis from '@/views/govern/device/control/tabs/components/waveFormAnalysis.vue'
|
||||||
import { analyseWave } from '@/api/common'
|
import { analyseWave } from '@/api/common'
|
||||||
import { getSimpleLine } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { getFileZip } from '@/api/cs-harmonic-boot/datatrend'
|
||||||
|
import { buildWaveExportFileName, getExportSubjectFromRow } from '@/utils/echartMethod'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
|
||||||
const dialogVisible: any = ref(false)
|
const dialogVisible = ref(false)
|
||||||
const waveFormAnalysisRef: any = ref(null)
|
const waveFormAnalysisRef = ref()
|
||||||
// 波形
|
|
||||||
const isWaveCharts = ref(false)
|
const isWaveCharts = ref(false)
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const wp = ref({})
|
const wp = ref({})
|
||||||
const boxoList: any = ref({})
|
const boxoList: any = ref({})
|
||||||
|
const title = ref('暂态事件')
|
||||||
const tableHeaderRef = ref()
|
const tableHeaderRef = ref()
|
||||||
|
const filterVisible = ref(false)
|
||||||
|
const filterTarget = ref('')
|
||||||
|
const multiConditionRef = ref<InstanceType<typeof MultiCondition>>()
|
||||||
|
|
||||||
|
const dictData = useDictData()
|
||||||
|
const ReasonList: any = dictData.getBasicData('Event_Reason')
|
||||||
|
const EventTypeList: any = dictData.getBasicData('Event_Type')
|
||||||
|
|
||||||
const options = ref()
|
|
||||||
const heightRef = ref(mainHeight(168, 2.2).height)
|
const heightRef = ref(mainHeight(168, 2.2).height)
|
||||||
const selectChange = (flag: boolean, h: any) => {
|
const tableParams = ref<any>({})
|
||||||
|
const selectChange = (_flag: boolean, h: number) => {
|
||||||
heightRef.value = mainHeight(h, 2.2).height
|
heightRef.value = mainHeight(h, 2.2).height
|
||||||
}
|
}
|
||||||
const eventList = [
|
|
||||||
{ label: '电压暂降', value: '1' },
|
|
||||||
{ label: '电压中断', value: '2' },
|
|
||||||
{ label: '电压暂升', value: '3' }
|
|
||||||
]
|
|
||||||
const getSimpleLineList = async () => {
|
|
||||||
const res = await getSimpleLine()
|
|
||||||
options.value = res.data
|
|
||||||
}
|
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-harmonic-boot/event/pageEvent',
|
url: '/cs-device-boot/csGroup/deviceDataByType',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
showPage: true,
|
showPage: true,
|
||||||
exportName: '主要监测点列表',
|
exportName: '暂态事件',
|
||||||
column: [
|
column: [
|
||||||
{
|
{
|
||||||
field: 'index',
|
|
||||||
title: '序号',
|
title: '序号',
|
||||||
width: '80',
|
width: 80,
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{ field: 'startTime', title: '发生时刻', minWidth: 180, sortable: true },
|
||||||
{
|
{
|
||||||
title: '暂态时间',
|
field: 'featureAmplitude',
|
||||||
field: 'startTime',
|
title: '暂降幅值(%)',
|
||||||
minWidth: '180'
|
minWidth: 120,
|
||||||
},
|
sortable: true,
|
||||||
{
|
|
||||||
title: '测点名称',
|
|
||||||
field: 'lineName',
|
|
||||||
minWidth: '150'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '暂态类型',
|
|
||||||
field: 'tag',
|
|
||||||
minWidth: '100'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '特征幅值(%)',
|
|
||||||
field: 'amplitude',
|
|
||||||
minWidth: '100'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '暂降深度(%)',
|
|
||||||
field: 'depth',
|
|
||||||
minWidth: '100',
|
|
||||||
formatter: (row: any) => {
|
formatter: (row: any) => {
|
||||||
// 当暂态类型不是电压暂升时,计算暂降深度 = 100 - 特征幅值
|
row.cellValue = row.cellValue != null ? Number(row.cellValue).toFixed(2) : '/'
|
||||||
if (row.row.tag !== '电压暂升') {
|
if (String(row.cellValue).split('.')[1] == '00') {
|
||||||
const amplitude = parseFloat(row.row.amplitude)
|
row.cellValue = String(row.cellValue).split('.')[0]
|
||||||
if (!isNaN(amplitude)) {
|
|
||||||
return 100 - amplitude
|
|
||||||
}
|
|
||||||
return '-'
|
|
||||||
} else {
|
|
||||||
// 电压暂升时不显示暂降深度
|
|
||||||
return '/'
|
|
||||||
}
|
}
|
||||||
|
return row.cellValue
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '持续时间(S)',
|
|
||||||
field: 'persistTime',
|
field: 'persistTime',
|
||||||
minWidth: '100'
|
title: '持续时间(s)',
|
||||||
|
minWidth: 110,
|
||||||
|
formatter: (row: any) => row.cellValue ? (row.cellValue - 0).toFixed(2) : '/',
|
||||||
|
sortable: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'phaseType',
|
||||||
|
title: '相别',
|
||||||
|
minWidth: 80,
|
||||||
|
formatter: (row: any) => row.cellValue || '/'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '严重度',
|
title: '严重度',
|
||||||
field: 'severity',
|
field: 'severity',
|
||||||
minWidth: '80'
|
minWidth: 80,
|
||||||
|
align: 'center',
|
||||||
|
sortable: true,
|
||||||
|
formatter: (row: any) => row.cellValue ? row.cellValue : '/'
|
||||||
|
},
|
||||||
|
{ field: 'showName', title: '触发类型', minWidth: 100 },
|
||||||
|
{
|
||||||
|
title: '暂降原因',
|
||||||
|
field: 'advanceReason',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => ReasonList.find((item: any) => item.id == row.cellValue)?.name || '其他'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '波形',
|
title: '暂降类型',
|
||||||
width: '90',
|
field: 'advanceType',
|
||||||
|
minWidth: 100,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => EventTypeList.find((item: any) => item.id == row.cellValue)?.name || '其他'
|
||||||
|
},
|
||||||
|
{ title: '电压等级(kV)', field: 'lineVoltage', minWidth: 120, align: 'center', sortable: true },
|
||||||
|
{
|
||||||
|
title: '发生位置',
|
||||||
|
field: 'sagSource',
|
||||||
|
minWidth: 120,
|
||||||
|
align: 'center',
|
||||||
|
formatter: (row: any) => row.cellValue == 1 ? '上游' : row.cellValue == 2 ? '下游' : '暂无'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
fixed: 'right',
|
||||||
|
width: 150,
|
||||||
render: 'buttons',
|
render: 'buttons',
|
||||||
buttons: [
|
buttons: [
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
text: '波形分析',
|
text: '暂无波形',
|
||||||
type: 'primary',
|
type: 'info',
|
||||||
icon: 'el-icon-DataLine',
|
icon: 'el-icon-DataLine',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
loading: 'loading1',
|
|
||||||
disabled: row => {
|
disabled: row => {
|
||||||
return !row.wavePath
|
return row.wavePath
|
||||||
},
|
}
|
||||||
|
},
|
||||||
click: async row => {
|
{
|
||||||
|
name: 'edit',
|
||||||
|
title: '波形分析',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'el-icon-Check',
|
||||||
|
render: 'basicButton',
|
||||||
|
loading: 'loading1',
|
||||||
|
disabled: (row: any) => !row.wavePath,
|
||||||
|
click: async (row: any) => {
|
||||||
row.loading1 = true
|
row.loading1 = true
|
||||||
|
|
||||||
// 在打开弹窗时立即设置高度
|
|
||||||
nextTick(() => {
|
|
||||||
if (waveFormAnalysisRef.value) {
|
|
||||||
// waveFormAnalysisRef.value.setHeight(false, 360)
|
|
||||||
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
await analyseWave(row.id)
|
await analyseWave(row.id)
|
||||||
.then(res => {
|
.then(res => {
|
||||||
loading.value = true
|
|
||||||
isWaveCharts.value = true
|
|
||||||
dialogVisible.value = false
|
|
||||||
|
|
||||||
row.loading1 = false
|
row.loading1 = false
|
||||||
if (res != undefined) {
|
if (res != undefined) {
|
||||||
boxoList.value = row
|
loading.value = true
|
||||||
// boxoList.value = {
|
isWaveCharts.value = true
|
||||||
// ...row,
|
dialogVisible.value = false
|
||||||
// duration: row.persistTime // 将 persistTime 值赋给 duration
|
boxoList.value = {
|
||||||
// }
|
...row,
|
||||||
// boxoList.value.featureAmplitude =
|
systemType: 'YPT',
|
||||||
// row.evtParamVVaDepth != '-' ? row.evtParamVVaDepth - 0 : null
|
engineeringName: tableParams.value.projectName,
|
||||||
boxoList.value.featureAmplitude = (row.amplitude - 0) / 100
|
featureAmplitude:
|
||||||
boxoList.value.systemType = 'YPT'
|
row.featureAmplitude != null ? Number(row.featureAmplitude / 100) : '-',
|
||||||
|
persistTime: row.persistTime ? row.persistTime.toFixed(2) : '-',
|
||||||
|
}
|
||||||
wp.value = res.data
|
wp.value = res.data
|
||||||
}
|
}
|
||||||
loading.value = false
|
loading.value = false
|
||||||
@@ -202,34 +184,108 @@ const tableStore: any = new TableStore({
|
|||||||
})
|
})
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
waveFormAnalysisRef.value &&
|
if (waveFormAnalysisRef.value) {
|
||||||
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value, true)
|
waveFormAnalysisRef.value.getWpData(wp.value, boxoList.value)
|
||||||
|
waveFormAnalysisRef.value.setHeight(999, 130, 1.6666666)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'edit',
|
name: 'edit',
|
||||||
text: '暂无波形',
|
title: '波形下载',
|
||||||
type: 'info',
|
type: 'primary',
|
||||||
icon: 'el-icon-DataLine',
|
loading: 'loading2',
|
||||||
|
icon: 'el-icon-Check',
|
||||||
render: 'basicButton',
|
render: 'basicButton',
|
||||||
disabled: row => {
|
disabled: (row: any) => !row.wavePath,
|
||||||
return !!row.wavePath
|
click: (row: any) => {
|
||||||
|
row.loading2 = true
|
||||||
|
ElMessage.info('下载中......')
|
||||||
|
getFileZip({ eventId: row.id }).then(res => {
|
||||||
|
const blob = new Blob([res as unknown as BlobPart], { type: 'application/zip' })
|
||||||
|
const url = window.URL.createObjectURL(blob)
|
||||||
|
const link = document.createElement('a')
|
||||||
|
link.href = url
|
||||||
|
link.download = buildWaveExportFileName(getExportSubjectFromRow(row))
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
ElMessage.success('波形下载成功')
|
||||||
|
row.loading2 = false
|
||||||
|
}).catch(() => {
|
||||||
|
row.loading2 = false
|
||||||
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
beforeSearchFun: () => {},
|
beforeSearchFun: () => {
|
||||||
loadCallback: () => {}
|
tableStore.table.params.devId = tableParams.value.devId
|
||||||
|
tableStore.table.params.lineId = tableParams.value.lineId
|
||||||
|
tableStore.table.params.list = tableParams.value.list
|
||||||
|
tableStore.table.params.type = 3
|
||||||
|
},
|
||||||
|
loadCallback: () => { }
|
||||||
})
|
})
|
||||||
tableStore.table.params.eventType = ''
|
tableStore.table.params.type = 3
|
||||||
|
Object.assign(tableStore.table.params, {
|
||||||
|
featureAmplitudeMin: undefined,
|
||||||
|
featureAmplitudeMax: undefined,
|
||||||
|
evtParamTmMin: undefined,
|
||||||
|
evtParamTmMax: undefined,
|
||||||
|
severityMin: undefined,
|
||||||
|
severityMax: undefined,
|
||||||
|
fileFlag: ''
|
||||||
|
})
|
||||||
|
|
||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
const open = async (row: any, searchBeginTime: any, searchEndTime: any) => {
|
|
||||||
tableStore.table.params.eventType = ''
|
const resetFilterParams = () => {
|
||||||
|
Object.assign(tableStore.table.params, {
|
||||||
|
featureAmplitudeMin: undefined,
|
||||||
|
featureAmplitudeMax: undefined,
|
||||||
|
evtParamTmMin: undefined,
|
||||||
|
evtParamTmMax: undefined,
|
||||||
|
severityMin: undefined,
|
||||||
|
severityMax: undefined,
|
||||||
|
fileFlag: ''
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const openFilterDialog = () => {
|
||||||
|
filterVisible.value = true
|
||||||
|
}
|
||||||
|
|
||||||
|
const onFilterConfirm = () => {
|
||||||
|
tableStore.onTableAction('search', {})
|
||||||
|
}
|
||||||
|
|
||||||
|
const onResetForm = () => {
|
||||||
|
filterVisible.value = false
|
||||||
|
resetFilterParams()
|
||||||
|
multiConditionRef.value?.reset()
|
||||||
|
tableStore.index()
|
||||||
|
}
|
||||||
|
|
||||||
|
const open = (row: any, searchBeginTime: any, searchEndTime: any, type?: string) => {
|
||||||
|
filterTarget.value = type || ''
|
||||||
|
title.value = row.name + '_暂态事件'
|
||||||
dialogVisible.value = true
|
dialogVisible.value = true
|
||||||
getSimpleLineList()
|
filterVisible.value = false
|
||||||
tableStore.table.params.lineId = row.id
|
resetFilterParams()
|
||||||
|
multiConditionRef.value?.reset()
|
||||||
|
|
||||||
|
const lineId = row.id || row.lineId
|
||||||
|
tableParams.value = {
|
||||||
|
lineId,
|
||||||
|
devId: row.devId,
|
||||||
|
engineeringName: row.engineeringName,
|
||||||
|
list: row.devId ? [{ lineId, devId: row.devId }] : undefined,
|
||||||
|
}
|
||||||
|
tableStore.table.params.pageNum = 1
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
|
tableHeaderRef.value.setTimeInterval([searchBeginTime, searchEndTime])
|
||||||
tableStore.table.params.searchBeginTime = searchBeginTime
|
tableStore.table.params.searchBeginTime = searchBeginTime
|
||||||
@@ -245,4 +301,5 @@ const handleHideCharts = () => {
|
|||||||
|
|
||||||
defineExpose({ open })
|
defineExpose({ open })
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped></style>
|
<style lang="scss" scoped></style>
|
||||||
|
|||||||
@@ -1,27 +1,14 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<!--暂态事件统计 -->
|
<!--暂态事件统计 -->
|
||||||
<TableHeader
|
<TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"
|
||||||
ref="TableHeaderRef"
|
:timeKeyList="prop.timeKey"></TableHeader>
|
||||||
:showReset="false"
|
<my-echart class="tall" :options="echartList" :style="{
|
||||||
@selectChange="selectChange"
|
width: prop.width,
|
||||||
datePicker
|
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
||||||
v-if="fullscreen" :timeKeyList="prop.timeKey"
|
}" />
|
||||||
></TableHeader>
|
<Table ref="tableRef" @cell-click="cellClickEvent"
|
||||||
<my-echart
|
:height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`" isGroup></Table>
|
||||||
class="tall"
|
|
||||||
:options="echartList"
|
|
||||||
:style="{
|
|
||||||
width: prop.width,
|
|
||||||
height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
|
|
||||||
}"
|
|
||||||
/>
|
|
||||||
<Table
|
|
||||||
ref="tableRef"
|
|
||||||
@cell-click="cellClickEvent"
|
|
||||||
:height="`calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`"
|
|
||||||
isGroup
|
|
||||||
></Table>
|
|
||||||
<TransientStatisticsDetail ref="transientStatisticsDetailRef"></TransientStatisticsDetail>
|
<TransientStatisticsDetail ref="transientStatisticsDetailRef"></TransientStatisticsDetail>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -41,7 +28,7 @@ const prop = defineProps({
|
|||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
width: { type: [String, Number] },
|
width: { type: [String, Number] },
|
||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number }
|
||||||
})
|
})
|
||||||
@@ -129,7 +116,11 @@ const eventEcharts = () => {
|
|||||||
title: [
|
title: [
|
||||||
{
|
{
|
||||||
text: '暂态事件统计',
|
text: '暂态事件统计',
|
||||||
left: 'center'
|
left: 'center',
|
||||||
|
textStyle: {
|
||||||
|
color: '#000',
|
||||||
|
fontSize: '15'
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
text: rawData.eventOff + rawData.eventDown + rawData.eventUp + '次',
|
text: rawData.eventOff + rawData.eventDown + rawData.eventUp + '次',
|
||||||
@@ -173,15 +164,30 @@ const tableStore: any = new TableStore({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '监测点名称',
|
||||||
field: 'name',
|
field: 'name',
|
||||||
minWidth: '90'
|
minWidth: 150
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '设备名称', field: 'devName', minWidth: 150, align: 'center', formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '项目名称', field: 'projectName', minWidth: 150, align: 'center', formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '工程名称', field: 'engineeringName', minWidth: 150, align: 'center', formatter: (row: any) => {
|
||||||
|
return row.cellValue || '/'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
{
|
{
|
||||||
title: '电压中断(次)',
|
title: '电压中断(次)',
|
||||||
field: 'eventOff',
|
field: 'eventOff',
|
||||||
minWidth: '70',
|
minWidth: '90',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
@@ -191,7 +197,7 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '电压暂降(次)',
|
title: '电压暂降(次)',
|
||||||
field: 'eventDown',
|
field: 'eventDown',
|
||||||
minWidth: '80',
|
minWidth: '90',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
@@ -201,7 +207,7 @@ const tableStore: any = new TableStore({
|
|||||||
{
|
{
|
||||||
title: '电压暂升(次)',
|
title: '电压暂升(次)',
|
||||||
field: 'eventUp',
|
field: 'eventUp',
|
||||||
minWidth: '80',
|
minWidth: '90',
|
||||||
sortable: true,
|
sortable: true,
|
||||||
render: 'customTemplate',
|
render: 'customTemplate',
|
||||||
customTemplate: (row: any) => {
|
customTemplate: (row: any) => {
|
||||||
@@ -224,11 +230,13 @@ provide('tableStore', tableStore)
|
|||||||
|
|
||||||
// 点击行
|
// 点击行
|
||||||
const cellClickEvent = ({ row, column }: any) => {
|
const cellClickEvent = ({ row, column }: any) => {
|
||||||
if (column.field != 'name') {
|
if (column.field != 'name' && column.field != 'devName' && column.field != 'projectName' && column.field != 'engineeringName') {
|
||||||
transientStatisticsDetailRef.value.open(
|
transientStatisticsDetailRef.value.open(
|
||||||
row,
|
row,
|
||||||
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
tableStore.table.params.searchBeginTime || prop.timeValue?.[0],
|
||||||
tableStore.table.params.searchEndTime || prop.timeValue?.[1]
|
tableStore.table.params.searchEndTime || prop.timeValue?.[1],
|
||||||
|
column.field=='eventOff'?'中断':column.field=='eventDown'?'暂降':column.field=='eventUp'?'暂升':''
|
||||||
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="device-control">
|
||||||
<!--趋势对比 -->
|
<!--趋势对比 -->
|
||||||
<TableHeader
|
<div v-show="fullscreen">
|
||||||
datePicker
|
<!-- <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree> -->
|
||||||
ref="TableHeaderRef"
|
<APFTree :height="flag ? 126 : 70" @node-click="handleNodeClick" @init="handleNodeClick"></APFTree>
|
||||||
:timeKeyList="prop.timeKey"
|
</div>
|
||||||
:showReset="false"
|
<div>
|
||||||
@selectChange="selectChange"
|
|
||||||
v-if="fullscreen"
|
<TableHeader datePicker ref="TableHeaderRef" :timeKeyList="prop.timeKey" :showReset="false"
|
||||||
>
|
@selectChange="selectChange" v-if="fullscreen">
|
||||||
<template v-slot:select>
|
<template v-slot:select>
|
||||||
<el-form-item label="监测对象">
|
<!-- <el-form-item label="监测对象">
|
||||||
<el-select
|
<el-select filterable v-model="tableStore.table.params.sensitiveUserId" placeholder="请选择监测对象"
|
||||||
filterable
|
clearable>
|
||||||
v-model="tableStore.table.params.sensitiveUserId"
|
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
||||||
placeholder="请选择监测对象"
|
</el-select>
|
||||||
clearable
|
</el-form-item> -->
|
||||||
>
|
<!-- <el-form-item label="监测点名称">
|
||||||
<el-option v-for="item in idList" :key="item.id" :label="item.name" :value="item.id" />
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<!-- <el-form-item label="监测点名称">
|
|
||||||
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称" clearable>
|
<el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点名称" clearable>
|
||||||
<el-option
|
<el-option
|
||||||
v-for="item in lineIdList"
|
v-for="item in lineIdList"
|
||||||
@@ -30,57 +26,45 @@
|
|||||||
/>
|
/>
|
||||||
</el-select>
|
</el-select>
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<el-form-item label="电能质量指标">
|
<el-form-item label="电能质量指标">
|
||||||
<el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
|
<el-select v-model="tableStore.table.params.indicator" placeholder="请选择电能质量指标" clearable>
|
||||||
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name" :value="item.id" />
|
<el-option v-for="item in indicatorList" :key="item.id" :label="item.name"
|
||||||
</el-select>
|
:value="item.id" />
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<el-radio-group v-model="tableStore.table.params.dataLevel">
|
|
||||||
<el-radio-button label="一次值" value="Primary" />
|
|
||||||
<el-radio-button label="二次值" value="Secondary" />
|
|
||||||
</el-radio-group>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item label="统计类型">
|
|
||||||
<el-select
|
|
||||||
style="min-width: 120px !important"
|
|
||||||
placeholder="请选择"
|
|
||||||
v-model="tableStore.table.params.valueType"
|
|
||||||
>
|
|
||||||
<el-option value="max" label="最大值"></el-option>
|
|
||||||
<el-option value="min" label="最小值"></el-option>
|
|
||||||
<el-option value="avg" label="平均值"></el-option>
|
|
||||||
<el-option value="cp95" label="cp95"></el-option>
|
|
||||||
</el-select>
|
|
||||||
</el-form-item>
|
|
||||||
<el-form-item>
|
|
||||||
<div v-if="shouldShowHarmonicCount()" style="display: flex; color: var(--el-text-color-regular)">
|
|
||||||
<span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
|
|
||||||
<el-select
|
|
||||||
v-model="tableStore.table.params.harmonicCount"
|
|
||||||
placeholder="请选择谐波次数"
|
|
||||||
style="min-width: 80px !important"
|
|
||||||
>
|
|
||||||
<el-option
|
|
||||||
v-for="num in harmonicCountOptions"
|
|
||||||
:key="num"
|
|
||||||
:label="num"
|
|
||||||
:value="num"
|
|
||||||
></el-option>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</el-form-item>
|
||||||
</el-form-item>
|
<el-form-item>
|
||||||
</template>
|
<el-radio-group v-model="tableStore.table.params.dataLevel" @change="tableStore.index()">
|
||||||
</TableHeader>
|
<el-radio-button label="一次值" value="Primary" />
|
||||||
<my-echart
|
<el-radio-button label="二次值" value="Secondary" />
|
||||||
v-loading="tableStore.table.loading"
|
</el-radio-group>
|
||||||
class="tall"
|
</el-form-item>
|
||||||
:options="echartList"
|
<el-form-item label="统计类型">
|
||||||
:style="{
|
<el-select style="min-width: 120px !important" placeholder="请选择"
|
||||||
width: prop.width,
|
v-model="tableStore.table.params.valueType">
|
||||||
|
<el-option value="max" label="最大值"></el-option>
|
||||||
|
<el-option value="min" label="最小值"></el-option>
|
||||||
|
<el-option value="avg" label="平均值"></el-option>
|
||||||
|
<el-option value="cp95" label="cp95"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<div v-if="shouldShowHarmonicCount()"
|
||||||
|
style="display: flex; color: var(--el-text-color-regular)">
|
||||||
|
<span style="width: 160px">{{ getHarmonicTypeName() }}谐波次数</span>
|
||||||
|
<el-select v-model="tableStore.table.params.harmonicCount" placeholder="请选择谐波次数"
|
||||||
|
style="min-width: 80px !important">
|
||||||
|
<el-option v-for="num in harmonicCountOptions" :key="num" :label="num"
|
||||||
|
:value="num"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</TableHeader>
|
||||||
|
<my-echart v-loading="tableStore.table.loading" class="tall" :options="echartList" :style="{
|
||||||
|
width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
|
||||||
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
|
||||||
}"
|
}" />
|
||||||
/>
|
</div>
|
||||||
<!-- <el-empty description="暂无数据" /> -->
|
<!-- <el-empty description="暂无数据" /> -->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@@ -93,8 +77,8 @@ import { useConfig } from '@/stores/config'
|
|||||||
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
|
||||||
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
import { getListByIds } from '@/api/harmonic-boot/cockpit/cockpit'
|
||||||
import { getTime } from '@/utils/formatTime'
|
import { getTime } from '@/utils/formatTime'
|
||||||
import { yMethod, exportCSV } from '@/utils/echartMethod'
|
import { yMethod, exportSeriesCSV, completeTimeSeries } from '@/utils/echartMethod'
|
||||||
import { max } from 'lodash'
|
import APFTree from '@/components/tree/govern/APFTree.vue'
|
||||||
const prop = defineProps({
|
const prop = defineProps({
|
||||||
w: { type: [String, Number] },
|
w: { type: [String, Number] },
|
||||||
h: { type: [String, Number] },
|
h: { type: [String, Number] },
|
||||||
@@ -102,7 +86,8 @@ const prop = defineProps({
|
|||||||
height: { type: [String, Number] },
|
height: { type: [String, Number] },
|
||||||
timeKey: { type: Array as () => string[] },
|
timeKey: { type: Array as () => string[] },
|
||||||
timeValue: { type: Object },
|
timeValue: { type: Object },
|
||||||
interval: { type: Number }
|
interval: { type: Number },
|
||||||
|
flag: { type: Boolean }
|
||||||
})
|
})
|
||||||
|
|
||||||
const TableHeaderRef = ref()
|
const TableHeaderRef = ref()
|
||||||
@@ -125,6 +110,7 @@ const harmonicCountOptions = ref(Array.from({ length: 49 }, (_, i) => i + 2))
|
|||||||
const indicatorList = ref()
|
const indicatorList = ref()
|
||||||
|
|
||||||
const echartList = ref()
|
const echartList = ref()
|
||||||
|
const timeControl = ref(false)
|
||||||
|
|
||||||
const headerHeight = ref(57)
|
const headerHeight = ref(57)
|
||||||
|
|
||||||
@@ -136,12 +122,30 @@ const initListByIds = () => {
|
|||||||
getListByIds({}).then((res: any) => {
|
getListByIds({}).then((res: any) => {
|
||||||
if (res.data?.length > 0) {
|
if (res.data?.length > 0) {
|
||||||
idList.value = res.data
|
idList.value = res.data
|
||||||
initCode()
|
|
||||||
} else {
|
} else {
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const exportSubjectName = ref('')
|
||||||
|
|
||||||
|
const handleNodeClick = async (data: any) => {
|
||||||
|
|
||||||
|
|
||||||
|
if (data?.level == 3 || data?.level == 2) {
|
||||||
|
exportSubjectName.value = data.name || ''
|
||||||
|
tableStore.exportName = { subject: exportSubjectName.value, feature: '趋势对比' }
|
||||||
|
tableStore.table.params.sensitiveUserId = data.id
|
||||||
|
await tableStore.index()
|
||||||
|
} else {
|
||||||
|
tableStore.table.loading = false
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
|
||||||
headerHeight.value = height
|
headerHeight.value = height
|
||||||
|
|
||||||
@@ -158,7 +162,7 @@ const initCode = () => {
|
|||||||
indicatorList.value = item.data
|
indicatorList.value = item.data
|
||||||
tableStore.table.params.indicator = indicatorList.value[0].id
|
tableStore.table.params.indicator = indicatorList.value[0].id
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
tableStore.index()
|
// tableStore.index()
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -192,7 +196,7 @@ const setEchart = () => {
|
|||||||
if (!afterGroupedByPhase[phase]) {
|
if (!afterGroupedByPhase[phase]) {
|
||||||
afterGroupedByPhase[phase] = []
|
afterGroupedByPhase[phase] = []
|
||||||
}
|
}
|
||||||
afterGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'dotted'])
|
afterGroupedByPhase[phase].push([item.time, item.statisticalData, item.unit, 'dashed'])
|
||||||
})
|
})
|
||||||
|
|
||||||
// 构建系列数据
|
// 构建系列数据
|
||||||
@@ -211,7 +215,7 @@ const setEchart = () => {
|
|||||||
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
||||||
|
|
||||||
series.push({
|
series.push({
|
||||||
name: `治理前${phaseName}`,
|
name: `${phaseName}_治理前`,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
smooth: true,
|
smooth: true,
|
||||||
@@ -224,7 +228,6 @@ const setEchart = () => {
|
|||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'solid', // 实线
|
type: 'solid', // 实线
|
||||||
width: 2 // 线条宽度
|
|
||||||
},
|
},
|
||||||
yAxisIndex: 0
|
yAxisIndex: 0
|
||||||
})
|
})
|
||||||
@@ -236,12 +239,12 @@ const setEchart = () => {
|
|||||||
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
const color = phaseColors[phase] || config.layout.elementUiPrimary[0]
|
||||||
|
|
||||||
series.push({
|
series.push({
|
||||||
name: `治理后${phaseName}`,
|
name: `${phaseName}_治理后`,
|
||||||
type: 'line',
|
type: 'line',
|
||||||
showSymbol: false,
|
showSymbol: false,
|
||||||
smooth: true,
|
smooth: true,
|
||||||
symbol: 'none',
|
symbol: 'none',
|
||||||
data: afterGroupedByPhase[phase],
|
data: timeControl.value ? completeTimeSeries(afterGroupedByPhase[phase]) : afterGroupedByPhase[phase],
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
normal: {
|
normal: {
|
||||||
color: color
|
color: color
|
||||||
@@ -249,7 +252,6 @@ const setEchart = () => {
|
|||||||
},
|
},
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
type: 'dashed', // 虚线
|
type: 'dashed', // 虚线
|
||||||
width: 2 // 线条宽度
|
|
||||||
},
|
},
|
||||||
yAxisIndex: 0
|
yAxisIndex: 0
|
||||||
})
|
})
|
||||||
@@ -258,9 +260,9 @@ const setEchart = () => {
|
|||||||
// 获取指标名称用于图表标题
|
// 获取指标名称用于图表标题
|
||||||
let titleText = '治理前后对比'
|
let titleText = '治理前后对比'
|
||||||
if (beforeData.length > 0 && beforeData[0].anotherName) {
|
if (beforeData.length > 0 && beforeData[0].anotherName) {
|
||||||
titleText = beforeData[0].anotherName
|
titleText = beforeData[0].anotherName+'治理前后对比'
|
||||||
} else if (afterData.length > 0 && afterData[0].anotherName) {
|
} else if (afterData.length > 0 && afterData[0].anotherName) {
|
||||||
titleText = afterData[0].anotherName
|
titleText = afterData[0].anotherName+'治理前后对比'
|
||||||
}
|
}
|
||||||
|
|
||||||
// statisticalData
|
// statisticalData
|
||||||
@@ -285,9 +287,9 @@ const setEchart = () => {
|
|||||||
|
|
||||||
return {
|
return {
|
||||||
name: item.name,
|
name: item.name,
|
||||||
icon: isBefore
|
// icon: isBefore
|
||||||
? 'rect'
|
// ? 'rect'
|
||||||
: 'path://M0,2 L8,2 L8,6 L0,6 Z M12,2 L20,2 L20,6 L12,6 Z M24,2 L32,2 L32,6 L24,6 Z M36,2 L44,2 L44,6 L36,6 Z', // 矩形组成的粗虚线
|
// : 'path://M0,2 L8,2 L8,6 L0,6 Z M12,2 L20,2 L20,6 L12,6 Z M24,2 L32,2 L32,6 L24,6 Z M36,2 L44,2 L44,6 L36,6 Z', // 矩形组成的粗虚线
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
color: color // 明确指定图例图标的颜色
|
color: color // 明确指定图例图标的颜色
|
||||||
},
|
},
|
||||||
@@ -297,11 +299,16 @@ const setEchart = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
let [min, max] = yMethod(
|
let [min, max] = yMethod(
|
||||||
[...chartsListBefore.value.map((item: any) => item.statisticalData),
|
[...chartsListBefore.value.map((item: any) => item.statisticalData),
|
||||||
...chartsListAfter.value.map((item: any) => item.statisticalData)]
|
...chartsListAfter.value.map((item: any) => item.statisticalData)]
|
||||||
)
|
)
|
||||||
echartList.value = {
|
echartList.value = {
|
||||||
|
exportFileName: {
|
||||||
|
subject: exportSubjectName.value,
|
||||||
|
feature: '趋势对比',
|
||||||
|
date: tableStore.table.params.searchEndTime || tableStore.table.params.searchBeginTime
|
||||||
|
},
|
||||||
title: {
|
title: {
|
||||||
text: titleText
|
text: titleText
|
||||||
},
|
},
|
||||||
@@ -326,21 +333,28 @@ const setEchart = () => {
|
|||||||
let str = `${xname}<br>`
|
let str = `${xname}<br>`
|
||||||
params.forEach((el: any, index: any) => {
|
params.forEach((el: any, index: any) => {
|
||||||
let marker = ''
|
let marker = ''
|
||||||
|
if (el.value[3] == 'dashed') {
|
||||||
|
for (let i = 0; i < 3; i++) {
|
||||||
|
marker += `<span style="display:inline-block;border: 2px ${el.color} solid;margin-right:5px;width:10px;height:0px;background-color:#ffffff00;"></span>`
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`//`<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
|
||||||
|
|
||||||
marker = `<span style="display:inline-block;border: 2px ${el.color} ${el.value[3]};margin-right:5px;width:40px;height:0px;background-color:#ffffff00;"></span>`
|
}
|
||||||
|
|
||||||
str += `${marker}${el.seriesName.split('(')[0]}:${
|
str += `${marker}${el.seriesName.split('(')[0]}:${el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == null ? '' : el.value[2]) : '-'
|
||||||
el.value[1] != null ? el.value[1] + ' ' + (el.value[2] == null ? '' : el.value[2]) : '-'
|
}<br>`
|
||||||
}<br>`
|
|
||||||
})
|
})
|
||||||
return str
|
return str
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
data: legendData,
|
data: legendData,
|
||||||
icon: 'rect',
|
// icon: 'rect',
|
||||||
itemWidth: 18,
|
itemWidth: 18,
|
||||||
itemHeight: 3,
|
itemHeight: 3,
|
||||||
|
type: 'scroll',
|
||||||
|
|
||||||
itemStyle: {
|
itemStyle: {
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
@@ -367,10 +381,36 @@ const setEchart = () => {
|
|||||||
left: '10px',
|
left: '10px',
|
||||||
right: '20px'
|
right: '20px'
|
||||||
},
|
},
|
||||||
|
toolbox: {
|
||||||
|
featureProps: {
|
||||||
|
myTool1: {
|
||||||
|
show: true,
|
||||||
|
title: '下载csv',
|
||||||
|
icon: 'path://M642 673.1H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9s-8 17.9-17.9 17.9zM642 511.8H301.6c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9H642c9.9 0 17.9 8 17.9 17.9 0 9.9-8 17.9-17.9 17.9zM480.7 350.6H301.6c-9.9 0-17.9-8-17.9-17.9s8-17.9 17.9-17.9h179.2c9.9 0 17.9 8 17.9 17.9s-8.1 17.9-18 17.9zM874.9 350.6H695.7c-49.4 0-89.6-40.2-89.6-89.6V81.9c0-9.9 8-17.9 17.9-17.9 9.9 0 17.9 8 17.9 17.9V261c0 29.6 24.1 53.7 53.7 53.7h179.2c9.9 0 17.9 8 17.9 17.9s-7.9 18-17.8 18zM794.3 959.7H221c-49.4 0-89.6-40.2-89.6-89.6V153.5c0-49.4 40.2-89.6 89.6-89.6h403.1c4.8 0 9.3 1.9 12.7 5.2L887.6 320c3.4 3.4 5.2 7.9 5.2 12.7v537.5c0 52.7-51.9 89.5-98.5 89.5zM221 99.8c-29.6 0-53.7 24.1-53.7 53.7v716.6c0 29.6 24.1 53.7 53.7 53.7h573.3c29 0 62.7-23.5 62.7-53.7v-530L616.7 99.8H221z',
|
||||||
|
onclick: () => {
|
||||||
|
exportSeriesCSV(echartList.value.series, echartList.value.exportFileName)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
myTool2: {
|
||||||
|
show: true,
|
||||||
|
title: timeControl.value ? '关闭缺失数据' : '缺失数据',
|
||||||
|
icon: 'path://M832 512l-192-192v128H128v128h512v128l192-192zM192 512l192 192v-128h512v-128H384V320L192 512z',
|
||||||
|
iconStyle: timeControl.value ? { borderColor: '#409EFF' } : {},
|
||||||
|
onclick: () => {
|
||||||
|
setTimeControl()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
series: series
|
series: series
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const setTimeControl = () => {
|
||||||
|
timeControl.value = !timeControl.value
|
||||||
|
setEchart()
|
||||||
|
}
|
||||||
|
|
||||||
const tableStore: any = new TableStore({
|
const tableStore: any = new TableStore({
|
||||||
url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
|
url: '/cs-device-boot/csGroup/sensitiveUserTrendData',
|
||||||
method: 'POST',
|
method: 'POST',
|
||||||
@@ -379,9 +419,9 @@ const tableStore: any = new TableStore({
|
|||||||
column: [],
|
column: [],
|
||||||
beforeSearchFun: () => {
|
beforeSearchFun: () => {
|
||||||
setTime()
|
setTime()
|
||||||
if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
|
// if (!tableStore.table.params.sensitiveUserId && idList.value?.length > 0) {
|
||||||
tableStore.table.params.sensitiveUserId = idList.value[0].id
|
// tableStore.table.params.sensitiveUserId = idList.value[0].id
|
||||||
}
|
// }
|
||||||
let lists: any = []
|
let lists: any = []
|
||||||
// 处理电能质量指标
|
// 处理电能质量指标
|
||||||
const selectedIndicator = indicatorList.value?.find(
|
const selectedIndicator = indicatorList.value?.find(
|
||||||
@@ -420,7 +460,8 @@ tableStore.table.params.valueType = 'avg'
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
initListByIds()
|
initCode()
|
||||||
|
// initListByIds()
|
||||||
})
|
})
|
||||||
|
|
||||||
const setTime = () => {
|
const setTime = () => {
|
||||||
@@ -504,4 +545,11 @@ watch(
|
|||||||
// :deep(.el-select) {
|
// :deep(.el-select) {
|
||||||
// min-width: 80px;
|
// min-width: 80px;
|
||||||
// }
|
// }
|
||||||
|
.device-control {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.cn-tree) {
|
||||||
|
padding: 0 10px 0 0 !important;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -13,6 +13,7 @@ import 'echarts-liquidfill'
|
|||||||
import 'echarts/lib/component/dataZoom'
|
import 'echarts/lib/component/dataZoom'
|
||||||
import { color, gradeColor3 } from './color'
|
import { color, gradeColor3 } from './color'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
|
import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
|
||||||
// import { nextTick } from 'process'
|
// import { nextTick } from 'process'
|
||||||
|
|
||||||
const emit = defineEmits(['chartClick'])
|
const emit = defineEmits(['chartClick'])
|
||||||
@@ -43,9 +44,10 @@ const initChart = () => {
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
color: '#000',
|
color: '#000',
|
||||||
|
top: 5,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
color: '#000',
|
color: '#000',
|
||||||
fontSize: '18'
|
fontSize: '15'
|
||||||
},
|
},
|
||||||
// },
|
// },
|
||||||
...(props.options?.title || null)
|
...(props.options?.title || null)
|
||||||
@@ -66,11 +68,13 @@ const initChart = () => {
|
|||||||
},
|
},
|
||||||
toolbox: {
|
toolbox: {
|
||||||
right: 20,
|
right: 20,
|
||||||
top: 15,
|
top: props.options?.title?.text ? 20 : 0,
|
||||||
feature: {
|
feature: {
|
||||||
saveAsImage: {
|
saveAsImage: {
|
||||||
title: '下载图片',
|
title: '下载图片',
|
||||||
name: props.options?.title?.text || '图表'
|
name: props.options?.exportFileName
|
||||||
|
? buildExportBaseName(props.options.exportFileName)
|
||||||
|
: ((props.options?.title?.text || '图表') + '_' + formatExportDateTime())
|
||||||
},
|
},
|
||||||
...(props.options?.toolbox?.featureProps || null)
|
...(props.options?.toolbox?.featureProps || null)
|
||||||
},
|
},
|
||||||
@@ -78,10 +82,11 @@ const initChart = () => {
|
|||||||
...(props.options?.toolbox || null)
|
...(props.options?.toolbox || null)
|
||||||
},
|
},
|
||||||
legend: {
|
legend: {
|
||||||
right: 50,
|
right: 100,
|
||||||
top: 25,
|
top: props.options?.title?.text ? 25 : 5,
|
||||||
itemGap: 10,
|
itemGap: 10,
|
||||||
itemStyle: {},
|
itemStyle: {},
|
||||||
|
type: 'scroll', // 开启滚动分页
|
||||||
// textStyle: {
|
// textStyle: {
|
||||||
fontSize: 12,
|
fontSize: 12,
|
||||||
// padding: [2, 0, 0, 0], //[上、右、下、左]
|
// padding: [2, 0, 0, 0], //[上、右、下、左]
|
||||||
@@ -91,7 +96,7 @@ const initChart = () => {
|
|||||||
...(props.options?.legend || null)
|
...(props.options?.legend || null)
|
||||||
},
|
},
|
||||||
grid: {
|
grid: {
|
||||||
top: '50px',
|
top: props.options?.title?.text ? '50px' : '25px',
|
||||||
left: '30px',
|
left: '30px',
|
||||||
right: '70px',
|
right: '70px',
|
||||||
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
|
||||||
@@ -128,7 +133,7 @@ const initChart = () => {
|
|||||||
],
|
],
|
||||||
color: props.options?.color || color,
|
color: props.options?.color || color,
|
||||||
series: props.options?.series,
|
series: props.options?.series,
|
||||||
...props.options?.options
|
...setStep(props.options?.options)
|
||||||
}
|
}
|
||||||
// console.log(options.series,"获取x轴");
|
// console.log(options.series,"获取x轴");
|
||||||
handlerBar(options)
|
handlerBar(options)
|
||||||
@@ -246,6 +251,21 @@ const handlerXAxis = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// const setStep = (name: string) => {
|
||||||
|
// const isShanBian = name.includes('闪变')
|
||||||
|
// return isShanBian ? { step: 'end' as const } : { }
|
||||||
|
// }
|
||||||
|
const setStep = (options: any) => {
|
||||||
|
if(options?.series){
|
||||||
|
options.series.forEach((item: any) => {
|
||||||
|
if(item.type === 'line' && item.name.includes('闪变')){
|
||||||
|
item.step = 'end'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return options
|
||||||
|
}
|
||||||
|
|
||||||
let throttle: ReturnType<typeof setTimeout>
|
let throttle: ReturnType<typeof setTimeout>
|
||||||
// 动态计算table高度
|
// 动态计算table高度
|
||||||
|
|||||||
@@ -1,4 +1,19 @@
|
|||||||
export let color = [ '#07CCCA','#00BFF5', '#FFBF00', '#77DA63', '#Ff6600', '#FF9100', '#5B6E96', '#66FFCC', '#B3B3B3']
|
export let color = ['#07CCCA', '#00BFF5', '#FFBF00', '#77DA63', '#Ff6600', '#FF9100', '#5B6E96', '#66FFEC', '#B3B3B3', '#9B59B6', '#3498DB', '#2ECC71']
|
||||||
|
export let color1 = [
|
||||||
|
|
||||||
|
'#3B7DD8', // 蓝
|
||||||
|
'#5B5FC7', // 靛
|
||||||
|
'#8B5CF6', // 紫
|
||||||
|
'#B07CC6', // 淡紫
|
||||||
|
'#C060A8', // 玫红
|
||||||
|
'#D4A017', // 金
|
||||||
|
'#6AAF50', // 草绿
|
||||||
|
'#00A878', // 翠绿
|
||||||
|
'#7C9EB2', // 烟蓝
|
||||||
|
'#6B7B8C', // 板岩灰
|
||||||
|
'#00A8B5', // 青
|
||||||
|
'#A8A8A8' // 灰
|
||||||
|
]
|
||||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
|
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900','#996600','#A52a2a']
|
||||||
|
|
||||||
|
|||||||
@@ -236,7 +236,7 @@ const fliteWaveData = (wp, step, iphasicValue, isOpen) => {
|
|||||||
|
|
||||||
// 监听消息
|
// 监听消息
|
||||||
self.onmessage = function (e) {
|
self.onmessage = function (e) {
|
||||||
const { wp, isOpen, value, boxoList } = JSON.parse(e.data)
|
const { wp, isOpen, value, boxoList, requestId } = e.data
|
||||||
|
|
||||||
try {
|
try {
|
||||||
const iphasicValue = wp.iphasic || 1
|
const iphasicValue = wp.iphasic || 1
|
||||||
@@ -258,8 +258,8 @@ self.onmessage = function (e) {
|
|||||||
boxoList.measurementPointName +
|
boxoList.measurementPointName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
@@ -270,7 +270,7 @@ self.onmessage = function (e) {
|
|||||||
boxoList.equipmentName +
|
boxoList.equipmentName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
boxoList.evtParamVVaDepth +
|
boxoList.evtParamVVaDepth +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.evtParamTm +
|
boxoList.evtParamTm +
|
||||||
@@ -282,8 +282,8 @@ self.onmessage = function (e) {
|
|||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.persistTime +
|
boxoList.persistTime +
|
||||||
's'
|
's'
|
||||||
@@ -295,14 +295,15 @@ self.onmessage = function (e) {
|
|||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
}
|
}
|
||||||
// 发送处理结果回主线程
|
// 发送处理结果回主线程
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
|
requestId,
|
||||||
titles: titles,
|
titles: titles,
|
||||||
success: true,
|
success: true,
|
||||||
waveDatas,
|
waveDatas,
|
||||||
@@ -313,6 +314,7 @@ self.onmessage = function (e) {
|
|||||||
})
|
})
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
|
requestId,
|
||||||
success: false,
|
success: false,
|
||||||
error: error.message
|
error: error.message
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -14,9 +14,15 @@ import html2canvas from 'html2canvas'
|
|||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { calcRmsYAxisRange, formatAxisLabel } from '@/utils/chartAxisHelper'
|
||||||
import url from '@/assets/img/point.png'
|
import url from '@/assets/img/point.png'
|
||||||
import url2 from '@/assets/img/dw.png'
|
import url2 from '@/assets/img/dw.png'
|
||||||
const worker = ref<Worker | null>(null)
|
import { buildWaveCacheKey, getWaveCache, setWaveCache } from '@/utils/waveCache'
|
||||||
|
import { getRmsWorker, buildWorkerPayload } from '@/utils/waveWorkerPool'
|
||||||
|
import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
|
||||||
|
let waveRequestId = 0
|
||||||
|
const pendingCacheKeys = new Map<number, string>()
|
||||||
|
let rmsWorker: Worker | null = null
|
||||||
interface WaveData {
|
interface WaveData {
|
||||||
instantF: { max: number; min: number }
|
instantF: { max: number; min: number }
|
||||||
instantS: { max: number; min: number }
|
instantS: { max: number; min: number }
|
||||||
@@ -125,52 +131,61 @@ const vw = computed(() => '100%')
|
|||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.value,
|
() => props.value,
|
||||||
newVal => {
|
() => {
|
||||||
if (newVal == 2) {
|
query()
|
||||||
initWaves()
|
|
||||||
} else {
|
|
||||||
$('#wave1').remove()
|
|
||||||
initWaves()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.wp,
|
||||||
|
() => {
|
||||||
|
query()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const applyWorkerResult = (data: any) => {
|
||||||
|
titles.value = data.titles
|
||||||
|
waveDatas.value = data.waveDatas
|
||||||
|
time.value = data.time
|
||||||
|
type.value = data.type
|
||||||
|
severity.value = data.severity
|
||||||
|
iphasic.value = data.iphasic
|
||||||
|
|
||||||
|
if (Number(severity.value) < 0) {
|
||||||
|
severity.value = '/'
|
||||||
|
type.value = '/'
|
||||||
|
}
|
||||||
|
|
||||||
|
initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const zoomValue = document.body.style.getPropertyValue('zoom')
|
const zoomValue = document.body.style.getPropertyValue('zoom')
|
||||||
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
|
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
|
||||||
window.addEventListener('resize', handleResize)
|
window.addEventListener('resize', handleResize)
|
||||||
|
|
||||||
// 初始化 Web Worker
|
rmsWorker = getRmsWorker(data => {
|
||||||
worker.value = new Worker(new URL('./rmsWorker.js', import.meta.url))
|
if (data.requestId !== waveRequestId) return
|
||||||
worker.value.onmessage = e => {
|
if (!data.success) {
|
||||||
if (e.data.success) {
|
console.error('Worker error:', data.error)
|
||||||
const data = e.data
|
|
||||||
titles.value = data.titles
|
|
||||||
waveDatas.value = data.waveDatas
|
|
||||||
time.value = data.time
|
|
||||||
type.value = data.type
|
|
||||||
severity.value = data.severity
|
|
||||||
iphasic.value = data.iphasic
|
|
||||||
|
|
||||||
// 初始化波形图
|
|
||||||
initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
|
|
||||||
} else {
|
|
||||||
console.error('Worker error:', e.data.error)
|
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
return
|
||||||
}
|
}
|
||||||
}
|
const cacheKey = pendingCacheKeys.get(data.requestId)
|
||||||
|
if (cacheKey) {
|
||||||
|
setWaveCache(cacheKey, data)
|
||||||
|
pendingCacheKeys.delete(data.requestId)
|
||||||
|
}
|
||||||
|
applyWorkerResult(data)
|
||||||
|
})
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
setTimeout(() => {
|
query()
|
||||||
query()
|
|
||||||
}, 500)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
if (worker.value) {
|
|
||||||
worker.value.terminate()
|
|
||||||
}
|
|
||||||
backbxlb()
|
backbxlb()
|
||||||
window.removeEventListener('resize', handleResize)
|
window.removeEventListener('resize', handleResize)
|
||||||
})
|
})
|
||||||
@@ -187,7 +202,7 @@ const download = () => {
|
|||||||
scale: 2
|
scale: 2
|
||||||
}).then(function (canvas) {
|
}).then(function (canvas) {
|
||||||
const creatIMg = document.createElement('a')
|
const creatIMg = document.createElement('a')
|
||||||
creatIMg.download = 'rms波形.png'
|
creatIMg.download = (props.boxoList.lineName || props.boxoList.measurementPointName || props.boxoList.equipmentName) + '_RMS波形_' + formatExportDateTime() + '.png'
|
||||||
creatIMg.href = canvas.toDataURL()
|
creatIMg.href = canvas.toDataURL()
|
||||||
creatIMg.click()
|
creatIMg.click()
|
||||||
creatIMg.remove()
|
creatIMg.remove()
|
||||||
@@ -195,23 +210,15 @@ const download = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const EXTRA_PANEL_CLASS = 'wave-extra-panel'
|
||||||
|
|
||||||
|
const resetWaveDom = () => {
|
||||||
|
backbxlb()
|
||||||
|
$('#rmsp').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
|
||||||
|
}
|
||||||
|
|
||||||
const query = () => {
|
const query = () => {
|
||||||
loading.value = true
|
initWaves()
|
||||||
if (props.wp) {
|
|
||||||
// 使用 Worker 处理数据
|
|
||||||
if (worker.value) {
|
|
||||||
worker.value.postMessage(
|
|
||||||
JSON.stringify({
|
|
||||||
wp: props.wp,
|
|
||||||
isOpen: isOpen.value,
|
|
||||||
value: props.value,
|
|
||||||
boxoList: props.boxoList
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
initWave(null, null, null, null, null)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const waveData = (
|
const waveData = (
|
||||||
@@ -245,29 +252,31 @@ const waveData = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
const initWaves = () => {
|
const initWaves = () => {
|
||||||
if (props.wp) {
|
if (!props.wp?.listRmsData?.length) {
|
||||||
iphasic.value = props.wp.iphasic || 1
|
|
||||||
const picCounts = (props.wp.waveTitle.length - 1) / iphasic.value
|
|
||||||
waveDatas.value = []
|
|
||||||
|
|
||||||
for (let i = 0; i < picCounts; i++) {
|
|
||||||
const data = fliteWaveData(props.wp, i)
|
|
||||||
waveDatas.value.push(data)
|
|
||||||
}
|
|
||||||
|
|
||||||
time.value = props.wp.time
|
|
||||||
type.value = props.wp.waveType
|
|
||||||
severity.value = props.wp.yzd
|
|
||||||
|
|
||||||
if (Number(severity.value) < 0) {
|
|
||||||
severity.value = '/'
|
|
||||||
type.value = '/'
|
|
||||||
}
|
|
||||||
|
|
||||||
initWave(waveDatas.value, time.value, type.value, severity.value, isOpen.value)
|
|
||||||
} else {
|
|
||||||
initWave(null, null, null, null, null)
|
initWave(null, null, null, null, null)
|
||||||
|
loading.value = false
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const cacheKey = buildWaveCacheKey('rms', props.wp, props.value, isOpen.value, props.boxoList)
|
||||||
|
const cached = getWaveCache<any>(cacheKey)
|
||||||
|
if (cached) {
|
||||||
|
applyWorkerResult(cached)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
iphasic.value = props.wp.iphasic || 1
|
||||||
|
const currentRequestId = ++waveRequestId
|
||||||
|
pendingCacheKeys.set(currentRequestId, cacheKey)
|
||||||
|
|
||||||
|
rmsWorker?.postMessage(
|
||||||
|
buildWorkerPayload('rms', props.wp, props.boxoList, {
|
||||||
|
requestId: currentRequestId,
|
||||||
|
value: props.value,
|
||||||
|
isOpen: isOpen.value
|
||||||
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const fliteWaveData = (wp: any, step: number): WaveData => {
|
const fliteWaveData = (wp: any, step: number): WaveData => {
|
||||||
@@ -482,7 +491,7 @@ const initWave = (
|
|||||||
severity: string | null,
|
severity: string | null,
|
||||||
isOpen: boolean | null
|
isOpen: boolean | null
|
||||||
) => {
|
) => {
|
||||||
$('div.bx').remove()
|
resetWaveDom()
|
||||||
|
|
||||||
let picHeight = vh.value
|
let picHeight = vh.value
|
||||||
const show = !isOpen
|
const show = !isOpen
|
||||||
@@ -594,19 +603,25 @@ const initWave = (
|
|||||||
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
|
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
|
||||||
const rmsId = 'rms' + step
|
const rmsId = 'rms' + step
|
||||||
const newDivRms = $(
|
const newDivRms = $(
|
||||||
`<div style="height:${vh.value};overflow: hidden;min-height: 200px;"><div class='bx' id='${rmsId}'></div></div>`
|
`<div class="${EXTRA_PANEL_CLASS}" style="height:${vh.value};overflow: hidden;min-height: 200px;"><div class='bx' id='${rmsId}'></div></div>`
|
||||||
)
|
)
|
||||||
newDivRms.insertAfter($('#rmsp'))
|
newDivRms.insertAfter($('#rmsp'))
|
||||||
$(`#${rmsId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
|
$(`#${rmsId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降(骤升)幅值:${(
|
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降幅值:${(
|
||||||
Number(eventValue.value) * 1
|
Number(eventValue.value) * 1
|
||||||
).toFixed(0)}% 持续时间:${persistTime.value}s`
|
).toFixed(0)}% 持续时间:${persistTime.value}s`
|
||||||
}
|
}
|
||||||
const rms = document.getElementById('rmsp')
|
const rms = document.getElementById('rmsp')
|
||||||
|
|
||||||
if (!rms) return
|
if (!rms) return
|
||||||
|
|
||||||
|
const yRange = calcRmsYAxisRange(rmscu[0]?.[1] ?? 0, rmscm[0]?.[1] ?? 0)
|
||||||
|
|
||||||
|
const existingChart = echarts.getInstanceByDom(rms)
|
||||||
|
if (existingChart) existingChart.dispose()
|
||||||
|
|
||||||
const myChartes = echarts.init(rms)
|
const myChartes = echarts.init(rms)
|
||||||
const echartsColor = {
|
const echartsColor = {
|
||||||
WordColor: '#000',
|
WordColor: '#000',
|
||||||
@@ -632,7 +647,15 @@ const initWave = (
|
|||||||
rms.style.width = '100%'
|
rms.style.width = '100%'
|
||||||
rms.style.height = vh.value
|
rms.style.height = vh.value
|
||||||
}, 0)
|
}, 0)
|
||||||
|
let titlename = ''
|
||||||
|
if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
|
||||||
|
if (props.wp.channelNames[1].includes('L')) {
|
||||||
|
titlename = '电网侧'
|
||||||
|
}
|
||||||
|
if (props.wp.channelNames[1].includes('S')) {
|
||||||
|
titlename = '负载侧'
|
||||||
|
}
|
||||||
|
}
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
top: '10px',
|
top: '10px',
|
||||||
@@ -669,7 +692,7 @@ const initWave = (
|
|||||||
align: 'left'
|
align: 'left'
|
||||||
},
|
},
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: '16px',
|
fontSize: '14px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor
|
color: props.DColor ? '#000' : echartsColor.WordColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -740,7 +763,7 @@ const initWave = (
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: unit,
|
name: unit + (titlename ? '_' + titlename : ''),
|
||||||
title: {
|
title: {
|
||||||
align: 'high',
|
align: 'high',
|
||||||
offset: 0,
|
offset: 0,
|
||||||
@@ -750,8 +773,11 @@ const initWave = (
|
|||||||
},
|
},
|
||||||
// max: rmscm[0]?.[1] * 1.06 || 0,
|
// max: rmscm[0]?.[1] * 1.06 || 0,
|
||||||
// min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
|
// min: rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0,
|
||||||
max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
|
max: yRange.max,
|
||||||
min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
|
min: yRange.min,
|
||||||
|
interval: yRange.interval,
|
||||||
|
minInterval: yRange.interval,
|
||||||
|
scale: false,
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
@@ -770,7 +796,7 @@ const initWave = (
|
|||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor,
|
color: props.DColor ? '#000' : echartsColor.WordColor,
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
return Math.floor(value * 1000) / 1000
|
return formatAxisLabel(value)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@@ -784,7 +810,7 @@ const initWave = (
|
|||||||
grid: {
|
grid: {
|
||||||
left: '60px',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '45px',
|
||||||
top: '60px'
|
top: '60px'
|
||||||
// containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
@@ -793,14 +819,17 @@ const initWave = (
|
|||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
bottom: '20px',
|
|
||||||
end: 100
|
bottom: '10px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '10px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
@@ -839,7 +868,7 @@ const initWave = (
|
|||||||
data: rmscu
|
data: rmscu
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '最小暂降(骤升)幅值',
|
name: '最小暂降幅值',
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
symbol: 'image://' + url2,
|
symbol: 'image://' + url2,
|
||||||
itemStyle: { width: 45, height: 45 },
|
itemStyle: { width: 45, height: 45 },
|
||||||
@@ -927,34 +956,49 @@ const drawPics = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
let titlename = ''
|
let titlename = ''
|
||||||
if (props.boxoList.systemType == 'ZL') {
|
if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
|
||||||
const str = rmsId.split('s')
|
const str = rmsId.split('s')
|
||||||
const str1 = Number(str[1])
|
const str1 = Number(str[1])
|
||||||
|
|
||||||
props.wp.channelNames.forEach((element: string, i: number) => {
|
props.wp.channelNames.forEach((element: string, i: number) => {
|
||||||
if (i == 4 || i == 7 || i == 10) {
|
if ((str1 == 1 && i == 4) || (str1 == 2 && i == 7) || (str1 == 3 && i == 10)) {
|
||||||
if (str1 == 1 && i == 4) {
|
if (element.includes('L')) {
|
||||||
const s = element.split('A')
|
titlename = '电网侧'
|
||||||
const s1 = s[0] == 'LI' ? '电网侧-电流' : s[0] + '侧' + s[1]
|
|
||||||
titlename = s1 + ' ' + title
|
|
||||||
}
|
}
|
||||||
if (str1 == 2 && i == 7) {
|
if (element.includes('S')) {
|
||||||
const s = element.split('A')
|
titlename = '负载侧'
|
||||||
const s1 = s[0] == 'SU' ? '负载侧-电压' : s[0] + '侧' + s[1]
|
|
||||||
titlename = s1 + ' ' + title
|
|
||||||
}
|
|
||||||
if (str1 == 3 && i == 10) {
|
|
||||||
const s = element.split('A')
|
|
||||||
const s1 = s[0] == 'SI' ? '负载侧-电流' : s[0] + '侧' + s[1]
|
|
||||||
titlename = s1 + ' ' + title
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (i == 4 || i == 7 || i == 10) {
|
||||||
|
// if (i == 4 || i == 7 || i == 10) {
|
||||||
|
// if (str1 == 1 && i == 4) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'LI' ? '电网侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
|
// if (str1 == 2 && i == 7) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'SU' ? '负载侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
|
// if (str1 == 3 && i == 10) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'SI' ? '负载侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const rmsIds = document.getElementById(rmsId)
|
const rmsIds = document.getElementById(rmsId)
|
||||||
if (!rmsIds) return
|
if (!rmsIds) return
|
||||||
|
|
||||||
|
const subMin = props.value === 1 ? waveDataTemp.RMSF.min : waveDataTemp.RMSS.min
|
||||||
|
const subMax = props.value === 1 ? waveDataTemp.RMSF.max : waveDataTemp.RMSS.max
|
||||||
|
const yRange = calcRmsYAxisRange(subMin, subMax)
|
||||||
|
|
||||||
const myChartes = echarts.init(rmsIds)
|
const myChartes = echarts.init(rmsIds)
|
||||||
const echartsColor = {
|
const echartsColor = {
|
||||||
WordColor: '#000',
|
WordColor: '#000',
|
||||||
@@ -1008,7 +1052,7 @@ const drawPics = (
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
text: '', //titlename || title,
|
text: '', //titlename || title,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: '16px',
|
fontSize: '15px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor
|
color: props.DColor ? '#000' : echartsColor.WordColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -1068,7 +1112,7 @@ const drawPics = (
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: unit,
|
name: unit + (titlename ? '_' + titlename : ''),
|
||||||
title: {
|
title: {
|
||||||
align: 'high',
|
align: 'high',
|
||||||
offset: 0,
|
offset: 0,
|
||||||
@@ -1078,6 +1122,11 @@ const drawPics = (
|
|||||||
},
|
},
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
|
max: yRange.max,
|
||||||
|
min: yRange.min,
|
||||||
|
interval: yRange.interval,
|
||||||
|
minInterval: yRange.interval,
|
||||||
|
scale: false,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
// max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
|
// max: Math.floor((rmscm[0]?.[1] * 1.06 || 0) * 1.1 * 10) / 10,
|
||||||
// min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
|
// min: Math.floor((rmscu[0]?.[1] - rmscu[0]?.[1] * 0.2 || 0) * 10) / 10,
|
||||||
@@ -1096,8 +1145,7 @@ const drawPics = (
|
|||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor,
|
color: props.DColor ? '#000' : echartsColor.WordColor,
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
// return (value - 0).toFixed(2)
|
return formatAxisLabel(value)
|
||||||
return Math.floor(value * 1000) / 1000
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@@ -1111,7 +1159,7 @@ const drawPics = (
|
|||||||
grid: {
|
grid: {
|
||||||
left: '60px',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '45px',
|
||||||
top: '60px'
|
top: '60px'
|
||||||
// containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
@@ -1120,14 +1168,17 @@ const drawPics = (
|
|||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
bottom: '20px',
|
|
||||||
end: 100
|
bottom: '10px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '10px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
@@ -1213,12 +1264,7 @@ const backbxlb = () => {
|
|||||||
myChartess4.value = null
|
myChartess4.value = null
|
||||||
myChartess5.value = null
|
myChartess5.value = null
|
||||||
|
|
||||||
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
|
$('#rmsp').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
|
||||||
charts.filter(Boolean).forEach(chart => {
|
|
||||||
if (chart && typeof chart.dispose === 'function') {
|
|
||||||
chart.dispose()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
|
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,6 @@
|
|||||||
// waveData.worker.js
|
// waveData.worker.js
|
||||||
self.addEventListener('message', function (e) {
|
self.addEventListener('message', function (e) {
|
||||||
const { wp, value, iphasic, isOpen, boxoList } = JSON.parse(e.data)
|
const { wp, value, iphasic, isOpen, boxoList, requestId } = e.data
|
||||||
|
|
||||||
// 处理波形数据的函数
|
// 处理波形数据的函数
|
||||||
const fliteWaveData = (wp, step) => {
|
const fliteWaveData = (wp, step) => {
|
||||||
@@ -131,8 +131,8 @@ self.addEventListener('message', function (e) {
|
|||||||
boxoList.measurementPointName +
|
boxoList.measurementPointName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
@@ -143,7 +143,7 @@ self.addEventListener('message', function (e) {
|
|||||||
boxoList.equipmentName +
|
boxoList.equipmentName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
boxoList.evtParamVVaDepth +
|
boxoList.evtParamVVaDepth +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.evtParamTm +
|
boxoList.evtParamTm +
|
||||||
@@ -155,8 +155,8 @@ self.addEventListener('message', function (e) {
|
|||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.persistTime +
|
boxoList.persistTime +
|
||||||
's'
|
's'
|
||||||
@@ -168,8 +168,8 @@ self.addEventListener('message', function (e) {
|
|||||||
boxoList.lineName +
|
boxoList.lineName +
|
||||||
' 发生时刻:' +
|
' 发生时刻:' +
|
||||||
boxoList.startTime +
|
boxoList.startTime +
|
||||||
' 暂降(骤升)幅值:' +
|
' 暂降幅值:' +
|
||||||
(boxoList.featureAmplitude * 100).toFixed(2) +
|
Math.floor(boxoList.featureAmplitude * 10000) / 100 +
|
||||||
'% 持续时间:' +
|
'% 持续时间:' +
|
||||||
boxoList.duration +
|
boxoList.duration +
|
||||||
's'
|
's'
|
||||||
@@ -195,6 +195,8 @@ self.addEventListener('message', function (e) {
|
|||||||
|
|
||||||
// 将处理结果发送回主线程
|
// 将处理结果发送回主线程
|
||||||
self.postMessage({
|
self.postMessage({
|
||||||
|
requestId,
|
||||||
|
success: true,
|
||||||
waveDatas,
|
waveDatas,
|
||||||
time,
|
time,
|
||||||
type,
|
type,
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-loading="loading" class="boxbx" style="position: relative; height: 100%">
|
<div v-loading="loading" class="boxbx" style="position: relative; height: 100%">
|
||||||
<div id="boxsj">
|
<div id="boxsj">
|
||||||
<div id="shushi" :style="`height:${vh};overflow: hidden;min-height: 200px;`">
|
<div id="shushi" :style="containerStyle">
|
||||||
<div class="bx" id="wave" style="min-height: 200px"></div>
|
<div class="bx" id="wave" :style="waveStyle"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -14,9 +14,15 @@ import html2canvas from 'html2canvas'
|
|||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import * as echarts from 'echarts'
|
import * as echarts from 'echarts'
|
||||||
import { mainHeight } from '@/utils/layout'
|
import { mainHeight } from '@/utils/layout'
|
||||||
|
import { calcShuYAxisRange, formatAxisLabel } from '@/utils/chartAxisHelper'
|
||||||
import url from '@/assets/img/point.png'
|
import url from '@/assets/img/point.png'
|
||||||
// 创建Worker
|
import { buildWaveCacheKey, getWaveCache, setWaveCache } from '@/utils/waveCache'
|
||||||
let waveDataWorker: Worker | null = null
|
import { getShuWorker, buildWorkerPayload } from '@/utils/waveWorkerPool'
|
||||||
|
import { buildExportBaseName, formatExportDateTime } from '@/utils/echartMethod'
|
||||||
|
|
||||||
|
let waveRequestId = 0
|
||||||
|
const pendingCacheKeys = new Map<number, string>()
|
||||||
|
let shuWorker: Worker | null = null
|
||||||
interface WaveData {
|
interface WaveData {
|
||||||
instantF: { max: number; min: number }
|
instantF: { max: number; min: number }
|
||||||
instantS: { max: number; min: number }
|
instantS: { max: number; min: number }
|
||||||
@@ -110,38 +116,82 @@ const vh = computed(() => {
|
|||||||
|
|
||||||
const vw = computed(() => '100%')
|
const vw = computed(() => '100%')
|
||||||
|
|
||||||
|
const containerStyle = computed(() => ({
|
||||||
|
height: vh.value,
|
||||||
|
overflow: 'hidden',
|
||||||
|
minHeight: '200px'
|
||||||
|
}))
|
||||||
|
|
||||||
|
const waveStyle = computed(() => ({
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
minHeight: '200px'
|
||||||
|
}))
|
||||||
|
|
||||||
|
const applyChartSize = (el: HTMLElement) => {
|
||||||
|
el.style.width = '100%'
|
||||||
|
el.style.height = vh.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const finishChartRender = (chart: echarts.ECharts, endLoading = false) => {
|
||||||
|
nextTick(() => {
|
||||||
|
chart.resize()
|
||||||
|
if (endLoading) {
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => props.value,
|
() => props.value,
|
||||||
newVal => {
|
() => {
|
||||||
if (newVal == 2) {
|
query()
|
||||||
initWaves()
|
|
||||||
} else {
|
|
||||||
$('#wave1').remove()
|
|
||||||
initWaves()
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.wp,
|
||||||
|
() => {
|
||||||
|
query()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
const applyWorkerResult = (data: any) => {
|
||||||
|
titles.value = data.titles
|
||||||
|
iphasic.value = data.iphasic
|
||||||
|
time.value = data.time
|
||||||
|
type.value = data.type
|
||||||
|
severity.value = data.severity
|
||||||
|
initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
|
||||||
|
loading.value = false
|
||||||
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
const zoomValue = document.body.style.getPropertyValue('zoom')
|
const zoomValue = document.body.style.getPropertyValue('zoom')
|
||||||
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
|
zoom.value = 1 / (zoomValue ? parseFloat(zoomValue) : 1)
|
||||||
|
|
||||||
window.addEventListener('resize', handleResize)
|
window.addEventListener('resize', handleResize)
|
||||||
|
shuWorker = getShuWorker(data => {
|
||||||
|
if (data.requestId !== waveRequestId) return
|
||||||
|
if (!data.success) {
|
||||||
|
console.error('Worker error:', data.error)
|
||||||
|
loading.value = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const cacheKey = pendingCacheKeys.get(data.requestId)
|
||||||
|
if (cacheKey) {
|
||||||
|
setWaveCache(cacheKey, data)
|
||||||
|
pendingCacheKeys.delete(data.requestId)
|
||||||
|
}
|
||||||
|
applyWorkerResult(data)
|
||||||
|
})
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
setTimeout(() => {
|
query()
|
||||||
query()
|
|
||||||
}, 500)
|
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
console.log('组件卸载')
|
|
||||||
|
|
||||||
if (waveDataWorker) {
|
|
||||||
waveDataWorker.terminate()
|
|
||||||
waveDataWorker = null
|
|
||||||
}
|
|
||||||
|
|
||||||
backbxlb()
|
backbxlb()
|
||||||
window.removeEventListener('resize', handleResize)
|
window.removeEventListener('resize', handleResize)
|
||||||
})
|
})
|
||||||
@@ -158,7 +208,7 @@ const download = () => {
|
|||||||
scale: 2
|
scale: 2
|
||||||
}).then(function (canvas) {
|
}).then(function (canvas) {
|
||||||
const creatIMg = document.createElement('a')
|
const creatIMg = document.createElement('a')
|
||||||
creatIMg.download = '瞬间波形.png'
|
creatIMg.download = (props.boxoList.lineName || props.boxoList.measurementPointName || props.boxoList.equipmentName) + '_瞬间波形_' + formatExportDateTime() + '.png'
|
||||||
creatIMg.href = canvas.toDataURL()
|
creatIMg.href = canvas.toDataURL()
|
||||||
creatIMg.click()
|
creatIMg.click()
|
||||||
creatIMg.remove()
|
creatIMg.remove()
|
||||||
@@ -166,6 +216,13 @@ const download = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const EXTRA_PANEL_CLASS = 'wave-extra-panel'
|
||||||
|
|
||||||
|
const resetWaveDom = () => {
|
||||||
|
backbxlb()
|
||||||
|
$('#shushi').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
|
||||||
|
}
|
||||||
|
|
||||||
const query = () => {
|
const query = () => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
initWaves()
|
initWaves()
|
||||||
@@ -184,48 +241,32 @@ const waveData = (instantF: any, instantS: any, shunshiF: any, shunshiS: any, ti
|
|||||||
|
|
||||||
// 在组件中修改initWaves函数
|
// 在组件中修改initWaves函数
|
||||||
const initWaves = () => {
|
const initWaves = () => {
|
||||||
if (props.wp) {
|
if (!props.wp?.listWaveData?.length) {
|
||||||
loading.value = true
|
|
||||||
iphasic.value = props.wp.iphasic || 1
|
|
||||||
// 使用Web Worker处理数据
|
|
||||||
if (!waveDataWorker) {
|
|
||||||
waveDataWorker = new Worker(new URL('./shuWorker.js', import.meta.url))
|
|
||||||
|
|
||||||
waveDataWorker.onmessage = function (e) {
|
|
||||||
const data = e.data
|
|
||||||
|
|
||||||
titles.value = data.titles
|
|
||||||
iphasic.value = data.iphasic
|
|
||||||
time.value = data.time
|
|
||||||
type.value = data.type
|
|
||||||
severity.value = data.severity
|
|
||||||
|
|
||||||
initWave(data.waveDatas, data.time, data.type, data.severity, isOpen.value)
|
|
||||||
|
|
||||||
loading.value = false
|
|
||||||
}
|
|
||||||
|
|
||||||
waveDataWorker.onerror = function (error) {
|
|
||||||
console.error('Worker error:', error)
|
|
||||||
loading.value = false
|
|
||||||
// 备用方案:在主线程处理数据
|
|
||||||
// processDataInMainThread();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 发送数据到Worker
|
|
||||||
waveDataWorker.postMessage(
|
|
||||||
JSON.stringify({
|
|
||||||
wp: props.wp,
|
|
||||||
value: props.value,
|
|
||||||
iphasic: iphasic.value,
|
|
||||||
isOpen: isOpen.value,
|
|
||||||
boxoList: props.boxoList
|
|
||||||
})
|
|
||||||
)
|
|
||||||
} else {
|
|
||||||
initWave(null, null, null, null, null)
|
initWave(null, null, null, null, null)
|
||||||
|
loading.value = false
|
||||||
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const cacheKey = buildWaveCacheKey('shu', props.wp, props.value, isOpen.value, props.boxoList)
|
||||||
|
const cached = getWaveCache<any>(cacheKey)
|
||||||
|
if (cached) {
|
||||||
|
applyWorkerResult(cached)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
loading.value = true
|
||||||
|
iphasic.value = props.wp.iphasic || 1
|
||||||
|
const currentRequestId = ++waveRequestId
|
||||||
|
pendingCacheKeys.set(currentRequestId, cacheKey)
|
||||||
|
|
||||||
|
shuWorker?.postMessage(
|
||||||
|
buildWorkerPayload('shu', props.wp, props.boxoList, {
|
||||||
|
requestId: currentRequestId,
|
||||||
|
value: props.value,
|
||||||
|
isOpen: isOpen.value,
|
||||||
|
iphasic: iphasic.value
|
||||||
|
})
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
const initWave = (
|
const initWave = (
|
||||||
@@ -235,6 +276,7 @@ const initWave = (
|
|||||||
severity: string | null,
|
severity: string | null,
|
||||||
isOpen: boolean | null
|
isOpen: boolean | null
|
||||||
) => {
|
) => {
|
||||||
|
resetWaveDom()
|
||||||
$('div.bx1').remove()
|
$('div.bx1').remove()
|
||||||
|
|
||||||
let picHeight = vh.value
|
let picHeight = vh.value
|
||||||
@@ -327,14 +369,14 @@ const initWave = (
|
|||||||
|
|
||||||
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
|
for (let step = waveDatas.length - 1; step > 0 && step < waveDatas.length; step--) {
|
||||||
const waveId = 'wave' + step
|
const waveId = 'wave' + step
|
||||||
const newDivShunshi = $(`<div style="height:${vh.value};overflow: hidden;min-height: 200px;">
|
const newDivShunshi = $(`<div class="${EXTRA_PANEL_CLASS}" style="height:${vh.value};overflow: hidden;min-height: 200px;">
|
||||||
<div class='bx1' id='${waveId}'></div>
|
<div class='bx1' id='${waveId}'></div>
|
||||||
</div>`)
|
</div>`)
|
||||||
newDivShunshi.insertAfter($('#shushi'))
|
newDivShunshi.insertAfter($('#shushi'))
|
||||||
$(`#${waveId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
|
$(`#${waveId}`).css('height', picHeight).css('width', vw.value).css('min-height', '200px')
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降(骤升)幅值:${(
|
titleText = `变电站名称:${subName.value} 监测点名称:${lineName.value} 发生时刻:${time} 暂降幅值:${(
|
||||||
Number(eventValue.value) * 1
|
Number(eventValue.value) * 1
|
||||||
).toFixed(0)}% 持续时间:${persistTime.value}s`
|
).toFixed(0)}% 持续时间:${persistTime.value}s`
|
||||||
}
|
}
|
||||||
@@ -342,6 +384,13 @@ const initWave = (
|
|||||||
const wave = document.getElementById('wave')
|
const wave = document.getElementById('wave')
|
||||||
if (!wave) return
|
if (!wave) return
|
||||||
|
|
||||||
|
applyChartSize(wave)
|
||||||
|
|
||||||
|
const yRange = calcShuYAxisRange(Number(min), Number(max))
|
||||||
|
|
||||||
|
const existingChart = echarts.getInstanceByDom(wave)
|
||||||
|
if (existingChart) existingChart.dispose()
|
||||||
|
|
||||||
const myChartes = echarts.init(wave)
|
const myChartes = echarts.init(wave)
|
||||||
const echartsColor = {
|
const echartsColor = {
|
||||||
WordColor: '#000',
|
WordColor: '#000',
|
||||||
@@ -362,11 +411,20 @@ const initWave = (
|
|||||||
'#FF9999'
|
'#FF9999'
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
let titlename = ''
|
||||||
|
if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
wave.style.width = '100%'
|
if (props.wp.channelNames[1].includes('L')) {
|
||||||
wave.style.height = vh.value
|
titlename = '电网侧'
|
||||||
}, 0)
|
}
|
||||||
|
if (props.wp.channelNames[1].includes('S')) {
|
||||||
|
titlename = '负载侧'
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
@@ -405,7 +463,7 @@ const initWave = (
|
|||||||
left: 'center',
|
left: 'center',
|
||||||
text: titleText,
|
text: titleText,
|
||||||
textStyle: {
|
textStyle: {
|
||||||
fontSize: '16px',
|
fontSize: '14px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor
|
color: props.DColor ? '#000' : echartsColor.WordColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -471,7 +529,7 @@ const initWave = (
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: unit,
|
name: unit + (titlename ? '_' + titlename : ''),
|
||||||
title: {
|
title: {
|
||||||
align: 'high',
|
align: 'high',
|
||||||
offset: 0,
|
offset: 0,
|
||||||
@@ -481,10 +539,11 @@ const initWave = (
|
|||||||
},
|
},
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
// max: max.toFixed(2) * 1.1,
|
max: yRange.max,
|
||||||
// min: min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1,
|
min: yRange.min,
|
||||||
max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
|
interval: yRange.interval,
|
||||||
min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10 ,
|
minInterval: yRange.interval,
|
||||||
|
scale: false,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
@@ -501,8 +560,7 @@ const initWave = (
|
|||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor,
|
color: props.DColor ? '#000' : echartsColor.WordColor,
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
// return (value - 0).toFixed(2)
|
return formatAxisLabel(value)
|
||||||
return Math.floor(value * 1000) / 1000
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@@ -516,23 +574,25 @@ const initWave = (
|
|||||||
grid: {
|
grid: {
|
||||||
left: '60px',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '45px',
|
||||||
top: '60px'
|
top: '60px'
|
||||||
// containLabel: true
|
|
||||||
},
|
},
|
||||||
dataZoom: [
|
dataZoom: [
|
||||||
{
|
{
|
||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
bottom: '20px',
|
|
||||||
end: 100
|
bottom: '10px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '10px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
@@ -578,11 +638,7 @@ const initWave = (
|
|||||||
|
|
||||||
myChartes.setOption(option)
|
myChartes.setOption(option)
|
||||||
myChartess.value = myChartes
|
myChartess.value = myChartes
|
||||||
|
finishChartRender(myChartes, true)
|
||||||
setTimeout(() => {
|
|
||||||
myChartes.resize()
|
|
||||||
loading.value = false
|
|
||||||
}, 400)
|
|
||||||
|
|
||||||
if (waveDatas && waveDatas.length > 1) {
|
if (waveDatas && waveDatas.length > 1) {
|
||||||
const waveDatasTemp = waveDatas.slice(1)
|
const waveDatasTemp = waveDatas.slice(1)
|
||||||
@@ -652,33 +708,52 @@ const drawPics = (
|
|||||||
}
|
}
|
||||||
|
|
||||||
let titlename = ''
|
let titlename = ''
|
||||||
if (props.boxoList.systemType == 'ZL') {
|
if (props.boxoList.systemType == 'ZL' || props.boxoList.systemType == 'YPT') {
|
||||||
const str = waveId.split('e')
|
const str = waveId.split('e')
|
||||||
const str1 = Number(str[1])
|
const str1 = Number(str[1])
|
||||||
|
|
||||||
props.wp.channelNames.forEach((element: string, i: number) => {
|
props.wp.channelNames.forEach((element: string, i: number) => {
|
||||||
if (i == 4 || i == 7 || i == 10) {
|
if ((str1 == 1 && i == 4) || (str1 == 2 && i == 7) || (str1 == 3 && i == 10)) {
|
||||||
if (str1 == 1 && i == 4) {
|
|
||||||
const s = element.split('A')
|
|
||||||
const s1 = s[0] == 'LI' ? '电网侧-电流' : s[0] + '侧' + s[1]
|
if (element.includes('L')) {
|
||||||
titlename = s1 + ' ' + title
|
titlename = '电网侧'
|
||||||
}
|
}
|
||||||
if (str1 == 2 && i == 7) {
|
if (element.includes('S')) {
|
||||||
const s = element.split('A')
|
titlename = '负载侧'
|
||||||
const s1 = s[0] == 'SU' ? '负载侧-电压' : s[0] + '侧' + s[1]
|
|
||||||
titlename = s1 + ' ' + title
|
|
||||||
}
|
|
||||||
if (str1 == 3 && i == 10) {
|
|
||||||
const s = element.split('A')
|
|
||||||
const s1 = s[0] == 'SI' ? '负载侧-电流' : s[0] + '侧' + s[1]
|
|
||||||
titlename = s1 + ' ' + title
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// if (str1 == 1 && i == 4) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'LI' ? '电网侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
|
// if (str1 == 2 && i == 7) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'SU' ? '负载侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
|
// if (str1 == 3 && i == 10) {
|
||||||
|
// const s = element.split('A')
|
||||||
|
// const s1 = s[0] == 'SI' ? '负载侧' : ''//s[0] + '侧' + s[1]
|
||||||
|
// titlename = s1 //+ ' ' + title
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const waveIds = document.getElementById(waveId)
|
const waveIds = document.getElementById(waveId)
|
||||||
if (!waveIds) return
|
if (!waveIds) return
|
||||||
|
|
||||||
|
applyChartSize(waveIds)
|
||||||
|
|
||||||
|
const yRange = calcShuYAxisRange(Number(min), Number(max))
|
||||||
|
|
||||||
|
const existingChart = echarts.getInstanceByDom(waveIds)
|
||||||
|
if (existingChart) existingChart.dispose()
|
||||||
|
|
||||||
const myChartes = echarts.init(waveIds)
|
const myChartes = echarts.init(waveIds)
|
||||||
const echartsColor = {
|
const echartsColor = {
|
||||||
WordColor: '#000',
|
WordColor: '#000',
|
||||||
@@ -781,7 +856,7 @@ const drawPics = (
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
type: 'value',
|
type: 'value',
|
||||||
name: unit,
|
name: unit + (titlename ? '_' + titlename : ''),
|
||||||
title: {
|
title: {
|
||||||
align: 'high',
|
align: 'high',
|
||||||
offset: 0,
|
offset: 0,
|
||||||
@@ -791,8 +866,11 @@ const drawPics = (
|
|||||||
},
|
},
|
||||||
boundaryGap: [0, '100%'],
|
boundaryGap: [0, '100%'],
|
||||||
showLastLabel: true,
|
showLastLabel: true,
|
||||||
max: Math.floor(max.toFixed(2) * 1.1 * 10) / 10,
|
max: yRange.max,
|
||||||
min: Math.floor(min.toFixed(2) > 0 ? min.toFixed(2) - min.toFixed(2) * 0.1 : min.toFixed(2) * 1.1 * 10) / 10 ,
|
min: yRange.min,
|
||||||
|
interval: yRange.interval,
|
||||||
|
minInterval: yRange.interval,
|
||||||
|
scale: false,
|
||||||
opposite: false,
|
opposite: false,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
@@ -809,8 +887,7 @@ const drawPics = (
|
|||||||
fontSize: '12px',
|
fontSize: '12px',
|
||||||
color: props.DColor ? '#000' : echartsColor.WordColor,
|
color: props.DColor ? '#000' : echartsColor.WordColor,
|
||||||
formatter: function (value: number) {
|
formatter: function (value: number) {
|
||||||
// return (value - 0).toFixed(2)
|
return formatAxisLabel(value)
|
||||||
return Math.floor(value * 1000) / 1000
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
splitLine: {
|
splitLine: {
|
||||||
@@ -824,7 +901,7 @@ const drawPics = (
|
|||||||
grid: {
|
grid: {
|
||||||
left: '60px',
|
left: '60px',
|
||||||
right: '45px',
|
right: '45px',
|
||||||
bottom: '40px',
|
bottom: '45px',
|
||||||
top: '60px'
|
top: '60px'
|
||||||
// containLabel: true
|
// containLabel: true
|
||||||
},
|
},
|
||||||
@@ -833,14 +910,17 @@ const drawPics = (
|
|||||||
type: 'inside',
|
type: 'inside',
|
||||||
height: 13,
|
height: 13,
|
||||||
start: 0,
|
start: 0,
|
||||||
bottom: '20px',
|
|
||||||
end: 100
|
bottom: '10px',
|
||||||
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
start: 0,
|
start: 0,
|
||||||
height: 13,
|
height: 13,
|
||||||
bottom: '20px',
|
bottom: '10px',
|
||||||
end: 100
|
end: 100,
|
||||||
|
filterMode: 'none'
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
series: [
|
series: [
|
||||||
@@ -897,10 +977,7 @@ const drawPics = (
|
|||||||
break
|
break
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
finishChartRender(myChartes)
|
||||||
myChartes.resize()
|
|
||||||
loading.value = false
|
|
||||||
}, 400)
|
|
||||||
|
|
||||||
echarts.connect([myChartes1, myChartes])
|
echarts.connect([myChartes1, myChartes])
|
||||||
}
|
}
|
||||||
@@ -929,12 +1006,8 @@ const backbxlb = () => {
|
|||||||
myChartess4.value = null
|
myChartess4.value = null
|
||||||
myChartess5.value = null
|
myChartess5.value = null
|
||||||
|
|
||||||
// echarts.disconnect(charts.filter(Boolean) as echarts.ECharts[])
|
$('#shushi').nextAll(`.${EXTRA_PANEL_CLASS}`).remove()
|
||||||
charts.filter(Boolean).forEach(chart => {
|
$('div.bx1').remove()
|
||||||
if (chart && typeof chart.dispose === 'function') {
|
|
||||||
chart.dispose()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
|
const getMax = (temp: number, tempA: number, tempB: number, tempC: number): number => {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -1,25 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style="width: 540px">
|
<div style="width: 540px">
|
||||||
<el-select
|
<el-select v-model.trim="interval" style="min-width: 90px; width: 90px; margin-right: 10px"
|
||||||
v-model.trim="interval"
|
@change="timeChange">
|
||||||
style="min-width: 90px; width: 90px; margin-right: 10px"
|
|
||||||
@change="timeChange"
|
|
||||||
>
|
|
||||||
<el-option v-for="item in filteredTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in filteredTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
<el-date-picker
|
<el-date-picker v-model.trim="timeValue" type="daterange" :disabled="disabledPicker"
|
||||||
v-model.trim="timeValue"
|
style="width: 220px; margin-right: 10px" unlink-panels :clearable="false" range-separator="至"
|
||||||
type="daterange"
|
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" :shortcuts="shortcuts" />
|
||||||
:disabled="disabledPicker"
|
|
||||||
style="width: 220px; margin-right: 10px"
|
|
||||||
unlink-panels
|
|
||||||
:clearable="false"
|
|
||||||
range-separator="至"
|
|
||||||
start-placeholder="开始日期"
|
|
||||||
end-placeholder="结束日期"
|
|
||||||
value-format="YYYY-MM-DD"
|
|
||||||
:shortcuts="shortcuts"
|
|
||||||
/>
|
|
||||||
|
|
||||||
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
<el-button :disabled="backDisabled" type="primary" :icon="DArrowLeft" @click="preClick"></el-button>
|
||||||
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
<el-button type="primary" :icon="VideoPause" @click="nowTime">当前</el-button>
|
||||||
@@ -95,9 +82,15 @@ const shortcuts = [
|
|||||||
|
|
||||||
// 计算过滤后的 timeOptions
|
// 计算过滤后的 timeOptions
|
||||||
const filteredTimeOptions = computed(() => {
|
const filteredTimeOptions = computed(() => {
|
||||||
|
|
||||||
|
if (props.timeKeyList.length > 0 && !props.timeKeyList.includes(interval.value.toString())) {
|
||||||
|
interval.value = Number(props.timeKeyList[0])
|
||||||
|
|
||||||
|
}
|
||||||
if (!props.timeKeyList || props.timeKeyList.length === 0) {
|
if (!props.timeKeyList || props.timeKeyList.length === 0) {
|
||||||
return timeOptions.value
|
return timeOptions.value
|
||||||
}
|
}
|
||||||
|
nowTime()
|
||||||
|
|
||||||
return timeOptions.value.filter((option: any) => props.timeKeyList.includes(option.value.toString()))
|
return timeOptions.value.filter((option: any) => props.timeKeyList.includes(option.value.toString()))
|
||||||
})
|
})
|
||||||
@@ -181,10 +174,10 @@ const timeChange = (e: number) => {
|
|||||||
timeFlag.value = 1
|
timeFlag.value = 1
|
||||||
}
|
}
|
||||||
|
|
||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
// 检查按钮状态
|
// 检查按钮状态
|
||||||
checkInitialButtonStatus()
|
checkInitialButtonStatus()
|
||||||
})
|
})
|
||||||
|
|
||||||
// 触发 change 事件
|
// 触发 change 事件
|
||||||
emitChange()
|
emitChange()
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="mac-address-input" :class="{ disabled: disabled }">
|
<div class="mac-address-input" :class="{ disabled: disabled }">
|
||||||
<el-input
|
<el-input show-word-limit
|
||||||
ref="inputRef"
|
ref="inputRef"
|
||||||
placeholder="请输入设备mac地址"
|
placeholder="请输入设备mac地址"
|
||||||
v-model="macValue"
|
v-model="macValue"
|
||||||
|
|||||||
@@ -146,7 +146,7 @@ import { ElMessageBox, type TagProps } from 'element-plus'
|
|||||||
import type TableStoreClass from '@/utils/tableStore'
|
import type TableStoreClass from '@/utils/tableStore'
|
||||||
import { fullUrl, timeFormat } from '@/utils/common'
|
import { fullUrl, timeFormat } from '@/utils/common'
|
||||||
import type { VxeColumnProps } from 'vxe-table'
|
import type { VxeColumnProps } from 'vxe-table'
|
||||||
import { getFileUrl } from '@/api/system-boot/file'
|
import { downLoadFile } from '@/api/cs-system-boot/manage'
|
||||||
const TableStore = inject('tableStore') as TableStoreClass
|
const TableStore = inject('tableStore') as TableStoreClass
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
@@ -228,8 +228,12 @@ const handlerCommand = (item: OptButton) => {
|
|||||||
}
|
}
|
||||||
const imgList: any = ref({})
|
const imgList: any = ref({})
|
||||||
const getUrl = (url: string) => {
|
const getUrl = (url: string) => {
|
||||||
getFileUrl({ filePath: url }).then(res => {
|
if (imgList.value[url]) return true
|
||||||
imgList.value[url] = res.data
|
downLoadFile(url).then(res => {
|
||||||
|
const blob = res as unknown as Blob
|
||||||
|
if (blob?.type && blob.type !== 'application/json') {
|
||||||
|
imgList.value[url] = window.URL.createObjectURL(blob)
|
||||||
|
}
|
||||||
})
|
})
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -31,7 +31,7 @@
|
|||||||
</el-button>
|
</el-button>
|
||||||
<el-button
|
<el-button
|
||||||
@click="onComSearch"
|
@click="onComSearch"
|
||||||
v-if="showSearch"
|
v-if="showSearch &&showQuery"
|
||||||
:loading="tableStore.table.loading"
|
:loading="tableStore.table.loading"
|
||||||
type="primary"
|
type="primary"
|
||||||
:icon="Search"
|
:icon="Search"
|
||||||
@@ -81,7 +81,7 @@ import { defineProps } from 'vue'
|
|||||||
import { useTimeCacheStore } from '@/stores/timeCache'
|
import { useTimeCacheStore } from '@/stores/timeCache'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
|
|
||||||
const emit = defineEmits(['selectChange'])
|
const emit = defineEmits(['selectChange','onResetForm'])
|
||||||
|
|
||||||
const tableStore = inject('tableStore') as TableStore
|
const tableStore = inject('tableStore') as TableStore
|
||||||
const tableHeader = ref()
|
const tableHeader = ref()
|
||||||
@@ -102,6 +102,7 @@ interface Props {
|
|||||||
showSearch?: boolean
|
showSearch?: boolean
|
||||||
nextFlag?: boolean //控制时间是否可以往后推
|
nextFlag?: boolean //控制时间是否可以往后推
|
||||||
theCurrentTime?: boolean //控制时间前3天展示上个月时间
|
theCurrentTime?: boolean //控制时间前3天展示上个月时间
|
||||||
|
showQuery?: boolean //是否显示查詢
|
||||||
showReset?: boolean //是否显示重置
|
showReset?: boolean //是否显示重置
|
||||||
showExport?: boolean //导出控制
|
showExport?: boolean //导出控制
|
||||||
timeCacheFlag?: boolean //是否取缓存时间
|
timeCacheFlag?: boolean //是否取缓存时间
|
||||||
@@ -115,6 +116,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
nextFlag: false,
|
nextFlag: false,
|
||||||
theCurrentTime: true,
|
theCurrentTime: true,
|
||||||
showReset: true,
|
showReset: true,
|
||||||
|
showQuery: true,
|
||||||
showExport: false,
|
showExport: false,
|
||||||
timeCacheFlag: true,
|
timeCacheFlag: true,
|
||||||
timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
|
timeKeyList: () => ['1', '2', '3', '4', '5'] // 修改为箭头函数返回空数组
|
||||||
@@ -244,6 +246,7 @@ const setDatePicker = (list: any) => {
|
|||||||
const onResetForm = () => {
|
const onResetForm = () => {
|
||||||
//时间重置成默认值
|
//时间重置成默认值
|
||||||
datePickerRef.value?.setInterval(3)
|
datePickerRef.value?.setInterval(3)
|
||||||
|
emit('onResetForm')
|
||||||
tableStore.onTableAction('reset', {})
|
tableStore.onTableAction('reset', {})
|
||||||
}
|
}
|
||||||
const setInterval = (val: any) => {
|
const setInterval = (val: any) => {
|
||||||
|
|||||||
@@ -10,10 +10,11 @@
|
|||||||
@checkbox-all="selectChangeEvent"
|
@checkbox-all="selectChangeEvent"
|
||||||
@checkbox-change="selectChangeEvent"
|
@checkbox-change="selectChangeEvent"
|
||||||
:showOverflow="showOverflow"
|
:showOverflow="showOverflow"
|
||||||
:sort-config="{ remote: true }"
|
|
||||||
@sort-change="handleSortChange"
|
|
||||||
>
|
|
||||||
|
|
||||||
|
|
||||||
|
>
|
||||||
|
<!-- :sort-config="{ remote: true }" -->
|
||||||
|
<!-- @sort-change="handleSortChange" -->
|
||||||
<!-- Column 组件内部是 el-table-column -->
|
<!-- Column 组件内部是 el-table-column -->
|
||||||
<template v-if="isGroup">
|
<template v-if="isGroup">
|
||||||
<GroupColumn :column="tableStore.table.column" />
|
<GroupColumn :column="tableStore.table.column" />
|
||||||
@@ -73,6 +74,7 @@ import { useConfig } from '@/stores/config'
|
|||||||
import type TableStoreClass from '@/utils/tableStore'
|
import type TableStoreClass from '@/utils/tableStore'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||||
|
import { buildExportBaseName,formatExportDateTime } from '@/utils/echartMethod'
|
||||||
|
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const tableRef = ref<VxeTableInstance>()
|
const tableRef = ref<VxeTableInstance>()
|
||||||
@@ -149,14 +151,24 @@ const selectChangeEvent: VxeTableEvents.CheckboxChange<any> = ({ checked }) => {
|
|||||||
const getRef = () => {
|
const getRef = () => {
|
||||||
return tableRef.value
|
return tableRef.value
|
||||||
}
|
}
|
||||||
|
const getTableExportFilename = () => {
|
||||||
|
const exportName = tableStore.exportName
|
||||||
|
if (exportName && typeof exportName === 'object') {
|
||||||
|
return buildExportBaseName(exportName)
|
||||||
|
}
|
||||||
|
const feature =
|
||||||
|
exportName || (document.querySelectorAll('.ba-nav-tab.active')[0] as HTMLElement | undefined)?.textContent || '导出'
|
||||||
|
return buildExportBaseName({ feature })
|
||||||
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
() => tableStore.table.allFlag,
|
() => tableStore.table.allFlag,
|
||||||
newVal => {
|
newVal => {
|
||||||
if (tableStore.table.allFlag) {
|
if (tableStore.table.allFlag) {
|
||||||
console.log('🚀 ~ tableStore.table.allData:', tableStore.table.allData)
|
// console.log('🚀 ~ tableStore.table.allData:', tableStore.table.allData)
|
||||||
|
|
||||||
tableRef.value?.exportData({
|
tableRef.value?.exportData({
|
||||||
filename: tableStore.exportName || document.querySelectorAll('.ba-nav-tab.active')[0].textContent || '', // 文件名字
|
filename: getTableExportFilename(), // 文件名字
|
||||||
sheetName: 'Sheet1',
|
sheetName: 'Sheet1',
|
||||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||||
useStyle: true,
|
useStyle: true,
|
||||||
|
|||||||
@@ -14,7 +14,7 @@
|
|||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<!-- 设备管理使用折叠面板渲染多个tree -->
|
<!-- 设备管理使用折叠面板渲染多个tree -->
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" class="device-tree-root">
|
||||||
<!-- <Icon
|
<!-- <Icon
|
||||||
v-show="menuCollapse"
|
v-show="menuCollapse"
|
||||||
@click="onMenuCollapse"
|
@click="onMenuCollapse"
|
||||||
@@ -11,9 +11,9 @@
|
|||||||
style="cursor: pointer"
|
style="cursor: pointer"
|
||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div class="tree-search mb10">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit
|
||||||
maxlength="32"
|
|
||||||
v-model.trim="filterText"
|
v-model.trim="filterText"
|
||||||
autocomplete="off"
|
autocomplete="off"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
@@ -48,29 +48,29 @@
|
|||||||
<el-collapse
|
<el-collapse
|
||||||
:accordion="true"
|
:accordion="true"
|
||||||
v-model="activeName"
|
v-model="activeName"
|
||||||
style="flex: 1; height: 100%"
|
class="device-collapse"
|
||||||
@change="changeDevice"
|
@change="changeDevice"
|
||||||
v-if="treeType == '1'"
|
v-if="treeType == '1'"
|
||||||
v-loading="loading"
|
v-loading="loading"
|
||||||
>
|
>
|
||||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
||||||
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
<div class="collapse-tree-panel collapse-tree-panel--govern">
|
||||||
<el-option label="功能调试" value="2" />
|
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
||||||
<el-option label="出厂调试" value="3" />
|
<el-option label="功能调试" value="2" />
|
||||||
<el-option label="正式投运" value="4" />
|
<el-option label="出厂调试" value="3" />
|
||||||
</el-select>
|
<el-option label="正式投运" value="4" />
|
||||||
<el-tree
|
</el-select>
|
||||||
:style="{ height: governTreeHeight }"
|
<el-tree
|
||||||
ref="treeRef1"
|
ref="treeRef1"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
:filter-node-method="filterNode"
|
:filter-node-method="filterNode"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:data="zlDevList"
|
:data="zlDevList"
|
||||||
style="overflow: auto"
|
class="collapse-tree"
|
||||||
>
|
>
|
||||||
<template #default="{ node, data: nodeData }">
|
<template #default="{ node, data: nodeData }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon
|
<Icon
|
||||||
@@ -83,20 +83,21 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
||||||
<el-tree
|
<div class="collapse-tree-panel">
|
||||||
:style="{ height: otherTreeHeight }"
|
<el-tree
|
||||||
ref="treeRef2"
|
ref="treeRef2"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
:filter-node-method="filterNode"
|
:filter-node-method="filterNode"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
:data="bxsDeviceData"
|
:data="bxsDeviceData"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
style="overflow: auto"
|
class="collapse-tree"
|
||||||
>
|
>
|
||||||
<template #default="{ node, data: nodeData }">
|
<template #default="{ node, data: nodeData }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon
|
<Icon
|
||||||
@@ -109,20 +110,21 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
|
<el-collapse-item title="监测设备" name="2" v-if="frontDeviceData.length">
|
||||||
<el-tree
|
<div class="collapse-tree-panel">
|
||||||
:style="{ height: otherTreeHeight }"
|
<el-tree
|
||||||
ref="treeRef3"
|
ref="treeRef3"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
:filter-node-method="filterNode"
|
:filter-node-method="filterNode"
|
||||||
node-key="id"
|
node-key="id"
|
||||||
:data="frontDeviceData"
|
:data="frontDeviceData"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
style="overflow: auto"
|
class="collapse-tree"
|
||||||
>
|
>
|
||||||
<template #default="{ node, data: nodeData }">
|
<template #default="{ node, data: nodeData }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon
|
<Icon
|
||||||
@@ -135,11 +137,11 @@
|
|||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-tree>
|
</el-tree>
|
||||||
|
</div>
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
<div v-if="treeType == '2'" v-loading="loading">
|
<div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
|
||||||
<el-tree
|
<el-tree
|
||||||
:style="{ height: engineeringTreeHeight }"
|
|
||||||
ref="treeRef4"
|
ref="treeRef4"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
@@ -147,7 +149,7 @@
|
|||||||
node-key="id"
|
node-key="id"
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
:data="props.data"
|
:data="props.data"
|
||||||
style="overflow: auto"
|
class="engineering-tree"
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
>
|
>
|
||||||
<template #default="{ node, data: nodeData }">
|
<template #default="{ node, data: nodeData }">
|
||||||
@@ -170,7 +172,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||||
import { ElTree, type CollapseModelValue } from 'element-plus'
|
import { ElTree, type CollapseModelValue } from 'element-plus'
|
||||||
import { ref, watch, onMounted, nextTick, computed } from 'vue'
|
import { ref, watch, onMounted, nextTick } from 'vue'
|
||||||
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
||||||
import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
|
import { collectDeviceApiLeaves } from './govern/deviceTreeUtils'
|
||||||
|
|
||||||
@@ -202,10 +204,10 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
leafMode: 'line'
|
leafMode: 'line'
|
||||||
})
|
})
|
||||||
|
|
||||||
const treeType = ref('1')
|
const treeType = ref('2')
|
||||||
const options = [
|
const options = [
|
||||||
|
{ label: '工程', value: '2' },
|
||||||
{ label: '设备', value: '1' },
|
{ label: '设备', value: '1' },
|
||||||
{ label: '工程', value: '2' }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const { proxy } = useCurrentInstance()
|
const { proxy } = useCurrentInstance()
|
||||||
@@ -222,12 +224,6 @@ const zlDevList = ref<any[]>([])
|
|||||||
const bxsDeviceData = ref<any[]>([])
|
const bxsDeviceData = ref<any[]>([])
|
||||||
const frontDeviceData = ref<any[]>([])
|
const frontDeviceData = ref<any[]>([])
|
||||||
|
|
||||||
const governTreeHeight = computed(() => `calc(100vh - 380px - ${props.height}px)`)
|
|
||||||
const otherTreeHeight = computed(() =>
|
|
||||||
zlDeviceData.value.length ? `calc(100vh - 340px - ${props.height}px)` : `calc(100vh - 238px - ${props.height}px)`
|
|
||||||
)
|
|
||||||
const engineeringTreeHeight = computed(() => `calc(100vh - 188px - ${props.height}px)`)
|
|
||||||
|
|
||||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||||
@@ -379,11 +375,18 @@ const changeTreeType = (val: string) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
treeType.value = props.engineering ? '2' : '1'
|
// treeType.value = props.engineering ? '2' : '1'
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
.device-tree-root {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.cn-tree {
|
.cn-tree {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -391,7 +394,10 @@ onMounted(() => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
:deep(.el-tree) {
|
:deep(.el-tree) {
|
||||||
border: 1px solid var(--el-border-color);
|
border: 1px solid var(--el-border-color);
|
||||||
@@ -401,6 +407,85 @@ onMounted(() => {
|
|||||||
background-color: var(--el-color-primary-light-7);
|
background-color: var(--el-color-primary-light-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tree-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-collapse {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
:deep(.el-collapse-item) {
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.el-collapse-item__header {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.el-collapse-item__wrap {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-collapse-item__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.engineering-tree-wrap {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.engineering-tree {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-tree-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&--govern > .el-select {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-tree {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-collapse {
|
.menu-collapse {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|||||||
169
src/components/tree/govern/APFTree.vue
Normal file
169
src/components/tree/govern/APFTree.vue
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
<template>
|
||||||
|
<div class="apf-tree">
|
||||||
|
<div class="cn-tree" :style="{ height: `calc(100vh - 125px - ${height}px)` }">
|
||||||
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
|
<template #prefix>
|
||||||
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<el-tree style="flex: 1; overflow: auto" :props="defaultProps" highlight-current
|
||||||
|
:filter-node-method="filterNode" node-key="id" default-expand-all :data="tree" ref="treRef"
|
||||||
|
@node-click="clickNode" :expand-on-click-node="false">
|
||||||
|
<template #default="{ node, data: nodeData }">
|
||||||
|
<span class="custom-tree-node">
|
||||||
|
<Icon :name="nodeData.icon" style="font-size: 16px" :style="{ color: nodeData.color }"
|
||||||
|
v-if="nodeData.icon" />
|
||||||
|
<span style="margin-left: 5px">{{ node.label }}</span>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref, watch, nextTick } from 'vue'
|
||||||
|
import { ElTree } from 'element-plus'
|
||||||
|
import { getUserDevTree } from '@/api/cs-device-boot/csLedger'
|
||||||
|
import { useConfig } from '@/stores/config'
|
||||||
|
import { querySysExcel } from '@/api/harmonic-boot/luckyexcel'
|
||||||
|
import { useDictData } from '@/stores/dictData'
|
||||||
|
import { createLineTreeDecorators } from './lineTreeUtils'
|
||||||
|
import { bootstrapWithTemplate } from './treeCommonUtils'
|
||||||
|
import { createTreeFilterNode } from './treeFilterUtils'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
template?: boolean
|
||||||
|
type?: string
|
||||||
|
height?: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = withDefaults(defineProps<Props>(), { template: false, type: 'apf', height: 0 })
|
||||||
|
|
||||||
|
defineOptions({ name: 'govern/APFTree', inheritAttrs: false })
|
||||||
|
|
||||||
|
const emit = defineEmits(['init', 'node-click', 'deviceTypeChange', 'Policy'])
|
||||||
|
|
||||||
|
const config = useConfig()
|
||||||
|
const dictData = useDictData()
|
||||||
|
const tree = ref<any[]>([])
|
||||||
|
const treRef = ref<InstanceType<typeof ElTree>>()
|
||||||
|
const filterText = ref('')
|
||||||
|
|
||||||
|
const defaultProps = { children: 'children', label: 'governName', value: 'id' }
|
||||||
|
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||||
|
const filterNode = createTreeFilterNode()
|
||||||
|
|
||||||
|
watch(filterText, val => treRef.value?.filter(val))
|
||||||
|
|
||||||
|
/** 将 { 用户名: 设备[] | null } 转为两级树 */
|
||||||
|
function transformUserDevTree(data: Record<string, any[] | null>) {
|
||||||
|
const nodes: any[] = []
|
||||||
|
const devices: any[] = []
|
||||||
|
const { primary, statusColor, applyMeta } = decorators
|
||||||
|
|
||||||
|
if (!data || typeof data !== 'object') {
|
||||||
|
return { nodes, devices }
|
||||||
|
}
|
||||||
|
|
||||||
|
Object.entries(data).forEach(([userName, deviceList]) => {
|
||||||
|
const hasDevices = Array.isArray(deviceList) && deviceList.length > 0
|
||||||
|
const userId = hasDevices ? deviceList[0]?.monitorUser || userName : `apf-user-${userName}`
|
||||||
|
|
||||||
|
const children = hasDevices
|
||||||
|
? deviceList.map((device: any) => {
|
||||||
|
const node = {
|
||||||
|
...device,
|
||||||
|
level: 2,
|
||||||
|
pid: userId,
|
||||||
|
pname: userName,
|
||||||
|
|
||||||
|
}
|
||||||
|
applyMeta(node, {
|
||||||
|
icon: 'el-icon-Document',
|
||||||
|
color: primary(),
|
||||||
|
})
|
||||||
|
devices.push(node)
|
||||||
|
return node
|
||||||
|
})
|
||||||
|
: undefined
|
||||||
|
|
||||||
|
const userNode: any = {
|
||||||
|
id: userId,
|
||||||
|
governName: userName,
|
||||||
|
level: 1,
|
||||||
|
...(children ? { children } : {})
|
||||||
|
}
|
||||||
|
applyMeta(userNode, { icon: 'el-icon-User', color: primary(), disabled: true })
|
||||||
|
nodes.push(userNode)
|
||||||
|
})
|
||||||
|
|
||||||
|
return { nodes, devices }
|
||||||
|
}
|
||||||
|
|
||||||
|
async function selectFirstDevice(devices: any[]) {
|
||||||
|
const node = devices[0]
|
||||||
|
if (!node) {
|
||||||
|
emit('init', { ...node })
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
treRef.value?.setCurrentKey(node.id)
|
||||||
|
emit('init', { level: 2, ...node })
|
||||||
|
}
|
||||||
|
|
||||||
|
async function loadTree() {
|
||||||
|
tree.value = []
|
||||||
|
const res = await getUserDevTree({ type: props.type })
|
||||||
|
const { nodes, devices } = transformUserDevTree(res.data)
|
||||||
|
tree.value = nodes
|
||||||
|
await selectFirstDevice(devices)
|
||||||
|
}
|
||||||
|
|
||||||
|
const clickNode = (node: any) => {
|
||||||
|
if (node?.children?.length) return
|
||||||
|
emit('node-click', node)
|
||||||
|
}
|
||||||
|
|
||||||
|
bootstrapWithTemplate(
|
||||||
|
props.template,
|
||||||
|
loadTree,
|
||||||
|
() => querySysExcel({ id: dictData.state.area[0]?.id }),
|
||||||
|
data => emit('Policy', data)
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(() => props.type, () => {
|
||||||
|
loadTree()
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.apf-tree {
|
||||||
|
width: 280px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-tree {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
|
overflow-y: auto;
|
||||||
|
|
||||||
|
:deep(.el-tree) {
|
||||||
|
border: 1px solid var(--el-border-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||||
|
background-color: var(--el-color-primary-light-7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-tree-node {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -152,7 +152,7 @@ async function selectInitialNode(
|
|||||||
|
|
||||||
treeInstance?.setCurrentKey(node.id)
|
treeInstance?.setCurrentKey(node.id)
|
||||||
|
|
||||||
emit('init', { level, ...node })
|
emit('init', { ...node })
|
||||||
|
|
||||||
return
|
return
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree
|
<Tree
|
||||||
ref="treRef"
|
ref="treRef"
|
||||||
|
|
||||||
:width="width"
|
:width="width"
|
||||||
:showPush="props.showPush"
|
:showPush="props.showPush"
|
||||||
:expand-on-click-node="false"
|
:expand-on-click-node="false"
|
||||||
@@ -62,9 +63,8 @@ async function loadTree() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await selectTreeNode(treRef.value, node, {
|
await selectTreeNode(treRef.value, node, {
|
||||||
level: 3,
|
|
||||||
onSelect: selected => {
|
onSelect: selected => {
|
||||||
emit('init', { level: 3, ...selected })
|
emit('init', { ...selected, level: selected.level ?? 3 })
|
||||||
changePointType('4', selected)
|
changePointType('4', selected)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -48,7 +48,7 @@ async function initTree(list: any[]) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
await selectTreeNode(treRef.value, node, {
|
await selectTreeNode(treRef.value, node, {
|
||||||
onSelect: selected => emit('init', { level: 2, ...selected })
|
onSelect: selected => emit('init', { ...selected, level: 2 })
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,21 +1,12 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree
|
<Tree ref="treRef" @check-change="handleCheckChange" :default-checked-keys="defaultCheckedKeys" default-expand-all
|
||||||
ref="treRef"
|
:show-checkbox="props.showCheckbox" :data="tree" :height="props.height" @changeDeviceType="changeDeviceType"
|
||||||
@check-change="handleCheckChange"
|
@changeTreeType="loadTree" :engineering="props.engineering" leaf-mode="device" />
|
||||||
:default-checked-keys="defaultCheckedKeys"
|
|
||||||
:show-checkbox="props.showCheckbox"
|
|
||||||
:data="tree"
|
|
||||||
:height="props.height"
|
|
||||||
@changeDeviceType="changeDeviceType"
|
|
||||||
@changeTreeType="loadTree"
|
|
||||||
:engineering="props.engineering"
|
|
||||||
leaf-mode="device"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref, onMounted } from 'vue'
|
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||||
import { throttle } from 'lodash'
|
import { debounce } from 'lodash-es'
|
||||||
import Tree from '../device.vue'
|
import Tree from '../device.vue'
|
||||||
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
import { getDeviceTree } from '@/api/cs-device-boot/csLedger'
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
@@ -48,24 +39,28 @@ const tree = ref<any[]>([])
|
|||||||
const treRef = ref<InstanceType<typeof Tree>>()
|
const treRef = ref<InstanceType<typeof Tree>>()
|
||||||
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiPrimary'))
|
||||||
|
|
||||||
const changeDeviceType = (val: any, obj: any) => emit('deviceTypeChange', val, obj)
|
const changeDeviceType = debounce((val: any, obj: any) => {
|
||||||
|
emit('deviceTypeChange', val, obj)
|
||||||
|
}, 300)
|
||||||
|
|
||||||
|
onBeforeUnmount(() => changeDeviceType.cancel())
|
||||||
|
|
||||||
async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
|
async function selectInitialNode(type: string | undefined, leaves: LineTreeLeaves) {
|
||||||
const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
|
const candidates: { refKey: TreeRefKey; list: any[]; level: number }[] =
|
||||||
type === '2'
|
type === '2'
|
||||||
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 2 }]
|
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 2 }]
|
||||||
: [
|
: [
|
||||||
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
||||||
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
||||||
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
||||||
]
|
]
|
||||||
|
|
||||||
for (const { refKey, list, level } of candidates) {
|
for (const { refKey, list, level } of candidates) {
|
||||||
const node = list[0]
|
const node = list[0]
|
||||||
if (!node) continue
|
if (!node) continue
|
||||||
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
||||||
treeInstance?.setCurrentKey(node.id)
|
treeInstance?.setCurrentKey(node.id)
|
||||||
emit('init', { level, ...node })
|
emit('init', { ...node })
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
emit('init')
|
emit('init')
|
||||||
@@ -79,15 +74,12 @@ const loadTree = (type?: string) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
onMounted(() => loadTree(props.engineering ? '2' : '1'))
|
onMounted(() => loadTree( '2' ))
|
||||||
|
|
||||||
const handleCheckChange = throttle(
|
const handleCheckChange =
|
||||||
(data: any, checked: any, indeterminate: any) => {
|
(data: any, checked: any, indeterminate: any) => {
|
||||||
emit('checkChange', { data, checked, indeterminate })
|
emit('checkChange', { data, checked, indeterminate })
|
||||||
},
|
}
|
||||||
300,
|
|
||||||
{ leading: true, trailing: false }
|
|
||||||
)
|
|
||||||
|
|
||||||
defineExpose({ treRef })
|
defineExpose({ treRef })
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -115,10 +115,16 @@ export function decorateCloudTree(root: any, decorators: LineTreeDecorators): an
|
|||||||
l2.children?.forEach((l3: any) => {
|
l2.children?.forEach((l3: any) => {
|
||||||
applyMeta(l3, {
|
applyMeta(l3, {
|
||||||
icon: 'el-icon-Platform',
|
icon: 'el-icon-Platform',
|
||||||
level: 2,
|
// level: 2,
|
||||||
color: statusColor(l3.comFlag)
|
color: statusColor(l3.comFlag)
|
||||||
})
|
})
|
||||||
leaves.push(l3)
|
l3.children?.forEach((l4: any) => {
|
||||||
|
applyMeta(l4, {
|
||||||
|
icon: 'local-监测点',
|
||||||
|
color: statusColor(l4.comFlag)
|
||||||
|
})
|
||||||
|
leaves.push(l4)
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -12,18 +12,16 @@ export interface LineTreeDecorators {
|
|||||||
statusColor: (comFlag: number) => string
|
statusColor: (comFlag: number) => string
|
||||||
applyMeta: (
|
applyMeta: (
|
||||||
node: any,
|
node: any,
|
||||||
meta: { icon: string; color?: string; level?: number; disabled?: boolean }
|
meta: { icon: string; color?: string; level?: number; disabled?: boolean; pname?: string }
|
||||||
) => void
|
) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export function createLineTreeDecorators(getPrimaryColor: () => string): LineTreeDecorators {
|
export function createLineTreeDecorators(getPrimaryColor: () => string): LineTreeDecorators {
|
||||||
const offlineColor = '#e26257 !important'
|
const offlineColor = '#e26257 !important'
|
||||||
const statusColor = (comFlag: number) => (comFlag === 2 ? getPrimaryColor() : offlineColor)
|
// const statusColor = (comFlag: number) => (comFlag === 2 ? getPrimaryColor() : offlineColor)
|
||||||
|
const statusColor = (comFlag: number) => (comFlag === 2 ? '#2ab914' : offlineColor)
|
||||||
|
|
||||||
const applyMeta = (
|
const applyMeta = (node: any, meta: { icon: string; color?: string; level?: number; disabled?: boolean }) => {
|
||||||
node: any,
|
|
||||||
meta: { icon: string; color?: string; level?: number; disabled?: boolean }
|
|
||||||
) => {
|
|
||||||
node.icon = meta.icon
|
node.icon = meta.icon
|
||||||
if (meta.color !== undefined) node.color = meta.color
|
if (meta.color !== undefined) node.color = meta.color
|
||||||
if (meta.level !== undefined) node.level = meta.level
|
if (meta.level !== undefined) node.level = meta.level
|
||||||
@@ -39,6 +37,21 @@ export function createLineTreeDecorators(getPrimaryColor: () => string): LineTre
|
|||||||
|
|
||||||
export type TreeRefKey = 'treeRef1' | 'treeRef2' | 'treeRef3' | 'treeRef4'
|
export type TreeRefKey = 'treeRef1' | 'treeRef2' | 'treeRef3' | 'treeRef4'
|
||||||
|
|
||||||
|
/** 线路树可选叶子节点元数据 */
|
||||||
|
export const LINE_LEAF_META = { level: 3, type: 'line' as const }
|
||||||
|
|
||||||
|
/** 是否为线路树可选叶子(监测点/线路) */
|
||||||
|
export function isLineTreeLeaf(node: any): boolean {
|
||||||
|
if (!node?.id) return false
|
||||||
|
return node.type === 'line' || node.level === 3
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 是否为报告/导出可选监测点 */
|
||||||
|
export function isReportMonitorPoint(node: any): boolean {
|
||||||
|
if (!node?.id) return false
|
||||||
|
return isLineTreeLeaf(node) || node.level === 3 || (!node.children?.length && !!node.pid)
|
||||||
|
}
|
||||||
|
|
||||||
export interface DecorateLineTreeOptions {
|
export interface DecorateLineTreeOptions {
|
||||||
/** 是否禁用父级节点(分析树隐藏父节点,测点树不禁用) */
|
/** 是否禁用父级节点(分析树隐藏父节点,测点树不禁用) */
|
||||||
disableParents?: boolean
|
disableParents?: boolean
|
||||||
@@ -69,8 +82,13 @@ export function decorateLineTree(
|
|||||||
...parentDisabled
|
...parentDisabled
|
||||||
})
|
})
|
||||||
grand.children?.forEach((leaf: any) => {
|
grand.children?.forEach((leaf: any) => {
|
||||||
applyMeta(leaf, { icon: 'el-icon-Platform', color: statusColor(leaf.comFlag) })
|
applyMeta(leaf, {
|
||||||
leaves.engineering.push(leaf)
|
icon: 'local-监测点',
|
||||||
|
color: statusColor(leaf.comFlag),
|
||||||
|
|
||||||
|
...LINE_LEAF_META
|
||||||
|
})
|
||||||
|
;(leaf.pname = item.name), leaves.engineering.push(leaf)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -90,18 +108,31 @@ export function decorateLineTree(
|
|||||||
...parentDisabled
|
...parentDisabled
|
||||||
})
|
})
|
||||||
l3.children?.forEach((l4: any) => {
|
l3.children?.forEach((l4: any) => {
|
||||||
applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
|
applyMeta(l4, {
|
||||||
leaves.govern.push(l4)
|
icon: 'local-监测点',
|
||||||
|
color: statusColor(l4.comFlag),
|
||||||
|
|
||||||
|
...LINE_LEAF_META
|
||||||
|
})
|
||||||
|
;(l4.pname = item.name), (l4.devConType = l3.devConType), leaves.govern.push(l4)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else if (item.name === '便携式设备') {
|
} else if (item.name === '便携式设备') {
|
||||||
|
item.pname = item.name
|
||||||
item.children?.forEach((l1: any) => {
|
item.children?.forEach((l1: any) => {
|
||||||
|
|
||||||
applyMeta(l1, { icon: 'el-icon-Platform', color: statusColor(l1.comFlag) })
|
applyMeta(l1, { icon: 'el-icon-Platform', color: statusColor(l1.comFlag) })
|
||||||
|
l1.pname = item.name
|
||||||
l1.children?.forEach((l2: any) => {
|
l1.children?.forEach((l2: any) => {
|
||||||
applyMeta(l2, { icon: 'el-icon-Platform', color: statusColor(l2.comFlag) })
|
applyMeta(l2, {
|
||||||
leaves.portable.push(l2)
|
icon: 'local-监测点',
|
||||||
|
color: statusColor(l2.comFlag),
|
||||||
|
|
||||||
|
...LINE_LEAF_META
|
||||||
|
})
|
||||||
|
;(l2.pname = item.name), (l2.devConType = l1.devConType), leaves.portable.push(l2)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
} else if (item.name === '监测设备') {
|
} else if (item.name === '监测设备') {
|
||||||
@@ -117,8 +148,13 @@ export function decorateLineTree(
|
|||||||
...parentDisabled
|
...parentDisabled
|
||||||
})
|
})
|
||||||
l3.children?.forEach((l4: any) => {
|
l3.children?.forEach((l4: any) => {
|
||||||
applyMeta(l4, { icon: 'el-icon-Platform', color: statusColor(l4.comFlag) })
|
applyMeta(l4, {
|
||||||
leaves.monitor.push(l4)
|
icon: 'local-监测点',
|
||||||
|
color: statusColor(l4.comFlag),
|
||||||
|
|
||||||
|
...LINE_LEAF_META
|
||||||
|
})
|
||||||
|
;(l4.pname = item.name), (l4.devConType = l3.devConType), leaves.monitor.push(l4)
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -1,12 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree
|
<Tree ref="treRef" :width="width" :data="tree" default-expand-all @changePointType="changePointType"
|
||||||
ref="treRef"
|
@changeTreeType="loadTree" :height="height" />
|
||||||
:width="width"
|
|
||||||
:data="tree"
|
|
||||||
default-expand-all
|
|
||||||
@changePointType="changePointType"
|
|
||||||
@changeTreeType="loadTree"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -25,10 +19,12 @@ import {
|
|||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
template?: boolean
|
template?: boolean
|
||||||
|
height?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
template: false
|
template: false,
|
||||||
|
height: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
defineOptions({
|
defineOptions({
|
||||||
@@ -53,10 +49,10 @@ async function selectInitialNode(type: string | undefined, leaves: LineTreeLeave
|
|||||||
type === '2'
|
type === '2'
|
||||||
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 3 }]
|
? [{ refKey: 'treeRef4', list: leaves.engineering, level: 3 }]
|
||||||
: [
|
: [
|
||||||
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
{ refKey: 'treeRef1', list: leaves.govern, level: 2 },
|
||||||
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
{ refKey: 'treeRef2', list: leaves.portable, level: 2 },
|
||||||
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
{ refKey: 'treeRef3', list: leaves.monitor, level: 2 }
|
||||||
]
|
]
|
||||||
|
|
||||||
for (const { refKey, list, level } of candidates) {
|
for (const { refKey, list, level } of candidates) {
|
||||||
const node = list[0]
|
const node = list[0]
|
||||||
@@ -64,7 +60,7 @@ async function selectInitialNode(type: string | undefined, leaves: LineTreeLeave
|
|||||||
|
|
||||||
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
const treeInstance = await waitForTreeRef(treRef.value, refKey)
|
||||||
treeInstance?.setCurrentKey(node.id)
|
treeInstance?.setCurrentKey(node.id)
|
||||||
emit('init', { level, ...node })
|
emit('init', { ...node })
|
||||||
|
|
||||||
if (type === '2') {
|
if (type === '2') {
|
||||||
changePointType('4', node)
|
changePointType('4', node)
|
||||||
@@ -76,6 +72,7 @@ async function selectInitialNode(type: string | undefined, leaves: LineTreeLeave
|
|||||||
}
|
}
|
||||||
|
|
||||||
const loadTree = (type?: string) => {
|
const loadTree = (type?: string) => {
|
||||||
|
// console.log("🚀 ~ loadTree ~ type:", type)
|
||||||
tree.value = []
|
tree.value = []
|
||||||
getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
|
getLineTree({ type: type === '2' ? 'engineering' : '' }).then(res => {
|
||||||
const leaves = decorateLineTree(res.data, type, decorators, { disableParents: false })
|
const leaves = decorateLineTree(res.data, type, decorators, { disableParents: false })
|
||||||
@@ -89,11 +86,13 @@ function bootstrap() {
|
|||||||
querySysExcel({})
|
querySysExcel({})
|
||||||
.then((res: any) => {
|
.then((res: any) => {
|
||||||
emit('Policy', res.data)
|
emit('Policy', res.data)
|
||||||
loadTree()
|
loadTree('2')
|
||||||
})
|
})
|
||||||
.catch(() => loadTree())
|
.catch(() => loadTree())
|
||||||
} else {
|
} else {
|
||||||
loadTree()
|
|
||||||
|
|
||||||
|
loadTree('2')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@
|
|||||||
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
<div style="transition: all 0.3s; overflow: hidden; height: 100%">
|
||||||
<div class="cn-tree">
|
<div class="cn-tree">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
@@ -59,7 +59,7 @@ interface Props {
|
|||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), { template: false })
|
const props = withDefaults(defineProps<Props>(), { template: false })
|
||||||
|
|
||||||
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'editNode', 'getChart', 'Policy'])
|
const emit = defineEmits(['init', 'checkChange', 'nodeChange', 'node-click', 'editNode', 'getChart', 'Policy'])
|
||||||
|
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const tree = ref<any[]>([])
|
const tree = ref<any[]>([])
|
||||||
@@ -109,6 +109,7 @@ const clickNode = (e: any) => {
|
|||||||
planId.value = e?.children ? e.id : e.pid
|
planId.value = e?.children ? e.id : e.pid
|
||||||
id.value = e.id
|
id.value = e.id
|
||||||
emit('nodeChange', e)
|
emit('nodeChange', e)
|
||||||
|
emit('node-click', e)
|
||||||
}
|
}
|
||||||
|
|
||||||
bootstrapWithTemplate(
|
bootstrapWithTemplate(
|
||||||
|
|||||||
@@ -1,11 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<Tree
|
<Tree ref="treRef" :width="width" :data="tree" :expand-on-click-node="false" default-expand-all
|
||||||
ref="treRef"
|
@checkedNodesChange="handleCheckedNodesChange" />
|
||||||
:width="width"
|
|
||||||
:data="tree"
|
|
||||||
default-expand-all
|
|
||||||
@checkedNodesChange="handleCheckedNodesChange"
|
|
||||||
/>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
@@ -38,12 +33,25 @@ const decorators = createLineTreeDecorators(() => config.getColorVal('elementUiP
|
|||||||
|
|
||||||
const handleCheckedNodesChange = (nodes: any[]) => emit('checkChange', nodes)
|
const handleCheckedNodesChange = (nodes: any[]) => emit('checkChange', nodes)
|
||||||
|
|
||||||
|
function markPortableNoCheckbox(node: any) {
|
||||||
|
node.noCheckbox = true
|
||||||
|
node.children?.forEach(markPortableNoCheckbox)
|
||||||
|
}
|
||||||
|
|
||||||
async function loadTree() {
|
async function loadTree() {
|
||||||
tree.value = []
|
tree.value = []
|
||||||
const res = await getLineTree()
|
const res = await getLineTree()
|
||||||
const leaves = decorateLineTree(res.data, '1', decorators, { disableParents: false })
|
const leaves = decorateLineTree(res.data, '1', decorators, { disableParents: false })
|
||||||
tree.value = res.data.filter((item: any) => item.name === '监测设备')
|
// tree.value = res.data.filter((item: any) => (item.name === '监测设备'||item.name === '便携式设备'))
|
||||||
|
|
||||||
|
const monitorRoot = res.data.find((item: any) => item.name === '监测设备')
|
||||||
|
const portableRoot = res.data.find((item: any) => item.name === '便携式设备')
|
||||||
|
|
||||||
|
if (portableRoot) {
|
||||||
|
markPortableNoCheckbox(portableRoot)
|
||||||
|
}
|
||||||
|
|
||||||
|
tree.value = [monitorRoot, portableRoot].filter(Boolean)
|
||||||
const node = leaves.monitor[0]
|
const node = leaves.monitor[0]
|
||||||
if (!node) {
|
if (!node) {
|
||||||
emit('init')
|
emit('init')
|
||||||
|
|||||||
@@ -30,11 +30,27 @@ export async function selectTreeNode(
|
|||||||
) {
|
) {
|
||||||
if (!node) return false
|
if (!node) return false
|
||||||
const treeInstance = await waitForSingleTreeRef(treRef)
|
const treeInstance = await waitForSingleTreeRef(treRef)
|
||||||
treeInstance?.setCurrentKey(node.id)
|
if (!treeInstance) return false
|
||||||
|
|
||||||
|
await nextTick()
|
||||||
|
expandTreeNodePath(treeInstance, node.id)
|
||||||
|
treeInstance.setCurrentKey(node.id)
|
||||||
options?.onSelect?.(node)
|
options?.onSelect?.(node)
|
||||||
return true
|
return true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** 展开到目标节点的全部祖先,保证深层节点可见 */
|
||||||
|
export function expandTreeNodePath(treeInstance: any, nodeId: string) {
|
||||||
|
const target = treeInstance.getNode?.(nodeId)
|
||||||
|
if (!target) return
|
||||||
|
|
||||||
|
let parent = target.parent
|
||||||
|
while (parent && parent.level > 0) {
|
||||||
|
parent.expanded = true
|
||||||
|
parent = parent.parent
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export function bootstrapWithTemplate(
|
export function bootstrapWithTemplate(
|
||||||
template: boolean,
|
template: boolean,
|
||||||
loadFn: () => void,
|
loadFn: () => void,
|
||||||
|
|||||||
@@ -13,8 +13,8 @@
|
|||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :class="{ 'is-hidden': menuCollapse }">
|
<div class="cn-tree" :class="{ 'is-hidden': menuCollapse }">
|
||||||
<div class="cn-tree__toolbar">
|
<div class="cn-tree__toolbar">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit
|
||||||
maxlength="32"
|
|
||||||
v-model.trim="filterText"
|
v-model.trim="filterText"
|
||||||
placeholder="请输入内容"
|
placeholder="请输入内容"
|
||||||
clearable
|
clearable
|
||||||
@@ -44,7 +44,7 @@
|
|||||||
|
|
||||||
<el-tree
|
<el-tree
|
||||||
ref="treeRef"
|
ref="treeRef"
|
||||||
:style="{ height: treeHeight }"
|
:style="{ height: treeHeight,overflowY: 'auto' }"
|
||||||
:props="defaultProps"
|
:props="defaultProps"
|
||||||
highlight-current
|
highlight-current
|
||||||
:default-expand-all="false"
|
:default-expand-all="false"
|
||||||
@@ -93,7 +93,7 @@ interface Props {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
width: '280px',
|
width: '270px',
|
||||||
canExpand: true,
|
canExpand: true,
|
||||||
showPush: false,
|
showPush: false,
|
||||||
baseOffset: 190,
|
baseOffset: 190,
|
||||||
@@ -138,13 +138,16 @@ defineExpose({ treeRef })
|
|||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.cn-tree-root {
|
.cn-tree-root {
|
||||||
|
// width: 280px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
width: 270px;
|
||||||
transition: width 0.3s;
|
transition: width 0.3s;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
|
||||||
&.is-fill-height {
|
&.is-fill-height {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
@@ -203,7 +206,7 @@ defineExpose({ treeRef })
|
|||||||
|
|
||||||
:deep(.el-tree) {
|
:deep(.el-tree) {
|
||||||
border: 1px solid var(--el-border-color);
|
border: 1px solid var(--el-border-color);
|
||||||
border-radius: 4px;
|
// border-radius: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<!-- 设备监控使用折叠面板渲染多个tree -->
|
<!-- 设备监控使用折叠面板渲染多个tree -->
|
||||||
<template>
|
<template>
|
||||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="display: flex; overflow: hidden">
|
<div :style="{ width: menuCollapse ? '40px' : props.width }" class="point-tree-root">
|
||||||
<!-- <Icon
|
<!-- <Icon
|
||||||
v-show="menuCollapse"
|
v-show="menuCollapse"
|
||||||
@click="onMenuCollapse"
|
@click="onMenuCollapse"
|
||||||
@@ -12,16 +12,12 @@
|
|||||||
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
v-if="route.path != '/admin/govern/reportCore/statistics/index'"
|
||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1, display: menuCollapse ? 'none' : '' }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div class="tree-search mb10">
|
||||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
<template #prepend>
|
<template #prepend>
|
||||||
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
|
<el-select v-model="treeType" @change="changeTreeType" style="min-width: 75px">
|
||||||
<el-option
|
<el-option v-for="item in options" :key="item.value" :label="item.label"
|
||||||
v-for="item in options"
|
:value="item.value" />
|
||||||
:key="item.value"
|
|
||||||
:label="item.label"
|
|
||||||
:value="item.value"
|
|
||||||
/>
|
|
||||||
</el-select>
|
</el-select>
|
||||||
</template>
|
</template>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
@@ -39,120 +35,67 @@
|
|||||||
/> -->
|
/> -->
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-collapse
|
<el-collapse :accordion="true" v-model="activeName" class="device-collapse" @change="changeDevice"
|
||||||
:accordion="true"
|
v-if="treeType == '1'" v-loading="loading">
|
||||||
v-model="activeName"
|
|
||||||
style="flex: 1; height: 100%"
|
|
||||||
@change="changeDevice"
|
|
||||||
v-if="treeType == '1'"
|
|
||||||
v-loading="loading"
|
|
||||||
>
|
|
||||||
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
<el-collapse-item title="治理设备" name="0" v-if="zlDeviceData.length">
|
||||||
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
<div class="collapse-tree-panel collapse-tree-panel--govern">
|
||||||
<el-option label="功能调试" value="2" />
|
<el-select v-model="process" clearable placeholder="请选择状态" class="mb10">
|
||||||
<el-option label="出厂调试" value="3" />
|
<el-option label="功能调试" value="2" />
|
||||||
<el-option label="正式投运" value="4" />
|
<el-option label="出厂调试" value="3" />
|
||||||
</el-select>
|
<el-option label="正式投运" value="4" />
|
||||||
<el-tree
|
</el-select>
|
||||||
:style="{ height: governTreeHeight }"
|
<el-tree ref="treeRef1" :props="defaultProps" highlight-current :filter-node-method="filterNode"
|
||||||
ref="treeRef1"
|
node-key="id" v-bind="$attrs" :data="zlDevList" class="collapse-tree"
|
||||||
:props="defaultProps"
|
:default-expand-all="false">
|
||||||
highlight-current
|
<template #default="{ node, data: nodeData }">
|
||||||
:filter-node-method="filterNode"
|
<span class="custom-tree-node">
|
||||||
node-key="id"
|
<Icon :name="nodeData.icon" style="font-size: 16px"
|
||||||
v-bind="$attrs"
|
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
|
||||||
:data="zlDevList"
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
style="overflow: auto"
|
</span>
|
||||||
:default-expand-all="false"
|
</template>
|
||||||
>
|
</el-tree>
|
||||||
<template #default="{ node, data: nodeData }">
|
</div>
|
||||||
<span class="custom-tree-node">
|
|
||||||
<Icon
|
|
||||||
:name="nodeData.icon"
|
|
||||||
style="font-size: 16px"
|
|
||||||
:style="{ color: nodeData.color }"
|
|
||||||
v-if="nodeData.icon"
|
|
||||||
/>
|
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
<el-collapse-item title="便携式设备" name="1" v-if="bxsDeviceData.length">
|
||||||
<el-tree
|
<div class="collapse-tree-panel">
|
||||||
:style="{ height: otherTreeHeight }"
|
<el-tree ref="treeRef2" :props="defaultProps" highlight-current :default-expand-all="false"
|
||||||
ref="treeRef2"
|
:filter-node-method="filterNode" node-key="id" :data="bxsDeviceData" v-bind="$attrs"
|
||||||
:props="defaultProps"
|
class="collapse-tree">
|
||||||
highlight-current
|
<template #default="{ node, data: nodeData }">
|
||||||
:default-expand-all="false"
|
<span class="custom-tree-node">
|
||||||
:filter-node-method="filterNode"
|
<Icon :name="nodeData.icon" style="font-size: 16px"
|
||||||
node-key="id"
|
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
|
||||||
:data="bxsDeviceData"
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
v-bind="$attrs"
|
</span>
|
||||||
style="overflow: auto"
|
</template>
|
||||||
>
|
</el-tree>
|
||||||
<template #default="{ node, data: nodeData }">
|
</div>
|
||||||
<span class="custom-tree-node">
|
|
||||||
<Icon
|
|
||||||
:name="nodeData.icon"
|
|
||||||
style="font-size: 16px"
|
|
||||||
:style="{ color: nodeData.color }"
|
|
||||||
v-if="nodeData.icon"
|
|
||||||
/>
|
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
<el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
|
<el-collapse-item title="监测设备" name="2" v-if="yqfDeviceData.length">
|
||||||
<el-tree
|
<div class="collapse-tree-panel">
|
||||||
:style="{ height: otherTreeHeight }"
|
<el-tree ref="treeRef3" :props="defaultProps" highlight-current :default-expand-all="false"
|
||||||
ref="treeRef3"
|
:filter-node-method="filterNode" node-key="id" :data="yqfDeviceData" v-bind="$attrs"
|
||||||
:props="defaultProps"
|
class="collapse-tree">
|
||||||
highlight-current
|
<template #default="{ node, data: nodeData }">
|
||||||
:default-expand-all="false"
|
<span class="custom-tree-node">
|
||||||
:filter-node-method="filterNode"
|
<Icon :name="nodeData.icon" style="font-size: 16px"
|
||||||
node-key="id"
|
:style="{ color: nodeData.color }" v-if="nodeData.icon" />
|
||||||
:data="yqfDeviceData"
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
v-bind="$attrs"
|
</span>
|
||||||
style="overflow: auto"
|
</template>
|
||||||
>
|
</el-tree>
|
||||||
<template #default="{ node, data: nodeData }">
|
</div>
|
||||||
<span class="custom-tree-node">
|
|
||||||
<Icon
|
|
||||||
:name="nodeData.icon"
|
|
||||||
style="font-size: 16px"
|
|
||||||
:style="{ color: nodeData.color }"
|
|
||||||
v-if="nodeData.icon"
|
|
||||||
/>
|
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</el-tree>
|
|
||||||
</el-collapse-item>
|
</el-collapse-item>
|
||||||
</el-collapse>
|
</el-collapse>
|
||||||
<div v-if="treeType == '2'" v-loading="loading">
|
<div v-if="treeType == '2'" class="engineering-tree-wrap" v-loading="loading">
|
||||||
<el-tree
|
<el-tree class="engineering-tree pt10 collapse-tree" ref="treeRef4" :props="defaultProps"
|
||||||
:style="{ height: engineeringTreeHeight }"
|
highlight-current :filter-node-method="filterNode" node-key="id" v-bind="$attrs" :data="props.data"
|
||||||
class="pt10"
|
:default-expand-all="false">
|
||||||
ref="treeRef4"
|
|
||||||
:props="defaultProps"
|
|
||||||
highlight-current
|
|
||||||
:filter-node-method="filterNode"
|
|
||||||
node-key="id"
|
|
||||||
v-bind="$attrs"
|
|
||||||
:data="props.data"
|
|
||||||
style="overflow: auto"
|
|
||||||
:default-expand-all="false"
|
|
||||||
>
|
|
||||||
<template #default="{ node, data: nodeData }">
|
<template #default="{ node, data: nodeData }">
|
||||||
<span class="custom-tree-node">
|
<span class="custom-tree-node">
|
||||||
<Icon
|
<Icon :name="nodeData.icon" style="font-size: 16px" :style="{ color: nodeData.color }"
|
||||||
:name="nodeData.icon"
|
v-if="nodeData.icon" />
|
||||||
style="font-size: 16px"
|
|
||||||
:style="{ color: nodeData.color }"
|
|
||||||
v-if="nodeData.icon"
|
|
||||||
/>
|
|
||||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
@@ -165,7 +108,7 @@
|
|||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||||
import { ElTree, type CollapseModelValue } from 'element-plus'
|
import { ElTree, type CollapseModelValue } from 'element-plus'
|
||||||
import { ref, watch, nextTick, computed } from 'vue'
|
import { ref, watch, nextTick } from 'vue'
|
||||||
import { useRoute } from 'vue-router'
|
import { useRoute } from 'vue-router'
|
||||||
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
import { collectDeviceLeaves } from './govern/lineTreeUtils'
|
||||||
|
|
||||||
@@ -181,22 +124,24 @@ interface Props {
|
|||||||
canExpand?: boolean
|
canExpand?: boolean
|
||||||
type?: string
|
type?: string
|
||||||
data?: any[]
|
data?: any[]
|
||||||
|
height?: number
|
||||||
}
|
}
|
||||||
|
|
||||||
const props = withDefaults(defineProps<Props>(), {
|
const props = withDefaults(defineProps<Props>(), {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
canExpand: true,
|
canExpand: true,
|
||||||
type: '',
|
type: '',
|
||||||
data: () => []
|
data: () => [],
|
||||||
|
height: 0
|
||||||
})
|
})
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
const { proxy } = useCurrentInstance()
|
const { proxy } = useCurrentInstance()
|
||||||
|
|
||||||
const treeType = ref('1')
|
const treeType = ref('2')
|
||||||
const options = [
|
const options = [
|
||||||
|
{ label: '工程', value: '2' },
|
||||||
{ label: '设备', value: '1' },
|
{ label: '设备', value: '1' },
|
||||||
{ label: '工程', value: '2' }
|
|
||||||
]
|
]
|
||||||
|
|
||||||
const menuCollapse = ref(false)
|
const menuCollapse = ref(false)
|
||||||
@@ -212,12 +157,6 @@ const zlDevList = ref<any[]>([])
|
|||||||
const bxsDeviceData = ref<any[]>([])
|
const bxsDeviceData = ref<any[]>([])
|
||||||
const yqfDeviceData = ref<any[]>([])
|
const yqfDeviceData = ref<any[]>([])
|
||||||
|
|
||||||
const governTreeHeight = computed(() => 'calc(100vh - 380px)')
|
|
||||||
const otherTreeHeight = computed(() =>
|
|
||||||
zlDeviceData.value.length ? 'calc(100vh - 340px)' : 'calc(100vh - 238px)'
|
|
||||||
)
|
|
||||||
const engineeringTreeHeight = computed(() => 'calc(100vh - 188px)')
|
|
||||||
|
|
||||||
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
const treeRef1 = ref<InstanceType<typeof ElTree>>()
|
||||||
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
const treeRef2 = ref<InstanceType<typeof ElTree>>()
|
||||||
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
const treeRef3 = ref<InstanceType<typeof ElTree>>()
|
||||||
@@ -379,6 +318,17 @@ const changeTreeType = (val: string) => {
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
:deep(.el-tree-node) {
|
||||||
|
white-space: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point-tree-root {
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.cn-tree {
|
.cn-tree {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -386,8 +336,11 @@ const changeTreeType = (val: string) => {
|
|||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: 100%;
|
||||||
width: 280px;
|
width: 280px;
|
||||||
background: #fff;
|
background: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
:deep(.el-tree) {
|
:deep(.el-tree) {
|
||||||
border: 1px solid var(--el-border-color);
|
border: 1px solid var(--el-border-color);
|
||||||
@@ -397,6 +350,85 @@ const changeTreeType = (val: string) => {
|
|||||||
background-color: var(--el-color-primary-light-7);
|
background-color: var(--el-color-primary-light-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tree-search {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.device-collapse {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
:deep(.el-collapse-item) {
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
|
.el-collapse-item__header {
|
||||||
|
height: 48px;
|
||||||
|
line-height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.el-collapse-item__wrap {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-collapse-item__content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
min-height: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.engineering-tree-wrap {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.engineering-tree {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-tree-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&--govern>.el-select {
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.collapse-tree {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-collapse {
|
.menu-collapse {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
@@ -406,7 +438,9 @@ const changeTreeType = (val: string) => {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.el-input-group__prepend) {
|
:deep(.el-input-group__prepend) {
|
||||||
background-color: var(--el-fill-color-blank);
|
background-color: var(--el-fill-color-blank);
|
||||||
}
|
}
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@
|
|||||||
/> -->
|
/> -->
|
||||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||||
<div style="display: flex; align-items: center" class="mb10">
|
<div style="display: flex; align-items: center" class="mb10">
|
||||||
<el-input maxlength="32" v-model.trim="filterText" placeholder="请输入内容" clearable>
|
<el-input maxlength="32" show-word-limit v-model.trim="filterText" placeholder="请输入内容" clearable>
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||||
</template>
|
</template>
|
||||||
@@ -52,6 +52,7 @@ import useCurrentInstance from '@/utils/useCurrentInstance'
|
|||||||
import { ElMessage, ElTree } from 'element-plus'
|
import { ElMessage, ElTree } from 'element-plus'
|
||||||
import { ref, watch } from 'vue'
|
import { ref, watch } from 'vue'
|
||||||
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
import { createTreeFilterNode } from './govern/treeFilterUtils'
|
||||||
|
import { isLineTreeLeaf } from './govern/lineTreeUtils'
|
||||||
|
|
||||||
defineOptions({ name: 'govern/select', inheritAttrs: false })
|
defineOptions({ name: 'govern/select', inheritAttrs: false })
|
||||||
|
|
||||||
@@ -70,12 +71,17 @@ const emit = defineEmits(['changePointType', 'checkedNodesChange'])
|
|||||||
const { proxy } = useCurrentInstance()
|
const { proxy } = useCurrentInstance()
|
||||||
const menuCollapse = ref(false)
|
const menuCollapse = ref(false)
|
||||||
const filterText = ref('')
|
const filterText = ref('')
|
||||||
const defaultProps = { label: 'name', value: 'id' }
|
const defaultProps = {
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
class: (data: any) => (data.noCheckbox ? 'is-no-checkbox' : '')
|
||||||
|
}
|
||||||
const filterNode = createTreeFilterNode()
|
const filterNode = createTreeFilterNode()
|
||||||
const checkedNodes = ref<any[]>([])
|
const checkedNodes = ref<any[]>([])
|
||||||
const defaultCheckedKeys = ref<string[]>([])
|
const defaultCheckedKeys = ref<string[]>([])
|
||||||
const MAX_CHECK = 5
|
const MAX_CHECK = 5
|
||||||
const MONITOR_LEVEL = 3
|
|
||||||
|
const isMonitorLeaf = (node: any) => isLineTreeLeaf(node)
|
||||||
|
|
||||||
watch(filterText, val => treeRef.value?.filter(val))
|
watch(filterText, val => treeRef.value?.filter(val))
|
||||||
|
|
||||||
@@ -85,7 +91,7 @@ const onMenuCollapse = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleCheckChange = (_data: any, checkInfo: any) => {
|
const handleCheckChange = (_data: any, checkInfo: any) => {
|
||||||
const monitoringPointNodes = (checkInfo.checkedNodes as any[]).filter(node => node.level === MONITOR_LEVEL)
|
const monitoringPointNodes = (checkInfo.checkedNodes as any[]).filter(isMonitorLeaf)
|
||||||
|
|
||||||
if (monitoringPointNodes.length > MAX_CHECK) {
|
if (monitoringPointNodes.length > MAX_CHECK) {
|
||||||
const previousCheckedNodes = checkedNodes.value
|
const previousCheckedNodes = checkedNodes.value
|
||||||
@@ -122,7 +128,7 @@ const updateNodeCheckStatus = (currentCount: number) => {
|
|||||||
if (!treeRef.value) return
|
if (!treeRef.value) return
|
||||||
const isMaxSelected = currentCount >= MAX_CHECK
|
const isMaxSelected = currentCount >= MAX_CHECK
|
||||||
treeRef.value.store._getAllNodes().forEach((node: any) => {
|
treeRef.value.store._getAllNodes().forEach((node: any) => {
|
||||||
if (node.level === MONITOR_LEVEL) {
|
if (isMonitorLeaf(node.data)) {
|
||||||
node.data.disabled = isMaxSelected && !node.checked
|
node.data.disabled = isMaxSelected && !node.checked
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@@ -150,6 +156,10 @@ defineExpose({ treeRef })
|
|||||||
background-color: var(--el-color-primary-light-7);
|
background-color: var(--el-color-primary-light-7);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:deep(.el-tree-node.is-no-checkbox > .el-tree-node__content .el-checkbox) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.menu-collapse {
|
.menu-collapse {
|
||||||
color: var(--el-color-primary);
|
color: var(--el-color-primary);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,46 +1,100 @@
|
|||||||
<template>
|
<template>
|
||||||
<div style='border: 1px solid #e4e4e4;height: 100%'>
|
<div style="border: 1px solid #e4e4e4; height: 100%">
|
||||||
<Toolbar
|
<Toolbar
|
||||||
style='border-bottom: 1px solid #e4e4e4;border-top: 1px solid #e4e4e4'
|
style="border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4"
|
||||||
:editor='editorRef'
|
:editor="editorRef"
|
||||||
:defaultConfig='toolbarConfig'
|
:defaultConfig="toolbarConfig"
|
||||||
mode='default'
|
mode="default"
|
||||||
/>
|
/>
|
||||||
<Editor
|
<Editor
|
||||||
v-bind='$attrs'
|
v-model="innerHtml"
|
||||||
:defaultConfig='editorConfig'
|
:defaultConfig="editorConfig"
|
||||||
mode='default'
|
mode="default"
|
||||||
@onCreated='handleCreated'
|
@onCreated="handleCreated"
|
||||||
style='height: calc(100% - 42px); '
|
@onChange="handleChange"
|
||||||
|
style="height: calc(100% - 42px)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang='ts' setup>
|
|
||||||
import '@wangeditor/editor/dist/css/style.css' // 引入 css
|
|
||||||
|
|
||||||
import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
|
<script lang="ts" setup>
|
||||||
|
import '@wangeditor/editor/dist/css/style.css'
|
||||||
|
|
||||||
|
import { nextTick, onBeforeUnmount, ref, shallowRef, watch } from 'vue'
|
||||||
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
|
||||||
// 编辑器实例,必须用 shallowRef
|
|
||||||
const editorRef = shallowRef()
|
|
||||||
|
|
||||||
// 内容 HTML
|
const props = withDefaults(defineProps<{ modelValue?: string | null }>(), {
|
||||||
const valueHtml = ref('<p>hello</p>')
|
modelValue: ''
|
||||||
|
|
||||||
// 模拟 ajax 异步获取内容
|
|
||||||
onMounted(() => {
|
|
||||||
setTimeout(() => {
|
|
||||||
valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
|
|
||||||
}, 1500)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
'update:modelValue': [value: string]
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const editorRef = shallowRef<any>()
|
||||||
|
const innerHtml = ref('<p><br></p>')
|
||||||
|
const isApplyingExternal = ref(false)
|
||||||
|
|
||||||
|
/** 清理 HTML,避免标签间空白文本节点导致 Slate 解析失败 */
|
||||||
|
function sanitizeEditorHtml(html: string | null | undefined): string {
|
||||||
|
if (html == null || html === '') return '<p><br></p>'
|
||||||
|
const cleaned = html
|
||||||
|
.replace(/>\s+</g, '><')
|
||||||
|
.replace(/(<\/li>)\s+(<li>)/g, '$1$2')
|
||||||
|
.trim()
|
||||||
|
return cleaned || '<p><br></p>'
|
||||||
|
}
|
||||||
|
|
||||||
|
function toSaveHtml(html: string): string {
|
||||||
|
return html === '<p><br></p>' ? '' : html
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyHtmlToEditor(html: string | null | undefined) {
|
||||||
|
const content = sanitizeEditorHtml(html)
|
||||||
|
const editor = editorRef.value
|
||||||
|
if (!editor || editor.isDestroyed) return
|
||||||
|
|
||||||
|
try {
|
||||||
|
const current = editor.getHtml()
|
||||||
|
if (current === content) return
|
||||||
|
} catch {
|
||||||
|
// ignore getHtml error on half-destroyed editor
|
||||||
|
}
|
||||||
|
|
||||||
|
isApplyingExternal.value = true
|
||||||
|
try {
|
||||||
|
editor.setHtml(content)
|
||||||
|
innerHtml.value = content
|
||||||
|
} catch {
|
||||||
|
try {
|
||||||
|
editor.setHtml('<p><br></p>')
|
||||||
|
innerHtml.value = '<p><br></p>'
|
||||||
|
} catch {
|
||||||
|
// editor may already be destroyed
|
||||||
|
}
|
||||||
|
} finally {
|
||||||
|
nextTick(() => {
|
||||||
|
isApplyingExternal.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
val => {
|
||||||
|
applyHtmlToEditor(val)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
const toolbarConfig = {
|
const toolbarConfig = {
|
||||||
excludeKeys: ['fullScreen', 'emotion']
|
excludeKeys: ['fullScreen', 'emotion']
|
||||||
}
|
}
|
||||||
|
|
||||||
let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
|
let sever = '/cs-harmonic-boot/csconfiguration/uploadImage'
|
||||||
// 本地加api
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
if (process.env.NODE_ENV === 'development') {
|
||||||
sever = '/api' + sever
|
sever = '/api' + sever
|
||||||
}
|
}
|
||||||
|
|
||||||
const editorConfig = {
|
const editorConfig = {
|
||||||
placeholder: '请输入内容...',
|
placeholder: '请输入内容...',
|
||||||
MENU_CONF: {
|
MENU_CONF: {
|
||||||
@@ -52,23 +106,31 @@ const editorConfig = {
|
|||||||
withCredentials: true,
|
withCredentials: true,
|
||||||
headers: {},
|
headers: {},
|
||||||
timeout: 0,
|
timeout: 0,
|
||||||
customInsert: (insertImg, result, editor) => {
|
customInsert: (insertImg: (url: string) => void, result: { data: { url: string } }) => {
|
||||||
const url = result.data.url
|
insertImg(result.data.url)
|
||||||
insertImg(url)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// 组件销毁时,也及时销毁编辑器
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
const editor = editorRef.value
|
const editor = editorRef.value
|
||||||
if (editor == null) return
|
editorRef.value = undefined
|
||||||
|
if (editor == null || editor.isDestroyed) return
|
||||||
editor.destroy()
|
editor.destroy()
|
||||||
})
|
})
|
||||||
|
|
||||||
const handleCreated = (editor) => {
|
const handleCreated = (editor: any) => {
|
||||||
editorRef.value = editor // 记录 editor 实例,重要!
|
editorRef.value = editor
|
||||||
|
nextTick(() => {
|
||||||
|
applyHtmlToEditor(props.modelValue)
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const handleChange = (editor: { getHtml: () => string }) => {
|
||||||
|
if (isApplyingExternal.value) return
|
||||||
|
const html = editor.getHtml()
|
||||||
|
innerHtml.value = html
|
||||||
|
emit('update:modelValue', toSaveHtml(html))
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
125
src/config/dialog.ts
Normal file
125
src/config/dialog.ts
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
/**
|
||||||
|
* 系统弹框尺寸配置(大 / 中 / 小)
|
||||||
|
* 修改此处即可全局统一弹框宽度与默认行为
|
||||||
|
*/
|
||||||
|
export interface DialogPreset {
|
||||||
|
width: string
|
||||||
|
maxWidth: string
|
||||||
|
minWidth: string
|
||||||
|
closeOnClickModal: boolean
|
||||||
|
draggable: boolean
|
||||||
|
class: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dialogSmall: DialogPreset = {
|
||||||
|
width: '26vw',
|
||||||
|
maxWidth: '500px',
|
||||||
|
minWidth: '300px',
|
||||||
|
closeOnClickModal: false,
|
||||||
|
draggable: true,
|
||||||
|
class: 'dialog-small'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dialogMiddle: DialogPreset = {
|
||||||
|
width: '42vw',
|
||||||
|
maxWidth: '800px',
|
||||||
|
minWidth: '600px',
|
||||||
|
closeOnClickModal: false,
|
||||||
|
draggable: true,
|
||||||
|
class: 'dialog-middle'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const dialogBig: DialogPreset = {
|
||||||
|
width: '62vw',
|
||||||
|
maxWidth: '1200px',
|
||||||
|
minWidth: '800px',
|
||||||
|
closeOnClickModal: false,
|
||||||
|
draggable: true,
|
||||||
|
class: 'dialog-big'
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DIALOG_PRESETS = {
|
||||||
|
small: dialogSmall,
|
||||||
|
middle: dialogMiddle,
|
||||||
|
big: dialogBig
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export type DialogSize = keyof typeof DIALOG_PRESETS
|
||||||
|
|
||||||
|
export function getDialogPreset(size: DialogSize = 'small'): DialogPreset {
|
||||||
|
return DIALOG_PRESETS[size]
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getDialogWidth(size: DialogSize = 'small'): string {
|
||||||
|
return DIALOG_PRESETS[size].width
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 将配置同步到 CSS 变量,供全局样式使用 */
|
||||||
|
export function applyDialogCssVars(): void {
|
||||||
|
;(Object.keys(DIALOG_PRESETS) as DialogSize[]).forEach(size => {
|
||||||
|
const preset = DIALOG_PRESETS[size]
|
||||||
|
document.documentElement.style.setProperty(`--cn-dialog-width-${size}`, preset.width)
|
||||||
|
document.documentElement.style.setProperty(`--cn-dialog-max-width-${size}`, preset.maxWidth)
|
||||||
|
document.documentElement.style.setProperty(`--cn-dialog-min-width-${size}`, preset.minWidth)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 根据原有 width 推断弹框尺寸(兼容现有 el-dialog 的 width 写法)
|
||||||
|
*/
|
||||||
|
export function resolveDialogSize(width: string | number): DialogSize {
|
||||||
|
const raw = String(width).trim().toLowerCase()
|
||||||
|
|
||||||
|
if (raw.endsWith('%')) {
|
||||||
|
const percent = parseFloat(raw)
|
||||||
|
if (Number.isNaN(percent)) return 'small'
|
||||||
|
if (percent >= 60) return 'big'
|
||||||
|
if (percent >= 40) return 'middle'
|
||||||
|
return 'small'
|
||||||
|
}
|
||||||
|
|
||||||
|
if (raw.endsWith('vw')) {
|
||||||
|
const vw = parseFloat(raw)
|
||||||
|
if (Number.isNaN(vw)) return 'middle'
|
||||||
|
if (vw >= 55) return 'big'
|
||||||
|
if (vw >= 35) return 'middle'
|
||||||
|
return 'small'
|
||||||
|
}
|
||||||
|
|
||||||
|
const numeric = parseFloat(raw.replace(/px/g, ''))
|
||||||
|
if (Number.isNaN(numeric)) return 'small'
|
||||||
|
if (numeric >= 850) return 'big'
|
||||||
|
if (numeric >= 550) return 'middle'
|
||||||
|
return 'small'
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 无 width 时根据 class 推断尺寸 */
|
||||||
|
export function resolveDialogSizeByClass(classValue: unknown): DialogSize {
|
||||||
|
const classStr = normalizeClass(classValue)
|
||||||
|
|
||||||
|
if (classStr.includes('dialog-big')) return 'big'
|
||||||
|
if (classStr.includes('dialog-middle')) return 'middle'
|
||||||
|
if (classStr.includes('dialog-small')) return 'small'
|
||||||
|
|
||||||
|
if (classStr.includes('transient-filter-dialog')) return 'small'
|
||||||
|
if (classStr.includes('cn-operate-dialog')) return 'small'
|
||||||
|
|
||||||
|
if (classStr.includes('device-manage-popup') || classStr.includes('analysisList')) {
|
||||||
|
return 'big'
|
||||||
|
}
|
||||||
|
|
||||||
|
return 'middle'
|
||||||
|
}
|
||||||
|
|
||||||
|
function normalizeClass(classValue: unknown): string {
|
||||||
|
if (!classValue) return ''
|
||||||
|
if (typeof classValue === 'string') return classValue
|
||||||
|
if (Array.isArray(classValue)) return classValue.filter(Boolean).join(' ')
|
||||||
|
if (typeof classValue === 'object') {
|
||||||
|
return Object.entries(classValue as Record<string, boolean>)
|
||||||
|
.filter(([, active]) => active)
|
||||||
|
.map(([name]) => name)
|
||||||
|
.join(' ')
|
||||||
|
}
|
||||||
|
return String(classValue)
|
||||||
|
}
|
||||||
@@ -63,7 +63,7 @@
|
|||||||
:model-value="configStore.getColorVal('menuTopBarBackground')" />
|
:model-value="configStore.getColorVal('menuTopBarBackground')" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="侧边菜单宽度(展开时)">
|
<el-form-item label="侧边菜单宽度(展开时)">
|
||||||
<el-input maxlength="32" show-word-limit @input="onCommitState($event, 'menuWidth')"
|
<el-input maxlength="32" show-word-limit @input="onCommitState($event, 'menuWidth')"
|
||||||
type="number" :step="10" :model-value="configStore.layout.menuWidth">
|
type="number" :step="10" :model-value="configStore.layout.menuWidth">
|
||||||
<template #append>px</template>
|
<template #append>px</template>
|
||||||
</el-input>
|
</el-input>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="layout-logo">
|
<div class="layout-logo">
|
||||||
<img v-if="!config.layout.menuCollapse" class="logo-img" :src="getTheme.logoUrl" />
|
<img v-if="!config.layout.menuCollapse && getTheme.logoUrl" class="logo-img" :src="getTheme.logoUrl" />
|
||||||
<!-- <div-->
|
<!-- <div-->
|
||||||
<!-- v-if="!config.layout.menuCollapse"-->
|
<!-- v-if="!config.layout.menuCollapse"-->
|
||||||
<!-- :style="{ color: config.getColorVal('menuActiveColor') }"-->
|
<!-- :style="{ color: config.getColorVal('menuActiveColor') }"-->
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
<!-- >-->
|
<!-- >-->
|
||||||
<!-- 灿能-->
|
<!-- 灿能-->
|
||||||
<!-- </div>-->
|
<!-- </div>-->
|
||||||
<!-- <Icon
|
<Icon
|
||||||
v-if="config.layout.layoutMode != 'Streamline'"
|
v-if="config.layout.layoutMode != 'Streamline'"
|
||||||
@click="onMenuCollapse"
|
@click="onMenuCollapse"
|
||||||
:name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
:name="config.layout.menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||||
@@ -17,18 +17,18 @@
|
|||||||
style="margin: 15px;"
|
style="margin: 15px;"
|
||||||
size="18"
|
size="18"
|
||||||
class="fold"
|
class="fold"
|
||||||
/> -->
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { useConfig } from '@/stores/config'
|
import { useConfig } from '@/stores/config'
|
||||||
import { closeShade } from '@/utils/pageShade'
|
import { closeShade } from '@/utils/pageShade'
|
||||||
import { Session } from '@/utils/storage'
|
import { getStoredTheme } from '@/utils/storage'
|
||||||
import { setNavTabsWidth } from '@/utils/layout'
|
import { setNavTabsWidth } from '@/utils/layout'
|
||||||
|
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
const getTheme = getStoredTheme()
|
||||||
const onMenuCollapse = function () {
|
const onMenuCollapse = function () {
|
||||||
if (config.layout.shrink && !config.layout.menuCollapse) {
|
if (config.layout.shrink && !config.layout.menuCollapse) {
|
||||||
closeShade()
|
closeShade()
|
||||||
|
|||||||
@@ -4,7 +4,7 @@
|
|||||||
<!-- <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
|
<!-- <Icon @click="onMenuCollapse" name="fa fa-indent" :color="config.getColorVal('menuActiveColor')"
|
||||||
size="18" /> -->
|
size="18" /> -->
|
||||||
</div>
|
</div>
|
||||||
<span class="nav-bar-title">{{ getTheme.name }} <span style="font-size: 14px;" v-if="Version?.versionName">
|
<span class="nav-bar-title">{{ themeName }} <span style="font-size: 14px;" v-if="Version?.versionName">
|
||||||
({{ Version?.versionName }})
|
({{ Version?.versionName }})
|
||||||
</span></span>
|
</span></span>
|
||||||
<NavMenus />
|
<NavMenus />
|
||||||
@@ -19,8 +19,9 @@ import NavMenus from '../navMenus.vue'
|
|||||||
import { showShade } from '@/utils/pageShade'
|
import { showShade } from '@/utils/pageShade'
|
||||||
import { onMounted } from 'vue'
|
import { onMounted } from 'vue'
|
||||||
import { getLastData } from '@/api/systerm'
|
import { getLastData } from '@/api/systerm'
|
||||||
|
import { getStoredThemeName } from '@/utils/storage'
|
||||||
const config = useConfig()
|
const config = useConfig()
|
||||||
const getTheme = JSON.parse(window.localStorage.getItem('getTheme') as string)
|
const themeName = getStoredThemeName()
|
||||||
const Version: any = ref({})
|
const Version: any = ref({})
|
||||||
const onMenuCollapse = () => {
|
const onMenuCollapse = () => {
|
||||||
showShade('ba-aside-menu-shade', () => {
|
showShade('ba-aside-menu-shade', () => {
|
||||||
@@ -33,7 +34,7 @@ onMounted(() => {
|
|||||||
Version.value = res.data
|
Version.value = res.data
|
||||||
|
|
||||||
})
|
})
|
||||||
document.title = getTheme.name
|
document.title = themeName
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -116,11 +116,11 @@ const handleCommand = async (key: string) => {
|
|||||||
popupPwd.value.open()
|
popupPwd.value.open()
|
||||||
break
|
break
|
||||||
case 'layout':
|
case 'layout':
|
||||||
await window.location.reload()
|
navTabs.closeTabs()
|
||||||
|
window.localStorage.clear()
|
||||||
|
adminInfo.reset()
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
navTabs.closeTabs()
|
window.location.reload()
|
||||||
window.localStorage.clear()
|
|
||||||
adminInfo.reset()
|
|
||||||
router.push({ name: 'login' })
|
router.push({ name: 'login' })
|
||||||
}, 0)
|
}, 0)
|
||||||
break
|
break
|
||||||
@@ -231,9 +231,11 @@ const handleCommand = async (key: string) => {
|
|||||||
0% {
|
0% {
|
||||||
transform: scale(0);
|
transform: scale(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
80% {
|
80% {
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
100% {
|
100% {
|
||||||
transform: scale(1);
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -2,23 +2,23 @@
|
|||||||
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
|
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
|
||||||
|
|
||||||
<el-form :inline="false" :model="form" label-width="auto" class="form-one">
|
<el-form :inline="false" :model="form" label-width="auto" class="form-one">
|
||||||
<el-form-item label="用户名称:">
|
<el-form-item label="用户名称">
|
||||||
<el-input v-model.trim="form.name" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.name" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="登录名称:" class="top">
|
<el-form-item label="登录名称" class="top">
|
||||||
<el-input v-model.trim="form.loginName" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.loginName" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<!-- <el-form-item label="归属部门名称:" class="top">
|
<!-- <el-form-item label="归属部门名称" class="top">
|
||||||
<el-input v-model.trim="form.deptName" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.deptName" :disabled="true"></el-input>
|
||||||
</el-form-item> -->
|
</el-form-item> -->
|
||||||
<el-form-item label="拥有的角色:" class="top">
|
<el-form-item label="拥有的角色" class="top">
|
||||||
<el-input v-model.trim="form.role" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.role" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="电话号码:" class="top">
|
<el-form-item label="电话号码" class="top">
|
||||||
<el-input v-model.trim="form.phone" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.phone" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="电子邮箱:" class="top">
|
<el-form-item label="电子邮箱" class="top">
|
||||||
<el-input v-model.trim="form.email" :disabled="true"></el-input>
|
<el-input maxlength="32" show-word-limit v-model.trim="form.email" :disabled="true"></el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
|
|||||||
@@ -2,26 +2,24 @@
|
|||||||
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
|
<el-dialog draggable width="500px" v-model.trim="dialogVisible" :title="title">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
|
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" class="form-one" ref="formRef">
|
||||||
<el-form-item label="校验密码:" prop="password">
|
<el-form-item label="校验密码" prop="password">
|
||||||
<el-input v-model.trim="form.password" type="password" placeholder="请输入校验密码" show-password />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.password" type="password"
|
||||||
|
placeholder="请输入校验密码" show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="新密码:" prop="newPwd">
|
<el-form-item label="新密码" prop="newPwd">
|
||||||
<el-input v-model.trim="form.newPwd" type="password" placeholder="请输入新密码" show-password />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.newPwd" type="password"
|
||||||
|
placeholder="请输入新密码" show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label="确认密码:" prop="confirmPwd">
|
<el-form-item label="确认密码" prop="confirmPwd">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit v-model.trim="form.confirmPwd" type="password"
|
||||||
v-model.trim="form.confirmPwd"
|
placeholder="请输入确认密码" show-password />
|
||||||
type="password"
|
|
||||||
placeholder="请输入确认密码"
|
|
||||||
show-password
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit" :loading="loading">确定</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -46,6 +44,7 @@ const form = reactive({
|
|||||||
newPwd: '',
|
newPwd: '',
|
||||||
confirmPwd: ''
|
confirmPwd: ''
|
||||||
})
|
})
|
||||||
|
const loading = ref(false)
|
||||||
const rules = {
|
const rules = {
|
||||||
password: [
|
password: [
|
||||||
{ required: true, message: '请输入校验密码', trigger: 'blur' },
|
{ required: true, message: '请输入校验密码', trigger: 'blur' },
|
||||||
@@ -99,6 +98,7 @@ const open = () => {
|
|||||||
const submit = () => {
|
const submit = () => {
|
||||||
formRef.value.validate(async (valid: boolean) => {
|
formRef.value.validate(async (valid: boolean) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
loading.value = true
|
||||||
passwordConfirm(form.password).then(res => {
|
passwordConfirm(form.password).then(res => {
|
||||||
updatePassword({
|
updatePassword({
|
||||||
id: adminInfo.$state.userIndex,
|
id: adminInfo.$state.userIndex,
|
||||||
@@ -108,12 +108,16 @@ const submit = () => {
|
|||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
navTabs.closeTabs()
|
navTabs.closeTabs()
|
||||||
window.localStorage.clear()
|
window.localStorage.clear()
|
||||||
adminInfo.reset()
|
adminInfo.reset()
|
||||||
router.push({ name: 'login' })
|
router.push({ name: 'login' })
|
||||||
}, 0)
|
}, 0)
|
||||||
|
}).finally(() => {
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
|
}).finally(() => {
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ const handleLock = async () => {
|
|||||||
</div>
|
</div>
|
||||||
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
<el-form ref="formRef" :model="formData" :rules="formRules" label-width="80px">
|
||||||
<el-form-item :label="t('lock.lockPassword')" prop="password">
|
<el-form-item :label="t('lock.lockPassword')" prop="password">
|
||||||
<el-input maxlength="32" show-word-limit type="password" v-model.trim="formData.password"
|
<el-input maxlength="32" show-word-limit type="password" v-model.trim="formData.password"
|
||||||
:placeholder="'请输入' + t('lock.lockPassword')" clearable show-password />
|
:placeholder="'请输入' + t('lock.lockPassword')" clearable show-password />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
|
|||||||
@@ -13,7 +13,8 @@ import 'element-plus/theme-chalk/display.css'
|
|||||||
import '@fortawesome/fontawesome-free/css/all.css'
|
import '@fortawesome/fontawesome-free/css/all.css'
|
||||||
import '@/styles/index.scss'
|
import '@/styles/index.scss'
|
||||||
import '@/assets/font/iconfont.css'
|
import '@/assets/font/iconfont.css'
|
||||||
import { ElDialog } from 'element-plus'
|
import CnDialog from '@/components/CnDialog/CnDialog.vue'
|
||||||
|
import { applyDialogCssVars } from '@/config/dialog'
|
||||||
import ExcelJS from 'exceljs'
|
import ExcelJS from 'exceljs'
|
||||||
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
import VXETablePluginExportXLSX from 'vxe-table-plugin-export-xlsx'
|
||||||
VXETable.use(VXETablePluginExportXLSX, {
|
VXETable.use(VXETablePluginExportXLSX, {
|
||||||
@@ -21,13 +22,14 @@ VXETable.use(VXETablePluginExportXLSX, {
|
|||||||
})
|
})
|
||||||
window.XEUtils = XEUtils
|
window.XEUtils = XEUtils
|
||||||
|
|
||||||
|
applyDialogCssVars()
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
app.use(router)
|
app.use(router)
|
||||||
app.use(pinia)
|
app.use(pinia)
|
||||||
app.use(ElementPlus);
|
app.use(ElementPlus)
|
||||||
(app._context.components.ElDialog as typeof ElDialog).props.closeOnClickModal.default = false
|
app.component('ElDialog', CnDialog)
|
||||||
app.use(VXETable)
|
app.use(VXETable)
|
||||||
registerIcons(app) // icons
|
registerIcons(app) // icons
|
||||||
|
|
||||||
|
|||||||
@@ -346,12 +346,6 @@ body,
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 1024px) {
|
|
||||||
.cn-operate-dialog {
|
|
||||||
width: 96%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: 991px) {
|
@media screen and (max-width: 991px) {
|
||||||
.user-views {
|
.user-views {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|||||||
53
src/styles/dialog.scss
Normal file
53
src/styles/dialog.scss
Normal file
@@ -0,0 +1,53 @@
|
|||||||
|
/* 弹框尺寸 - CSS 变量由 config/dialog.ts 在启动时注入 */
|
||||||
|
:root {
|
||||||
|
--cn-dialog-width-small: 26vw;
|
||||||
|
--cn-dialog-max-width-small: 500px;
|
||||||
|
--cn-dialog-min-width-small: 300px;
|
||||||
|
|
||||||
|
--cn-dialog-width-middle: 42vw;
|
||||||
|
--cn-dialog-max-width-middle: 800px;
|
||||||
|
--cn-dialog-min-width-middle: 600px;
|
||||||
|
|
||||||
|
--cn-dialog-width-big: 62vw;
|
||||||
|
--cn-dialog-max-width-big: 1200px;
|
||||||
|
--cn-dialog-min-width-big: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-dialog.el-dialog {
|
||||||
|
max-width: calc(100vw - 32px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-dialog--small.el-dialog,
|
||||||
|
.dialog-small.el-dialog {
|
||||||
|
width: var(--cn-dialog-width-small) !important;
|
||||||
|
max-width: var(--cn-dialog-max-width-small) !important;
|
||||||
|
min-width: var(--cn-dialog-min-width-small) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-dialog--middle.el-dialog,
|
||||||
|
.dialog-middle.el-dialog {
|
||||||
|
width: var(--cn-dialog-width-middle) !important;
|
||||||
|
max-width: var(--cn-dialog-max-width-middle) !important;
|
||||||
|
min-width: var(--cn-dialog-min-width-middle) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cn-dialog--big.el-dialog,
|
||||||
|
.dialog-big.el-dialog {
|
||||||
|
width: var(--cn-dialog-width-big) !important;
|
||||||
|
max-width: var(--cn-dialog-max-width-big) !important;
|
||||||
|
min-width: var(--cn-dialog-min-width-big) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.cn-dialog--small.el-dialog,
|
||||||
|
.cn-dialog--middle.el-dialog,
|
||||||
|
.cn-dialog--big.el-dialog,
|
||||||
|
.dialog-small.el-dialog,
|
||||||
|
.dialog-middle.el-dialog,
|
||||||
|
.dialog-big.el-dialog,
|
||||||
|
.cn-operate-dialog.el-dialog {
|
||||||
|
width: 96% !important;
|
||||||
|
min-width: unset !important;
|
||||||
|
max-width: calc(100vw - 32px) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -103,7 +103,7 @@
|
|||||||
border-radius: var(--el-border-radius-base);
|
border-radius: var(--el-border-radius-base);
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
-webkit-box-shadow: none;
|
-webkit-box-shadow: none;
|
||||||
cursor: pointer !important;
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
@@ -228,11 +228,19 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-collapse-item__content{
|
.el-collapse-item__content {
|
||||||
padding-bottom: 0;
|
padding-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
//解决打开dialog body容器宽度变为 calc(100% - 8px)问题
|
//解决打开dialog body容器宽度变为 calc(100% - 8px)问题
|
||||||
.el-popup-parent--hidden{
|
.el-popup-parent--hidden {
|
||||||
width: 100% !important;
|
width: 100% !important;
|
||||||
}
|
}
|
||||||
|
// 树x轴滚动、
|
||||||
|
.el-scrollbar .el-scrollbar__wrap {
|
||||||
|
overflow-x: hidden !important;
|
||||||
|
}
|
||||||
|
.el-tree > .el-tree-node {
|
||||||
|
min-width: 100% !important;
|
||||||
|
// display: inline-block !important;
|
||||||
|
}
|
||||||
|
|||||||
@@ -3,3 +3,4 @@
|
|||||||
@use '@/styles/element';
|
@use '@/styles/element';
|
||||||
@use '@/styles/var';
|
@use '@/styles/var';
|
||||||
@use '@/styles/map';
|
@use '@/styles/map';
|
||||||
|
@use '@/styles/dialog';
|
||||||
|
|||||||
@@ -8,29 +8,31 @@ $primary-light: #3f6ad8;
|
|||||||
// --ba-background
|
// --ba-background
|
||||||
$bg-color: () !default;
|
$bg-color: () !default;
|
||||||
$bg-color: map.merge(
|
$bg-color: map.merge(
|
||||||
(
|
(
|
||||||
'': #edf0f3,
|
'': #edf0f3,
|
||||||
'overlay': #ffffff,
|
'overlay': #ffffff
|
||||||
),
|
),
|
||||||
$bg-color
|
$bg-color
|
||||||
);
|
);
|
||||||
|
|
||||||
// --ba-border-color
|
// --ba-border-color
|
||||||
$border-color: () !default;
|
$border-color: () !default;
|
||||||
$border-color: map.merge(
|
$border-color: map.merge(
|
||||||
(
|
(
|
||||||
'': #f6f6f6,
|
'': #f6f6f6
|
||||||
),
|
),
|
||||||
$border-color
|
$border-color
|
||||||
);
|
);
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
@include set-css-var-value('main-space', $main-space);
|
@include set-css-var-value('main-space', $main-space);
|
||||||
@include set-css-var-value('color-primary-light', $primary-light);
|
@include set-css-var-value('color-primary-light', $primary-light);
|
||||||
@include set-component-css-var('bg-color', $bg-color);
|
@include set-component-css-var('bg-color', $bg-color);
|
||||||
@include set-component-css-var('border-color', $border-color);
|
@include set-component-css-var('border-color', $border-color);
|
||||||
// --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
|
--el-color-danger: #e26257;
|
||||||
// --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
|
--el-color-success: #2ab914;
|
||||||
// --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
|
// --vxe-table-row-current-background-color: var(--el-color-primary-light-7);
|
||||||
// --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
|
// --vxe-table-row-hover-background-color: var(--el-color-primary-light-9);
|
||||||
|
// --vxe-table-row-hover-current-background-color: var(--el-color-primary-light-7);
|
||||||
|
// --vxe-table-row-hover-striped-background-color: var(--el-color-primary-light-9);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -42,7 +42,7 @@
|
|||||||
|
|
||||||
.vxe-table--render-default .vxe-body--row.row--current,
|
.vxe-table--render-default .vxe-body--row.row--current,
|
||||||
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
||||||
background-color: var(--el-color-primary-light-8);
|
background-color: var(--el-color-primary-light-9);
|
||||||
}
|
}
|
||||||
|
|
||||||
.vxe-table--tooltip-wrapper {
|
.vxe-table--tooltip-wrapper {
|
||||||
|
|||||||
2
src/styles/vxeTable.min.css
vendored
2
src/styles/vxeTable.min.css
vendored
@@ -1 +1 @@
|
|||||||
.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-8)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}
|
.vxe-header--row{background:var(--vxe-table-header-background-color);color:var(--vxe-table-header-font-color)}.is--checked.vxe-checkbox,.is--checked.vxe-checkbox .vxe-checkbox--icon,.is--checked.vxe-custom--checkbox-option,.is--checked.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--checked.vxe-export--panel-column-option,.is--checked.vxe-export--panel-column-option .vxe-checkbox--icon,.is--checked.vxe-table--filter-option,.is--checked.vxe-table--filter-option .vxe-checkbox--icon,.is--indeterminate.vxe-checkbox,.is--indeterminate.vxe-checkbox .vxe-checkbox--icon,.is--indeterminate.vxe-custom--checkbox-option,.is--indeterminate.vxe-custom--checkbox-option .vxe-checkbox--icon,.is--indeterminate.vxe-export--panel-column-option,.is--indeterminate.vxe-export--panel-column-option .vxe-checkbox--icon,.is--indeterminate.vxe-table--filter-option,.is--indeterminate.vxe-table--filter-option .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--checkbox,.vxe-table--render-default .is--checked.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox,.vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon,.vxe-table--render-default .is--checked.vxe-cell--radio .vxe-radio--icon{color:var(--el-color-primary-light-3)}.vxe-checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-custom--checkbox-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-table--render-default .vxe-cell--checkbox:not(.is--disabled):hover .vxe-checkbox--icon,.vxe-radio:not(.is--disabled):hover .vxe-radio--icon,.vxe-custom--radio-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-export--panel-column-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--filter-option:not(.is--disabled):hover .vxe-radio--icon,.vxe-table--render-default .vxe-cell--radio:not(.is--disabled):hover .vxe-radio--icon{color:var(--el-color-primary-light-5)}.vxe-table--render-default .vxe-body--row.row--current,.vxe-table--render-default .vxe-body--row.row--current:hover{background-color:var(--el-color-primary-light-9)}.vxe-table--tooltip-wrapper{z-index:10000 !important}.is--disabled{background-color:var(--vxe-input-disabled-color)}.vxe-modal--wrapper{z-index:5000 !important}
|
||||||
|
|||||||
@@ -62,7 +62,7 @@
|
|||||||
}
|
}
|
||||||
.vxe-table--render-default .vxe-body--row.row--current,
|
.vxe-table--render-default .vxe-body--row.row--current,
|
||||||
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
.vxe-table--render-default .vxe-body--row.row--current:hover {
|
||||||
background-color: var(--el-color-primary-light-8);
|
background-color: var(--el-color-primary-light-9);
|
||||||
}
|
}
|
||||||
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
// .vxe-table--render-default .is--disabled.vxe-cell--checkbox .vxe-checkbox--icon{
|
||||||
// color: #fff0;
|
// color: #fff0;
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog width="500px" v-model.trim='dialogVisible' :title='title'>
|
<el-dialog v-model.trim="dialogVisible" width="500px" :title="title" dialog-size="small">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
|
<el-form :inline='false' :model='form' label-width='auto' class="form-one" :rules='rules' ref='formRef'>
|
||||||
<el-form-item label='角色名称'>
|
<el-form-item label='角色名称'>
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入菜单名称' />
|
<el-input maxlength="32" show-word-limit v-model.trim='form.name' placeholder='请输入菜单名称' />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label='角色编码'>
|
<el-form-item label='角色编码'>
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder='请输入菜单名称' />
|
<el-input maxlength="32" show-word-limit v-model.trim='form.code' placeholder='请输入菜单名称' />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item label='角色描述'>
|
<el-form-item label='角色描述'>
|
||||||
<el-input maxlength="300" show-word-limit v-model.trim='form.remark' :rows='2' type='textarea'
|
<el-input show-word-limit maxlength="300" v-model.trim='form.remark' :rows='2' type='textarea'
|
||||||
placeholder='请输入描述' />
|
placeholder='请输入描述' />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
@@ -17,7 +17,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class='dialog-footer'>
|
<span class='dialog-footer'>
|
||||||
<el-button @click='dialogVisible = false'>取消</el-button>
|
<el-button @click='dialogVisible = false'>取消</el-button>
|
||||||
<el-button type='primary' @click='submit'>确认</el-button>
|
<el-button type='primary' @click='submit' :loading="loading">确定</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -40,6 +40,7 @@ const form = reactive({
|
|||||||
remark: '',
|
remark: '',
|
||||||
id: ''
|
id: ''
|
||||||
})
|
})
|
||||||
|
const loading = ref(false)
|
||||||
const rules = {
|
const rules = {
|
||||||
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
name: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
|
||||||
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
|
code: [{ required: true, message: '请输入角色编码', trigger: 'blur' }]
|
||||||
@@ -63,6 +64,7 @@ const open = (text: string, data?: anyObj) => {
|
|||||||
const submit = () => {
|
const submit = () => {
|
||||||
formRef.value.validate(async (valid) => {
|
formRef.value.validate(async (valid) => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
loading.value = true
|
||||||
if (form.id) {
|
if (form.id) {
|
||||||
// await update(form)
|
// await update(form)
|
||||||
} else {
|
} else {
|
||||||
@@ -71,6 +73,7 @@ const submit = () => {
|
|||||||
ElMessage.success('保存成功')
|
ElMessage.success('保存成功')
|
||||||
tableStore.index()
|
tableStore.index()
|
||||||
dialogVisible.value = false
|
dialogVisible.value = false
|
||||||
|
loading.value = false
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
110
src/utils/chartAxisHelper.ts
Normal file
110
src/utils/chartAxisHelper.ts
Normal file
@@ -0,0 +1,110 @@
|
|||||||
|
const AXIS_DECIMALS = 2
|
||||||
|
/** 与 formatAxisLabel 小数位一致,刻度步长不得小于此值,避免标签重复 */
|
||||||
|
const MIN_TICK_STEP = 10 ** -AXIS_DECIMALS
|
||||||
|
|
||||||
|
export interface YAxisRange {
|
||||||
|
min: number
|
||||||
|
max: number
|
||||||
|
interval: number
|
||||||
|
}
|
||||||
|
|
||||||
|
export function roundAxisValue(val: number, decimals = AXIS_DECIMALS): number {
|
||||||
|
if (!Number.isFinite(val)) return 0
|
||||||
|
const factor = 10 ** decimals
|
||||||
|
return Math.round(val * factor) / factor
|
||||||
|
}
|
||||||
|
|
||||||
|
/** Y 轴刻度:最多 2 位小数,末尾 0 去掉(如 1.00 → 1,0.10 → 0.1) */
|
||||||
|
export function formatAxisLabel(value: number): string {
|
||||||
|
if (!Number.isFinite(value)) return '0'
|
||||||
|
return String(Number(roundAxisValue(value).toFixed(AXIS_DECIMALS)))
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 根据数据范围计算与显示精度对齐的刻度步长 */
|
||||||
|
function calcNiceTickInterval(range: number, maxTicks = 6): number {
|
||||||
|
if (!Number.isFinite(range) || range <= 0) return MIN_TICK_STEP
|
||||||
|
|
||||||
|
const raw = range / maxTicks
|
||||||
|
const magnitude = 10 ** Math.floor(Math.log10(raw))
|
||||||
|
const normalized = raw / magnitude
|
||||||
|
|
||||||
|
let niceFactor: number
|
||||||
|
if (normalized <= 1) niceFactor = 1
|
||||||
|
else if (normalized <= 2) niceFactor = 2
|
||||||
|
else if (normalized <= 5) niceFactor = 5
|
||||||
|
else niceFactor = 10
|
||||||
|
|
||||||
|
let interval = niceFactor * magnitude
|
||||||
|
|
||||||
|
if (interval < MIN_TICK_STEP) {
|
||||||
|
interval = MIN_TICK_STEP
|
||||||
|
} else {
|
||||||
|
interval = Math.ceil(interval / MIN_TICK_STEP) * MIN_TICK_STEP
|
||||||
|
}
|
||||||
|
|
||||||
|
return roundAxisValue(interval)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 将 min/max 对齐到刻度步长边界 */
|
||||||
|
function alignAxisToInterval(min: number, max: number, interval: number): { min: number; max: number } {
|
||||||
|
const alignedMin = Math.floor(min / interval) * interval
|
||||||
|
let alignedMax = Math.ceil(max / interval) * interval
|
||||||
|
|
||||||
|
if (alignedMax <= alignedMin) {
|
||||||
|
alignedMax = alignedMin + interval
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
min: roundAxisValue(alignedMin),
|
||||||
|
max: roundAxisValue(alignedMax)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buildYAxisRange(axisMin: number, axisMax: number): YAxisRange {
|
||||||
|
const interval = calcNiceTickInterval(axisMax - axisMin)
|
||||||
|
const aligned = alignAxisToInterval(axisMin, axisMax, interval)
|
||||||
|
return {
|
||||||
|
...aligned,
|
||||||
|
interval
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 瞬间波形 Y 轴范围 */
|
||||||
|
export function calcShuYAxisRange(dataMin: number, dataMax: number): YAxisRange {
|
||||||
|
const min = Number(dataMin)
|
||||||
|
const max = Number(dataMax)
|
||||||
|
if (!Number.isFinite(min) || !Number.isFinite(max)) {
|
||||||
|
return buildYAxisRange(0, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
let axisMax = max * 1.1
|
||||||
|
let axisMin = min > 0 ? min - min * 0.1 : min * 1.1
|
||||||
|
|
||||||
|
if (axisMax <= axisMin) {
|
||||||
|
const pad = Math.abs(max) * 0.1 || 0.01
|
||||||
|
axisMax = max + pad
|
||||||
|
axisMin = min - pad
|
||||||
|
}
|
||||||
|
|
||||||
|
return buildYAxisRange(axisMin, axisMax)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** RMS 波形 Y 轴范围 */
|
||||||
|
export function calcRmsYAxisRange(dataMin: number, dataMax: number): YAxisRange {
|
||||||
|
const min = Number(dataMin)
|
||||||
|
const max = Number(dataMax)
|
||||||
|
if (!Number.isFinite(min) || !Number.isFinite(max)) {
|
||||||
|
return buildYAxisRange(0, 1)
|
||||||
|
}
|
||||||
|
|
||||||
|
let axisMax = max * 1.06 * 1.1
|
||||||
|
let axisMin = min - min * 0.2
|
||||||
|
|
||||||
|
if (axisMax <= axisMin) {
|
||||||
|
const pad = Math.abs(max - min) * 0.1 || Math.abs(max) * 0.1 || 0.01
|
||||||
|
axisMax = max + pad
|
||||||
|
axisMin = min - pad
|
||||||
|
}
|
||||||
|
|
||||||
|
return buildYAxisRange(axisMin, axisMax)
|
||||||
|
}
|
||||||
@@ -10,7 +10,9 @@ export const downLoadFile = (name: string, key: string, res: any) => {
|
|||||||
document.body.appendChild(link)
|
document.body.appendChild(link)
|
||||||
link.click() //执行下载
|
link.click() //执行下载
|
||||||
document.body.removeChild(link)
|
document.body.removeChild(link)
|
||||||
ElMessage.success('下载成功')
|
setTimeout(() => {
|
||||||
|
ElMessage.success('下载成功')
|
||||||
|
}, 2000)
|
||||||
}
|
}
|
||||||
|
|
||||||
const getFileType = (url: string) => {
|
const getFileType = (url: string) => {
|
||||||
|
|||||||
@@ -135,6 +135,56 @@ export const yMethod = (arr: any) => {
|
|||||||
return [min, max]
|
return [min, max]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface ExportFileNameOptions {
|
||||||
|
subject?: string
|
||||||
|
feature: string
|
||||||
|
date?: string | Date | string[] | null
|
||||||
|
ext?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 导出文件名中的日期,固定为当前年月日 yyyy-mm-dd */
|
||||||
|
export const formatExportDate = (): string => {
|
||||||
|
const pad = (n: number) => String(n).padStart(2, '0')
|
||||||
|
const now = new Date()
|
||||||
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 波形下载文件名中的时间,固定为当前时间 yyyy-mm-dd-HH-mm-ss */
|
||||||
|
export const formatExportDateTime = (): string => {
|
||||||
|
const pad = (n: number) => String(n).padStart(2, '0')
|
||||||
|
const now = new Date()
|
||||||
|
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 监测点 / 设备 / 项目(可选)_ 功能 _ yyyy-mm-dd(当前日期) */
|
||||||
|
export const buildExportBaseName = (options: Pick<ExportFileNameOptions, 'subject' | 'feature' | 'date'>): string => {
|
||||||
|
const { subject, feature } = options
|
||||||
|
const dateStr = formatExportDate()
|
||||||
|
return [subject?.trim(), feature?.trim(), dateStr].filter(part => part).join('_')
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 波形 zip 下载:监测点_波形_yyyy-mm-dd-HH-mm-ss.zip(当前时间) */
|
||||||
|
export const buildWaveExportFileName = (subject?: string): string => {
|
||||||
|
const base = [subject?.trim(), '波形', formatExportDateTime()].filter(part => part).join('_')
|
||||||
|
return `${base}.zip`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const buildExportFileName = (options: ExportFileNameOptions): string => {
|
||||||
|
const ext = (options.ext || 'csv').replace(/^\./, '')
|
||||||
|
return `${buildExportBaseName(options)}.${ext}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const resolveExportFileName = (filenameOrOptions: string | ExportFileNameOptions): string => {
|
||||||
|
if (typeof filenameOrOptions === 'string') {
|
||||||
|
return filenameOrOptions
|
||||||
|
}
|
||||||
|
return buildExportFileName(filenameOrOptions)
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 从行数据中取监测点 / 设备 / 项目名称 */
|
||||||
|
export const getExportSubjectFromRow = (row: any): string =>
|
||||||
|
row?.lineName || row?.equipmentName || row?.projectName || row?.engineeringName || row?.name || ''
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* title['A相','B相',]
|
* title['A相','B相',]
|
||||||
* data[[1,2],[3,4]]
|
* data[[1,2],[3,4]]
|
||||||
@@ -150,7 +200,8 @@ const convertToCSV = (title: object, data: any) => {
|
|||||||
})
|
})
|
||||||
return csv
|
return csv
|
||||||
}
|
}
|
||||||
export const exportCSV = (title: object, data: any, filename: string) => {
|
export const exportCSV = (title: object, data: any, filenameOrOptions: string | ExportFileNameOptions) => {
|
||||||
|
const filename = resolveExportFileName(filenameOrOptions)
|
||||||
const csv = convertToCSV(title, data)
|
const csv = convertToCSV(title, data)
|
||||||
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
|
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
|
||||||
const link = document.createElement('a')
|
const link = document.createElement('a')
|
||||||
@@ -161,6 +212,44 @@ export const exportCSV = (title: object, data: any, filename: string) => {
|
|||||||
URL.revokeObjectURL(link.href)
|
URL.revokeObjectURL(link.href)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将多条折线按时间对齐合并为 CSV 行(避免各 series 长度不一致时按索引对齐丢数据)
|
||||||
|
*/
|
||||||
|
export const buildSeriesCsvData = (seriesList: Array<{ name: string; data?: any[] }>) => {
|
||||||
|
if (!seriesList?.length) {
|
||||||
|
return { titles: [], rows: [] }
|
||||||
|
}
|
||||||
|
const titles = seriesList.map(s => s.name)
|
||||||
|
const timeMap = new Map<string, (string | number | null)[]>()
|
||||||
|
|
||||||
|
seriesList.forEach((series, seriesIndex) => {
|
||||||
|
series.data?.forEach((point: any) => {
|
||||||
|
const time = point?.[0]
|
||||||
|
if (!time) return
|
||||||
|
const timeKey = String(time)
|
||||||
|
if (!timeMap.has(timeKey)) {
|
||||||
|
timeMap.set(timeKey, [timeKey, ...Array(seriesList.length).fill(null)])
|
||||||
|
}
|
||||||
|
const row = timeMap.get(timeKey)!
|
||||||
|
row[seriesIndex + 1] = point[1] ?? null
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
const rows = Array.from(timeMap.values()).sort(
|
||||||
|
(a, b) => new Date(a[0] as string).getTime() - new Date(b[0] as string).getTime()
|
||||||
|
)
|
||||||
|
return { titles, rows }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const exportSeriesCSV = (
|
||||||
|
seriesList: Array<{ name: string; data?: any[] }>,
|
||||||
|
filenameOrOptions: string | ExportFileNameOptions
|
||||||
|
) => {
|
||||||
|
const { titles, rows } = buildSeriesCsvData(seriesList)
|
||||||
|
if (!rows.length) return
|
||||||
|
exportCSV(titles, rows, filenameOrOptions)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 补全时间序列数据中缺失的条目
|
* 补全时间序列数据中缺失的条目
|
||||||
* @param rawData 原始数据,格式为 [["时间字符串", "数值", "单位", "类型"], ...]
|
* @param rawData 原始数据,格式为 [["时间字符串", "数值", "单位", "类型"], ...]
|
||||||
|
|||||||
@@ -55,7 +55,6 @@ export function getAwesomeIconfontNames() {
|
|||||||
nextTick(() => {
|
nextTick(() => {
|
||||||
const iconfonts = []
|
const iconfonts = []
|
||||||
const sheets = getStylesFromVite('all.css')
|
const sheets = getStylesFromVite('all.css')
|
||||||
console.log(sheets)
|
|
||||||
for (const key in sheets) {
|
for (const key in sheets) {
|
||||||
const rules: any = sheets[key].cssRules
|
const rules: any = sheets[key].cssRules
|
||||||
for (const k in rules) {
|
for (const k in rules) {
|
||||||
|
|||||||
99
src/utils/luckysheetHelper.ts
Normal file
99
src/utils/luckysheetHelper.ts
Normal file
@@ -0,0 +1,99 @@
|
|||||||
|
import { buildExportBaseName, type ExportFileNameOptions } from '@/utils/echartMethod'
|
||||||
|
import { ElMessage } from 'element-plus'
|
||||||
|
import { nextTick } from 'vue'
|
||||||
|
import { exportExcel } from '@/views/system/reportForms/export.js'
|
||||||
|
|
||||||
|
/** 解析 Luckysheet 接口返回的 sheet 数据 */
|
||||||
|
export function parseLuckysheetSheets(sheets: any[]) {
|
||||||
|
sheets.forEach((item: any) => {
|
||||||
|
if (item.data1) {
|
||||||
|
try {
|
||||||
|
item.data = JSON.parse(item.data1)
|
||||||
|
} catch {
|
||||||
|
/* ignore invalid json */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (!item.config) item.config = {}
|
||||||
|
if (item.row == null) item.row = 36
|
||||||
|
if (item.column == null) item.column = 18
|
||||||
|
if (!item.data) item.data = []
|
||||||
|
item.celldata?.forEach((cell: any) => {
|
||||||
|
if (item.data?.[cell.r]?.[cell.c]?.v != null) {
|
||||||
|
item.data[cell.r][cell.c] = cell.v
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
declare const luckysheet: any
|
||||||
|
|
||||||
|
const DEFAULT_REPORT_OPTIONS = {
|
||||||
|
title: '',
|
||||||
|
lang: 'zh',
|
||||||
|
showtoolbar: false,
|
||||||
|
showinfobar: false,
|
||||||
|
showsheetbar: true,
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 销毁已有 Luckysheet 实例,避免重复 create 导致 DOM 堆积 */
|
||||||
|
export function destroyLuckysheet() {
|
||||||
|
try {
|
||||||
|
if (typeof luckysheet !== 'undefined' && luckysheet.destroy) {
|
||||||
|
luckysheet.destroy()
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
/* ignore */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 解析 sheet 数据、销毁旧实例并渲染报表 */
|
||||||
|
export function renderLuckysheetReport(
|
||||||
|
container: string,
|
||||||
|
sheets: any[],
|
||||||
|
options: Record<string, any> = {}
|
||||||
|
) {
|
||||||
|
if (!Array.isArray(sheets) || sheets.length === 0) {
|
||||||
|
destroyLuckysheet()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
parseLuckysheetSheets(sheets)
|
||||||
|
destroyLuckysheet()
|
||||||
|
nextTick(() => {
|
||||||
|
requestAnimationFrame(() => {
|
||||||
|
if (!document.getElementById(container)) return
|
||||||
|
luckysheet.create({
|
||||||
|
container,
|
||||||
|
...DEFAULT_REPORT_OPTIONS,
|
||||||
|
...options,
|
||||||
|
data: sheets,
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 安全导出 Luckysheet,无数据时提示并返回 false */
|
||||||
|
export function exportLuckysheetFile(filenameOrOptions: string | ExportFileNameOptions, hasData = true): boolean {
|
||||||
|
if (!hasData) {
|
||||||
|
ElMessage.warning('暂无数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
try {
|
||||||
|
if (typeof luckysheet === 'undefined' || !luckysheet.getAllSheets) {
|
||||||
|
ElMessage.warning('暂无数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const sheets = luckysheet.getAllSheets()
|
||||||
|
if (!sheets?.length) {
|
||||||
|
ElMessage.warning('暂无数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
const filename =
|
||||||
|
typeof filenameOrOptions === 'string' ? filenameOrOptions : buildExportBaseName(filenameOrOptions)
|
||||||
|
exportExcel(sheets, filename)
|
||||||
|
ElMessage.success('生成成功')
|
||||||
|
return true
|
||||||
|
} catch {
|
||||||
|
ElMessage.warning('导出失败,请先加载报表数据')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -77,7 +77,12 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
|||||||
config.url == '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData' ||
|
config.url == '/cs-harmonic-boot/limitRateDetailD/limitProbabilityData' ||
|
||||||
config.url == '/system-boot/dictTree/queryByCode' ||
|
config.url == '/system-boot/dictTree/queryByCode' ||
|
||||||
config.url == '/system-boot/dictTree/queryByid' ||
|
config.url == '/system-boot/dictTree/queryByid' ||
|
||||||
config.url == '/system-boot/dictTree/query'
|
config.url == '/system-boot/dictTree/query' ||
|
||||||
|
config.url == '/cs-harmonic-boot/csevent/f47Curve' ||
|
||||||
|
config.url == '/cs-harmonic-boot/sysExcel/querySysExcel' ||
|
||||||
|
config.url == '/cs-device-boot/csLedger/lineTree' ||
|
||||||
|
config.url == '/system-boot/file/download' ||
|
||||||
|
config.url == '/cs-harmonic-boot/pqSensitiveUser/getUserDevTree'
|
||||||
)
|
)
|
||||||
)
|
)
|
||||||
removePending(config)
|
removePending(config)
|
||||||
@@ -188,7 +193,8 @@ function createAxios<Data = any, T = ApiPromise<Data>>(
|
|||||||
}, 6000)
|
}, 6000)
|
||||||
} else if (response.config.url == '/cs-harmonic-boot/cspage/getByUserId') {
|
} else if (response.config.url == '/cs-harmonic-boot/cspage/getByUserId') {
|
||||||
} else {
|
} else {
|
||||||
ElMessage.error(response.data.message || '未知错误')
|
let message = response.data.message
|
||||||
|
ElMessage.error(message.substring(message.indexOf(',') + 1) || '未知错误')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return Promise.reject(response.data)
|
return Promise.reject(response.data)
|
||||||
|
|||||||
@@ -28,6 +28,21 @@ export const Local = {
|
|||||||
* @method remove 移除会话缓存
|
* @method remove 移除会话缓存
|
||||||
* @method clear 移除全部会话缓存
|
* @method clear 移除全部会话缓存
|
||||||
*/
|
*/
|
||||||
|
const DEFAULT_THEME_NAME = '电能质量监测系统'
|
||||||
|
|
||||||
|
export function getStoredTheme(): { name?: string; logoUrl?: string; [key: string]: any } {
|
||||||
|
try {
|
||||||
|
const raw = window.localStorage.getItem('getTheme')
|
||||||
|
return raw ? JSON.parse(raw) : {}
|
||||||
|
} catch {
|
||||||
|
return {}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getStoredThemeName(): string {
|
||||||
|
return getStoredTheme().name || DEFAULT_THEME_NAME
|
||||||
|
}
|
||||||
|
|
||||||
export const Session = {
|
export const Session = {
|
||||||
set(key: string, val: any) {
|
set(key: string, val: any) {
|
||||||
window.sessionStorage.setItem(key, JSON.stringify(val))
|
window.sessionStorage.setItem(key, JSON.stringify(val))
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ interface TableStoreParams {
|
|||||||
resetCallback?: () => void // 重置
|
resetCallback?: () => void // 重置
|
||||||
loadCallback?: () => void // 接口调用后的回调
|
loadCallback?: () => void // 接口调用后的回调
|
||||||
exportProcessingData?: () => void //导出处理数据
|
exportProcessingData?: () => void //导出处理数据
|
||||||
beforeSearchFun?: () => void // 接口调用前的回调
|
beforeSearchFun?: () => void | boolean // 接口调用前的回调,返回 false 中止请求
|
||||||
}
|
}
|
||||||
|
|
||||||
export default class TableStore {
|
export default class TableStore {
|
||||||
@@ -75,7 +75,13 @@ export default class TableStore {
|
|||||||
}
|
}
|
||||||
|
|
||||||
index() {
|
index() {
|
||||||
this.table.beforeSearchFun && this.table.beforeSearchFun()
|
if (this.table.beforeSearchFun) {
|
||||||
|
const canSearch = this.table.beforeSearchFun()
|
||||||
|
if (canSearch === false) {
|
||||||
|
this.table.loading = false
|
||||||
|
return
|
||||||
|
}
|
||||||
|
}
|
||||||
this.table.data = []
|
this.table.data = []
|
||||||
this.table.loading = true
|
this.table.loading = true
|
||||||
// 重置用的数据数据
|
// 重置用的数据数据
|
||||||
|
|||||||
42
src/utils/waveCache.ts
Normal file
42
src/utils/waveCache.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
const MAX_CACHE_SIZE = 30
|
||||||
|
|
||||||
|
const cache = new Map<string, unknown>()
|
||||||
|
|
||||||
|
function dataFingerprint(data: unknown[][] | undefined): string {
|
||||||
|
if (!data?.length) return '0'
|
||||||
|
const first = data[0]
|
||||||
|
const last = data[data.length - 1]
|
||||||
|
return `${data.length}:${first?.[0]}:${last?.[0]}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function buildWaveCacheKey(
|
||||||
|
type: 'shu' | 'rms',
|
||||||
|
wp: Record<string, any> | undefined,
|
||||||
|
value: number,
|
||||||
|
isOpen: boolean,
|
||||||
|
boxoList: Record<string, any>
|
||||||
|
): string {
|
||||||
|
if (!wp) return ''
|
||||||
|
const waveFp =
|
||||||
|
type === 'shu' ? dataFingerprint(wp.listWaveData) : dataFingerprint(wp.listRmsData)
|
||||||
|
const boxoFp = boxoList?.startTime ?? boxoList?.lineName ?? boxoList?.equipmentName ?? ''
|
||||||
|
return `${type}|${wp.time}|${wp.waveType}|${wp.iphasic}|${value}|${isOpen}|${waveFp}|${boxoFp}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getWaveCache<T>(key: string): T | null {
|
||||||
|
if (!key || !cache.has(key)) return null
|
||||||
|
const value = cache.get(key) as T
|
||||||
|
cache.delete(key)
|
||||||
|
cache.set(key, value)
|
||||||
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
export function setWaveCache(key: string, value: unknown): void {
|
||||||
|
if (!key) return
|
||||||
|
if (cache.has(key)) cache.delete(key)
|
||||||
|
cache.set(key, value)
|
||||||
|
while (cache.size > MAX_CACHE_SIZE) {
|
||||||
|
const oldest = cache.keys().next().value
|
||||||
|
if (oldest !== undefined) cache.delete(oldest)
|
||||||
|
}
|
||||||
|
}
|
||||||
96
src/utils/waveWorkerPool.ts
Normal file
96
src/utils/waveWorkerPool.ts
Normal file
@@ -0,0 +1,96 @@
|
|||||||
|
import { toRaw } from 'vue'
|
||||||
|
|
||||||
|
type WorkerMessageHandler = (data: any) => void
|
||||||
|
|
||||||
|
let shuWorker: Worker | null = null
|
||||||
|
let rmsWorker: Worker | null = null
|
||||||
|
|
||||||
|
/** 递归剥离 Vue 响应式代理,得到可 structuredClone 的纯对象 */
|
||||||
|
export function toPlainDeep<T>(value: T): T {
|
||||||
|
const raw = toRaw(value as object) as T
|
||||||
|
if (Array.isArray(raw)) {
|
||||||
|
return raw.map(item => toPlainDeep(item)) as T
|
||||||
|
}
|
||||||
|
if (raw !== null && typeof raw === 'object') {
|
||||||
|
const out: Record<string, unknown> = {}
|
||||||
|
for (const [key, val] of Object.entries(raw)) {
|
||||||
|
out[key] = toPlainDeep(val)
|
||||||
|
}
|
||||||
|
return out as T
|
||||||
|
}
|
||||||
|
return raw
|
||||||
|
}
|
||||||
|
|
||||||
|
const BOXO_LIST_KEYS = [
|
||||||
|
'systemType',
|
||||||
|
'powerStationName',
|
||||||
|
'measurementPointName',
|
||||||
|
'startTime',
|
||||||
|
'featureAmplitude',
|
||||||
|
'duration',
|
||||||
|
'engineeringName',
|
||||||
|
'equipmentName',
|
||||||
|
'evtParamVVaDepth',
|
||||||
|
'evtParamTm',
|
||||||
|
'lineName',
|
||||||
|
'persistTime',
|
||||||
|
'subName'
|
||||||
|
] as const
|
||||||
|
|
||||||
|
export function buildWorkerPayload(
|
||||||
|
type: 'shu' | 'rms',
|
||||||
|
wp: Record<string, any>,
|
||||||
|
boxoList: Record<string, any>,
|
||||||
|
extras: { requestId: number; value: number; isOpen: boolean; iphasic?: number }
|
||||||
|
) {
|
||||||
|
const plainWp = toPlainDeep(wp)
|
||||||
|
const wpPayload: Record<string, unknown> = {
|
||||||
|
pt: plainWp.pt,
|
||||||
|
ct: plainWp.ct,
|
||||||
|
waveTitle: plainWp.waveTitle,
|
||||||
|
iphasic: plainWp.iphasic,
|
||||||
|
time: plainWp.time,
|
||||||
|
waveType: plainWp.waveType,
|
||||||
|
yzd: plainWp.yzd
|
||||||
|
}
|
||||||
|
if (type === 'shu') {
|
||||||
|
wpPayload.listWaveData = plainWp.listWaveData
|
||||||
|
} else {
|
||||||
|
wpPayload.listRmsData = plainWp.listRmsData
|
||||||
|
}
|
||||||
|
|
||||||
|
const plainBoxo: Record<string, unknown> = {}
|
||||||
|
const rawBoxo = toPlainDeep(boxoList)
|
||||||
|
for (const key of BOXO_LIST_KEYS) {
|
||||||
|
if (rawBoxo[key] !== undefined) {
|
||||||
|
plainBoxo[key] = rawBoxo[key]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
requestId: extras.requestId,
|
||||||
|
value: extras.value,
|
||||||
|
isOpen: extras.isOpen,
|
||||||
|
iphasic: extras.iphasic,
|
||||||
|
wp: wpPayload,
|
||||||
|
boxoList: plainBoxo
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getShuWorker(onMessage: WorkerMessageHandler): Worker {
|
||||||
|
if (!shuWorker) {
|
||||||
|
shuWorker = new Worker(new URL('../components/echarts/shuWorker.js', import.meta.url))
|
||||||
|
}
|
||||||
|
shuWorker.onmessage = e => onMessage(e.data)
|
||||||
|
shuWorker.onerror = error => console.error('Shu worker error:', error)
|
||||||
|
return shuWorker
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getRmsWorker(onMessage: WorkerMessageHandler): Worker {
|
||||||
|
if (!rmsWorker) {
|
||||||
|
rmsWorker = new Worker(new URL('../components/echarts/rmsWorker.js', import.meta.url))
|
||||||
|
}
|
||||||
|
rmsWorker.onmessage = e => onMessage(e.data)
|
||||||
|
rmsWorker.onerror = error => console.error('Rms worker error:', error)
|
||||||
|
return rmsWorker
|
||||||
|
}
|
||||||
@@ -2,9 +2,9 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">接口权限列表</div>
|
<div class="title">接口权限列表</div>
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit
|
||||||
maxlength="32"
|
|
||||||
show-word-limit
|
|
||||||
v-model.trim="tableStore.table.params.searchValue"
|
v-model.trim="tableStore.table.params.searchValue"
|
||||||
style="width: 240px"
|
style="width: 240px"
|
||||||
placeholder="请输入菜单名称"
|
placeholder="请输入菜单名称"
|
||||||
@@ -120,7 +120,6 @@ watch(
|
|||||||
provide('tableStore', tableStore)
|
provide('tableStore', tableStore)
|
||||||
|
|
||||||
const addMenu = () => {
|
const addMenu = () => {
|
||||||
console.log(popupRef)
|
|
||||||
popupRef.value.open('新增接口权限', {
|
popupRef.value.open('新增接口权限', {
|
||||||
pid: props.id
|
pid: props.id
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
<div>
|
<div>
|
||||||
<div class="custom-table-header">
|
<div class="custom-table-header">
|
||||||
<div class="title">菜单列表</div>
|
<div class="title">菜单列表</div>
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
|
<el-input maxlength="32" show-word-limit v-model.trim="tableStore.table.params.searchValue"
|
||||||
style="width: 310px" placeholder="请输入菜单名称" class="ml10" clearable @input="search" />
|
style="width: 310px" placeholder="请输入菜单名称" class="ml10" clearable @input="search" />
|
||||||
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
|
<el-button :icon="Plus" type="primary" @click="addMenu" class="ml10">新增</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,25 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<el-dialog width="700px" v-model.trim="dialogVisible" :title="title">
|
<el-dialog width="500px" v-model.trim="dialogVisible" :title="title">
|
||||||
<el-scrollbar>
|
<el-scrollbar>
|
||||||
<el-form
|
<el-form :mode="form" :inline="false" ref="formRef" :model="form" label-width="120px" :rules="rules"
|
||||||
:mode="form"
|
class="form-one">
|
||||||
:inline="false"
|
|
||||||
ref="formRef"
|
|
||||||
:model="form"
|
|
||||||
label-width="120px"
|
|
||||||
:rules="rules"
|
|
||||||
class="form-one"
|
|
||||||
>
|
|
||||||
<el-form-item prop="name" label="接口/按钮名称">
|
<el-form-item prop="name" label="接口/按钮名称">
|
||||||
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入接口名称" />
|
<el-input maxlength="32" show-word-limit v-model.trim="form.name" placeholder="请输入接口名称" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code" label="接口/按钮标识">
|
<el-form-item prop="code" label="接口/按钮标识">
|
||||||
<el-input
|
<el-input maxlength="32" show-word-limit v-model.trim="form.code" placeholder="请输入英文接口标识" />
|
||||||
maxlength="32"
|
|
||||||
show-word-limit
|
|
||||||
v-model.trim="form.code"
|
|
||||||
placeholder="请输入英文接口标识"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="path" label="接口路径">
|
<el-form-item prop="path" label="接口路径">
|
||||||
<el-input v-model.trim="form.path" placeholder="请输入接口路径" />
|
<el-input v-model.trim="form.path" placeholder="请输入接口路径" />
|
||||||
@@ -31,17 +19,11 @@
|
|||||||
</el-radio-group>
|
</el-radio-group>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="sort" label="排序">
|
<el-form-item prop="sort" label="排序">
|
||||||
<el-input maxlength="32" show-word-limit-number v-model.number="form.sort" :min="0" />
|
<el-input-number v-model.number="form.sort" style="width: 100%;" :min="0" />
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="remark" label="接口/按钮描述">
|
<el-form-item prop="remark" label="接口/按钮描述">
|
||||||
<el-input
|
<el-input show-word-limit maxlength="300" v-model.trim="form.remark" :rows="2" type="textarea"
|
||||||
maxlength="300"
|
placeholder="请输入描述" />
|
||||||
show-word-limit
|
|
||||||
v-model.trim="form.remark"
|
|
||||||
:rows="2"
|
|
||||||
type="textarea"
|
|
||||||
placeholder="请输入描述"
|
|
||||||
/>
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-scrollbar>
|
</el-scrollbar>
|
||||||
@@ -49,7 +31,7 @@
|
|||||||
<template #footer>
|
<template #footer>
|
||||||
<span class="dialog-footer">
|
<span class="dialog-footer">
|
||||||
<el-button @click="dialogVisible = false">取消</el-button>
|
<el-button @click="dialogVisible = false">取消</el-button>
|
||||||
<el-button type="primary" @click="submit">确认</el-button>
|
<el-button type="primary" @click="submit" :loading="loading">确定</el-button>
|
||||||
</span>
|
</span>
|
||||||
</template>
|
</template>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
@@ -66,6 +48,7 @@ const emits = defineEmits<{
|
|||||||
(e: 'init'): void
|
(e: 'init'): void
|
||||||
}>()
|
}>()
|
||||||
const formRef = ref()
|
const formRef = ref()
|
||||||
|
const loading = ref(false)
|
||||||
const form: any = reactive({
|
const form: any = reactive({
|
||||||
id: '',
|
id: '',
|
||||||
pid: '0',
|
pid: '0',
|
||||||
@@ -113,15 +96,20 @@ const open = (text: string, data: anyObj) => {
|
|||||||
const submit = async () => {
|
const submit = async () => {
|
||||||
formRef.value.validate(async valid => {
|
formRef.value.validate(async valid => {
|
||||||
if (valid) {
|
if (valid) {
|
||||||
|
loading.value = true
|
||||||
if (form.id) {
|
if (form.id) {
|
||||||
await update(form).then(() => {
|
await update(form).then(() => {
|
||||||
ElMessage.success('修改成功!')
|
ElMessage.success('修改成功!')
|
||||||
|
}).finally(() => {
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
let obj = JSON.parse(JSON.stringify(form))
|
let obj = JSON.parse(JSON.stringify(form))
|
||||||
delete obj.id
|
delete obj.id
|
||||||
await add(obj).then(() => {
|
await add(obj).then(() => {
|
||||||
ElMessage.success('新增成功!')
|
ElMessage.success('新增成功!')
|
||||||
|
}).finally(() => {
|
||||||
|
loading.value = false
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
emits('init')
|
emits('init')
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user