修改冀北问题
This commit is contained in:
guanj
@@ -1,32 +1,47 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
import { DEVICE_BOOT } from '@/utils/constantRequest'
|
||||
|
||||
const MAPPING_PATH = DEVICE_BOOT + '/line'
|
||||
|
||||
/**
|
||||
* 查询终端详细信息
|
||||
*/
|
||||
export const getDeviceDetailData = (id: string) => {
|
||||
return request({
|
||||
url: MAPPING_PATH + '/getDeviceDetailData?id=' + id,
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询监测点详细信息
|
||||
*/
|
||||
export const getLineDetailData = (id: string) => {
|
||||
return request({
|
||||
url: MAPPING_PATH + '/getLineDetailData?id=' + id,
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
export const getSubstationSelect = () => {
|
||||
return request({
|
||||
url: 'device-boot/substation/getSubstationSelect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
import request from '@/utils/request'
|
||||
|
||||
import { DEVICE_BOOT } from '@/utils/constantRequest'
|
||||
|
||||
const MAPPING_PATH = DEVICE_BOOT + '/line'
|
||||
|
||||
/**
|
||||
* 查询终端详细信息
|
||||
*/
|
||||
export const getDeviceDetailData = (id: string) => {
|
||||
return request({
|
||||
url: MAPPING_PATH + '/getDeviceDetailData?id=' + id,
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询监测点详细信息
|
||||
*/
|
||||
export const getLineDetailData = (id: string) => {
|
||||
return request({
|
||||
url: MAPPING_PATH + '/getLineDetailData?id=' + id,
|
||||
method: 'POST'
|
||||
})
|
||||
}
|
||||
|
||||
export const getSubstationSelect = () => {
|
||||
return request({
|
||||
url: 'device-boot/substation/getSubstationSelect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
// 查询变电站详情
|
||||
export const getSubstationSelectLine = (id: string) => {
|
||||
return request({
|
||||
url: '/device-boot/line/getSubstationData',
|
||||
method: 'post',
|
||||
data: [id]
|
||||
})
|
||||
}
|
||||
// 查询监测点
|
||||
export const getLineOverLimitData = (id: string) => {
|
||||
return request({
|
||||
url: '/device-boot/line/getLineOverLimitData?id=' + id,
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="divBox mt10">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%监测点数</span>
|
||||
<span class="divBox_num" style="color: #ff6600">
|
||||
<span class="divBox_num" style="color: #57bc6e">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%监测点数 -->
|
||||
<span style="flex: 1; color: #ff9100" class="text">
|
||||
<span style="flex: 1; color: #388e3c" class="text">
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
@@ -179,10 +179,17 @@ const tableStore: any = new TableStore({
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
<div class="divBox mt10">
|
||||
<span class="iconfont icon-igw-f-warning-data" style="color: #ff6600"></span>
|
||||
<span class="divBox_title">低于90%终端数</span>
|
||||
<span class="divBox_num" style="color: #ff6600">
|
||||
<span class="divBox_num" style="color: #57bc6e">
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
</span>
|
||||
</div>
|
||||
@@ -88,7 +88,7 @@
|
||||
{{ o.citTotalNum }}
|
||||
</span>
|
||||
<!-- 低于90%终端数 -->
|
||||
<span style="flex: 1; color: #ff9100" class="text">
|
||||
<span style="flex: 1; color: #388e3c" class="text">
|
||||
{{ o.citBelowNum }}
|
||||
</span>
|
||||
<span
|
||||
@@ -177,12 +177,18 @@ const tableStore: any = new TableStore({
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter(
|
||||
(k: any) => k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
)
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
const echart = () => {
|
||||
percentage.value = {
|
||||
color: ['#FF9100'],
|
||||
|
||||
@@ -108,7 +108,7 @@
|
||||
</span>
|
||||
<!-- -->
|
||||
<sp
|
||||
style="flex: 1; color: #ff9100"
|
||||
style="flex: 1; color: #388e3c"
|
||||
class="text"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
>
|
||||
@@ -123,7 +123,7 @@
|
||||
</span>
|
||||
<span
|
||||
style="flex: 1; color: #388e3c"
|
||||
:class="` ${o.qualified < 90 ? 'text-red' : ''}`"
|
||||
:class="` ${o.qualified > 10 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.qualified }}
|
||||
@@ -229,11 +229,17 @@ const tableStore: any = new TableStore({
|
||||
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
|
||||
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
|
||||
|
||||
abnormal.value = tableStore.table.data.filter((k: any) => k.name != '上送国网' && k.name != '非上送国网')
|
||||
abnormal.value = tableStore.table.data.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.count != 0
|
||||
} else {
|
||||
return k.name != '上送国网' && k.name != '非上送国网'
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
|
||||
@@ -1,14 +1,17 @@
|
||||
export let color = [
|
||||
'#07CCCA',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
'#77DA63',
|
||||
'#D5FF6B',
|
||||
'#Ff6600',
|
||||
'#FF9100',
|
||||
'#5B6E96',
|
||||
'#66FFCC',
|
||||
'#B3B'
|
||||
]
|
||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#A52a2a']
|
||||
export const color = [
|
||||
'#07CCCA',
|
||||
'#00BFF5',
|
||||
'#FFBF00',
|
||||
'#77DA63',
|
||||
'#D5FF6B',
|
||||
'#Ff6600',
|
||||
'#FF9100',
|
||||
'#5B6E96',
|
||||
'#66FFCC',
|
||||
'#B266FF',
|
||||
'#FF6680',
|
||||
'#40A0FF',
|
||||
'#33CC99'
|
||||
]
|
||||
export const gradeColor3 = ['#339966', '#FFCC33', '#A52a2a']
|
||||
export const gradeColor5 = ['#00CC00', '#99CC99', '#FF9900', '#996600', '#A52a2a']
|
||||
|
||||
205
src/components/tree/details/monitoringPointDetails.vue
Normal file
205
src/components/tree/details/monitoringPointDetails.vue
Normal file
@@ -0,0 +1,205 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="dialogVisible" :title="title" width="1200px">
|
||||
<el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="监测点详情" name="tab1">
|
||||
<el-descriptions :column="3" border label-width="150px">
|
||||
<el-descriptions-item label="项目工程">
|
||||
{{ details.areaName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="项目单位">
|
||||
{{ details.gdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="所属变电站">
|
||||
{{ details.bdName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">
|
||||
{{ details.scale }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端厂家">
|
||||
{{ details.manufacturer }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="终端名称">
|
||||
{{ details.devName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="网络参数">
|
||||
{{ details.ip }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点名称">
|
||||
{{ details.lineName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点序号">
|
||||
{{ details.id }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="通讯状态">
|
||||
{{ details.comFlag }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="干扰源类型">
|
||||
{{ details.loadType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="监测点对象名称">
|
||||
{{ details.objName }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="接线方式">
|
||||
{{ details.ptType }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="PT变比">
|
||||
{{ details.pt }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="CT变比">
|
||||
{{ details.ct }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="基准容量(MVA)">
|
||||
{{ details.standardCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="最小短路容量(MVA)">
|
||||
{{ details.shortCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="供电设备容量(MVA)">
|
||||
{{ details.devCapacity }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="用户协议容量(MVA)">
|
||||
{{ details.dealCapacity }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="监测点限值" name="tab2">
|
||||
<el-descriptions :column="3" border label-width="250px">
|
||||
<el-descriptions-item label="电压偏差上限值(%)">
|
||||
{{ limitValue.voltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压偏差下限值(%)">
|
||||
{{ limitValue.uvoltageDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="频率偏差限值(Hz)">
|
||||
{{ limitValue.freqDev }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="三相电压不平衡度限值(%)">
|
||||
{{ limitValue.ubalance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="负序电流限值(A)">
|
||||
{{ limitValue.ineg }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="长时闪变限值(%)">
|
||||
{{ limitValue.flicker }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="电压总畸变率限值(%)">
|
||||
{{ limitValue.uaberrance }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="奇次谐波电压含有率限值(%)">
|
||||
{{ limitValue.oddHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="偶次谐波电压含有率限值(%)">
|
||||
{{ limitValue.evenHarm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="3次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm3 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="4次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm4 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="5次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm5 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="6次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm6 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="7次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm7 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="8次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm8 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="9次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm9 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="10次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm10 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="11次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm11 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="12次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm12 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="13次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm13 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="14次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm14 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="15次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm15 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="16次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm16 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="17次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm17 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="18次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm18 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="19次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm19 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="20次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm20 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="21次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm21 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="22次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm22 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="23次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm23 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="24次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm24 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="25次谐波电流幅值限值(A)">
|
||||
{{ limitValue.iharm25 }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="0.5-1.5次间谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm }}
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="2.5-15.5次谐波电压含有率限值(%)">
|
||||
{{ limitValue.inUharm16 }}
|
||||
</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getLineOverLimitData, getLineDetailData } from '@/api/device-boot/line'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const activeName = ref('tab1')
|
||||
const details: any = ref([])
|
||||
const limitValue: any = ref([])
|
||||
const open = (data: any) => {
|
||||
details.value = []
|
||||
limitValue.value = []
|
||||
activeName.value = 'tab1'
|
||||
title.value = data.name.replace(/（[^）]*）/g, '') + '_详情'
|
||||
|
||||
getLineDetailData(data.id).then(res => {
|
||||
details.value = res.data
|
||||
|
||||
})
|
||||
getLineOverLimitData(data.id).then(res => {
|
||||
limitValue.value = res.data
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const handleClick = (tab: any, event: Event) => {}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
34
src/components/tree/details/substationDetails.vue
Normal file
34
src/components/tree/details/substationDetails.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<el-dialog draggable v-model="dialogVisible" :title="title" width="500px">
|
||||
<el-descriptions class="margin-top" :column="1" border label-width="150px">
|
||||
<el-descriptions-item label="变电站名称">{{ list[0]?.srbName }}</el-descriptions-item>
|
||||
<el-descriptions-item label="电压等级">{{ list[0]?.scale }}</el-descriptions-item>
|
||||
<el-descriptions-item label="经度">{{ list[0]?.coordY }}</el-descriptions-item>
|
||||
<el-descriptions-item label="纬度">{{ list[0]?.coordX }}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { getSubstationSelectLine } from '@/api/device-boot/line'
|
||||
const dialogVisible = ref(false)
|
||||
const title = ref('')
|
||||
const list: any = ref([])
|
||||
const open = (data: any) => {
|
||||
list.value = []
|
||||
title.value = data.name.replace(/（[^）]*）/g, '') + '_详情'
|
||||
|
||||
getSubstationSelectLine(data.id).then(res => {
|
||||
list.value = res.data
|
||||
})
|
||||
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-upload-list__item) {
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,162 +1,245 @@
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||
<Icon v-show="menuCollapse" @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer" />
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input v-model="filterText" placeholder="请输入内容" clearable maxlength="10" show-word-limit @input="change">
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon @click="onMenuCollapse" :name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''" size="18" class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer" v-if="props.canExpand" />
|
||||
<el-button icon="el-icon-Plus" v-if="props.addTree" type="primary" class="ml10"
|
||||
@click="onAddTree">新增</el-button>
|
||||
</div>
|
||||
<el-tree style="flex: 1; overflow: auto" ref="treeRef" :props="defaultProps" highlight-current
|
||||
:filter-node-method="filterNode" node-key="id" v-bind="$attrs">
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon :name="data.icon" style="font-size: 16px" :style="{ color: data.color }"
|
||||
v-if="data.icon" />
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
const emit = defineEmits(['onAddTree'])
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
addTree?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
addTree: false
|
||||
})
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const specialCharsPattern = /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g;
|
||||
const change=(val) => {
|
||||
|
||||
|
||||
if (specialCharsPattern.test(val)) {
|
||||
ElMessage.warning('禁止输入特殊字符!')
|
||||
filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
|
||||
console.log("🚀 ~ change ~ filterText.value:", filterText.value)
|
||||
|
||||
treeRef.value!.filter(filterText.value)
|
||||
}else{
|
||||
treeRef.value!.filter(filterText.value)
|
||||
}
|
||||
}
|
||||
// watch(filterText, val => {
|
||||
|
||||
// console.log("🚀 ~ val:", specialCharsPattern.test(val))
|
||||
// if (specialCharsPattern.test(val)) {
|
||||
// ElMessage.warning('禁止输入特殊字符!')
|
||||
// filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
|
||||
// console.log("🚀 ~ filterText.value:", filterText.value)
|
||||
// treeRef.value!.filter(filterText.value)
|
||||
// }else{
|
||||
// treeRef.value!.filter(filterText.value)
|
||||
// }
|
||||
|
||||
// })
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
// 添加树
|
||||
const onAddTree = () => {
|
||||
emit('onAddTree')
|
||||
}
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div :style="{ width: menuCollapse ? '40px' : props.width }" style="transition: all 0.3s; overflow: hidden">
|
||||
<Icon
|
||||
v-show="menuCollapse"
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 mt20 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
<div class="cn-tree" :style="{ opacity: menuCollapse ? 0 : 1 }">
|
||||
<div style="display: flex; align-items: center" class="mb10">
|
||||
<el-input
|
||||
v-model="filterText"
|
||||
placeholder="请输入内容"
|
||||
clearable
|
||||
maxlength="10"
|
||||
show-word-limit
|
||||
@input="change"
|
||||
>
|
||||
<template #prefix>
|
||||
<Icon name="el-icon-Search" style="font-size: 16px" />
|
||||
</template>
|
||||
</el-input>
|
||||
<Icon
|
||||
@click="onMenuCollapse"
|
||||
:name="menuCollapse ? 'el-icon-Expand' : 'el-icon-Fold'"
|
||||
:class="menuCollapse ? 'unfold' : ''"
|
||||
size="18"
|
||||
class="fold ml10 menu-collapse"
|
||||
style="cursor: pointer"
|
||||
v-if="props.canExpand"
|
||||
/>
|
||||
<el-button icon="el-icon-Plus" v-if="props.addTree" type="primary" class="ml10" @click="onAddTree">
|
||||
新增
|
||||
</el-button>
|
||||
</div>
|
||||
<el-tree
|
||||
style="flex: 1; overflow: auto"
|
||||
ref="treeRef"
|
||||
:props="defaultProps"
|
||||
highlight-current
|
||||
:filter-node-method="filterNode"
|
||||
node-key="id"
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template #default="{ node, data }">
|
||||
<span class="custom-tree-node">
|
||||
<Icon
|
||||
:name="data.icon"
|
||||
style="font-size: 16px"
|
||||
:style="{ color: data.color }"
|
||||
v-if="data.icon"
|
||||
/>
|
||||
|
||||
<el-tooltip
|
||||
class="box-item"
|
||||
effect="customized"
|
||||
placement="bottom-start"
|
||||
:offset="0"
|
||||
v-if=" data.level == 6"
|
||||
>
|
||||
<template #content>
|
||||
<el-button type="primary" plain @click="viewDetails(data)">
|
||||
{{ data.level == 3 ? '变电站详情' : '监测点详情' }}
|
||||
</el-button>
|
||||
</template>
|
||||
<span style="margin-left: 4px">{{ node.label }}</span>
|
||||
</el-tooltip>
|
||||
<span v-else style="margin-left: 4px">{{ node.label }}</span>
|
||||
</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</div>
|
||||
<!-- 变电站详情 -->
|
||||
<SubstationDetails ref="SubstationRef"/>
|
||||
<!-- 监测点详情 -->
|
||||
<MonitoringPointDetails ref="MonitoringPointRef"/>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import useCurrentInstance from '@/utils/useCurrentInstance'
|
||||
import { ElTree } from 'element-plus'
|
||||
import { ref, watch } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import MonitoringPointDetails from './details/monitoringPointDetails.vue'
|
||||
import SubstationDetails from './details/substationDetails.vue'
|
||||
|
||||
defineOptions({
|
||||
name: 'govern/tree'
|
||||
})
|
||||
const emit = defineEmits(['onAddTree'])
|
||||
interface Props {
|
||||
width?: string
|
||||
canExpand?: boolean
|
||||
addTree?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
width: '280px',
|
||||
canExpand: true,
|
||||
addTree: false
|
||||
})
|
||||
const { proxy } = useCurrentInstance()
|
||||
const menuCollapse = ref(false)
|
||||
const MonitoringPointRef = ref()
|
||||
const SubstationRef = ref()
|
||||
const filterText = ref('')
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const specialCharsPattern = /[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g
|
||||
const change = val => {
|
||||
if (specialCharsPattern.test(val)) {
|
||||
ElMessage.warning('禁止输入特殊字符!')
|
||||
filterText.value = val.replace(
|
||||
/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g,
|
||||
''
|
||||
)
|
||||
console.log('🚀 ~ change ~ filterText.value:', filterText.value)
|
||||
|
||||
treeRef.value!.filter(filterText.value)
|
||||
} else {
|
||||
treeRef.value!.filter(filterText.value)
|
||||
}
|
||||
}
|
||||
// watch(filterText, val => {
|
||||
|
||||
// console.log("🚀 ~ val:", specialCharsPattern.test(val))
|
||||
// if (specialCharsPattern.test(val)) {
|
||||
// ElMessage.warning('禁止输入特殊字符!')
|
||||
// filterText.value = val.replace(/[`~!@$%^&*\-+=<>?:"{}|,.\/;'\\[\]·~！@¥%……&*（）——\-+={}|《》？：“”【】、；‘’，。、～]/g, "")
|
||||
// console.log("🚀 ~ filterText.value:", filterText.value)
|
||||
// treeRef.value!.filter(filterText.value)
|
||||
// }else{
|
||||
// treeRef.value!.filter(filterText.value)
|
||||
// }
|
||||
|
||||
// })
|
||||
const onMenuCollapse = () => {
|
||||
menuCollapse.value = !menuCollapse.value
|
||||
proxy.eventBus.emit('cnTreeCollapse', menuCollapse)
|
||||
}
|
||||
// 查看详情
|
||||
const viewDetails = (data: any) => {
|
||||
console.log("🚀 ~ viewDetails ~ data:", data)
|
||||
if (data.level == 3) {
|
||||
// 变电站详情
|
||||
// substationDetails
|
||||
SubstationRef.value.open(data)
|
||||
} else {
|
||||
// 监测点详情
|
||||
MonitoringPointRef.value.open(data)
|
||||
}
|
||||
|
||||
// proxy.eventBus.emit('viewDetails', data)
|
||||
}
|
||||
const filterNode = (value: string, data: any, node: any) => {
|
||||
if (!value) return true
|
||||
// return data.name.includes(value)
|
||||
if (data.name) {
|
||||
return chooseNode(value, data, node)
|
||||
}
|
||||
}
|
||||
|
||||
// 过滤父节点 / 子节点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
|
||||
const chooseNode = (value: string, data: any, node: any) => {
|
||||
if (data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
const level = node.level
|
||||
// 如果传入的节点本身就是一级节点就不用校验了
|
||||
if (level === 1) {
|
||||
return false
|
||||
}
|
||||
// 先取当前节点的父节点
|
||||
let parentData = node.parent
|
||||
// 遍历当前节点的父节点
|
||||
let index = 0
|
||||
while (index < level - 1) {
|
||||
// 如果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
|
||||
if (parentData.data.name.indexOf(value) !== -1) {
|
||||
return true
|
||||
}
|
||||
// 否则的话再往上一层做匹配
|
||||
parentData = parentData.parent
|
||||
index++
|
||||
}
|
||||
// 没匹配到返回false
|
||||
return false
|
||||
}
|
||||
// 添加树
|
||||
const onAddTree = () => {
|
||||
emit('onAddTree')
|
||||
}
|
||||
const treeRef = ref<InstanceType<typeof ElTree>>()
|
||||
defineExpose({ treeRef })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.cn-tree {
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
|
||||
: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);
|
||||
}
|
||||
|
||||
.menu-collapse {
|
||||
color: var(--el-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.custom-tree-node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.el-popper.is-customized {
|
||||
/* Set padding to ensure the height is 32px */
|
||||
padding: 0;
|
||||
background: var(--el-color-primary-light-3);
|
||||
}
|
||||
|
||||
.el-popper.is-customized .el-popper__arrow::before {
|
||||
background: var(--el-color-primary-light-3);
|
||||
right: 0;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,355 +1,355 @@
|
||||
<template>
|
||||
<div class="default-main" style="position: relative">
|
||||
<TableHeader>
|
||||
<template #select>
|
||||
<el-form-item label="终端型号">
|
||||
<el-select v-model="tableStore.table.params.teriminal" clearable placeholder="请选择终端型号">
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端状态">
|
||||
<el-select v-model="tableStore.table.params.teriminalstatus" clearable placeholder="请选择终端状态">
|
||||
<el-option
|
||||
v-for="item in teriminalstatusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态">
|
||||
<el-select v-model="tableStore.table.params.state" clearable placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in stateoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="程序版本">
|
||||
<el-select v-model="tableStore.table.params.program" clearable placeholder="请选择程序版本">
|
||||
<el-option
|
||||
v-for="item in programoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" @click="add">导出</el-button>
|
||||
<el-button icon="el-icon-Check" @click="add">批量升级</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div :style="`height: calc(${tableStore.table.height} + 58px)`">
|
||||
<vxe-table
|
||||
v-loading="tableStore.table.loading"
|
||||
height="auto"
|
||||
auto-resize
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="treeData"
|
||||
show-overflow
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
>
|
||||
<vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号" :formatter="formFilter"></vxe-column>
|
||||
<vxe-column field="versionName" title="版本号"></vxe-column>
|
||||
<vxe-column field="protocol" title="协议版本"></vxe-column>
|
||||
<vxe-column field="versionDate" title="版本日期"></vxe-column>
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.runFlag === 0" style="color: #fff; background: #0099cc" size="small">
|
||||
投运
|
||||
</el-tag>
|
||||
<el-tag v-if="row.runFlag === 1" style="color: #fff; background: #996600" size="small">
|
||||
检修
|
||||
</el-tag>
|
||||
<el-tag v-if="row.runFlag === 2" style="color: #fff; background: #A52a2a" size="small">
|
||||
停运
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.comFlag === 0" style="color: #fff; background: #A52a2a" size="small">
|
||||
中断
|
||||
</el-tag>
|
||||
<el-tag v-if="row.comFlag === 1" style="color: #fff; background: #2e8b57" size="small">
|
||||
正常
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateBy" title="升级人员">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.updateBy == null || row.updateBy == '/'">--</span>
|
||||
<span v-else>{{ row.updateBy }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateTime" title="最新升级时间"></vxe-column>
|
||||
<vxe-column title="操作" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.level == 4" size="small" link @click="updateprogram(row)">升级</el-button>
|
||||
<el-button
|
||||
v-if="row.level == 4"
|
||||
:disabled="row.state == 1 ? true : false"
|
||||
size="small"
|
||||
link
|
||||
@click="queryview(row)"
|
||||
>
|
||||
日志查看
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
draggable
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:title="protitle + '#终端升级日志查看'"
|
||||
width="70%"
|
||||
>
|
||||
<div :style="{ height: dialogHeight.height }">
|
||||
<vxe-table height="auto" auto-resize :data="logtableData" v-bind="defaultAttribute">
|
||||
<vxe-column field="devTypeName" align="center" title="终端序号"></vxe-column>
|
||||
<vxe-column field="versionId" align="center" title="版本序号"></vxe-column>
|
||||
<vxe-column field="flag" align="center" title="版本状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.flag == true" style="color: #fff; background: #fc0">前期版本</el-tag>
|
||||
<el-tag v-if="row.flag == false" style="color: #fff; background: #0c0">当前版本</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="result" align="center" title="升级结果" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.result == false" style="color: #fff; background: #f30">升级失败</el-tag>
|
||||
<el-tag v-if="row.result == true" style="color: #fff; background: #093">升级成功</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="state" align="center" title="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.state == false" style="color: #fff; background: #f30">删除</el-tag>
|
||||
<el-tag v-if="row.state == true" style="color: #fff; background: #093">正常</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="createBy" align="center" title="创建用户"></vxe-column>
|
||||
<vxe-column field="createTime" align="center" title="创建时间"></vxe-column>
|
||||
<vxe-column field="updateTime" align="center" title="升级时间"></vxe-column>
|
||||
<vxe-column field="updateBy" align="center" title="升级人员"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 升级 -->
|
||||
<el-dialog
|
||||
draggable
|
||||
v-model="prodialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:title="protitle + '#终端程序升级'"
|
||||
width="40%"
|
||||
>
|
||||
<el-col v-for="(item, index) in percentageoption" :key="index">
|
||||
<span style="font-size: 14px; font-weight: bold">{{ item.name }}</span>
|
||||
:
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="item.percentage"
|
||||
:status="item.status"
|
||||
:format="format"
|
||||
></el-progress>
|
||||
</el-col>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getTerminalUpLog } from '@/api/device-boot/Business'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { getDevTypeList } from '@/api/device-boot/modelManage'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
defineOptions({
|
||||
name: 'BusinessAdministrator/TerminalManagement/ProgramManagement'
|
||||
})
|
||||
|
||||
const pageHeight = mainHeight(83)
|
||||
const dialogHeight = mainHeight(300)
|
||||
const dictData = useDictData()
|
||||
const teriminaloption: any = ref([])
|
||||
const teriminalstatusoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '投运', id: 0 },
|
||||
{ name: '检修', id: 1 },
|
||||
{ name: '停运', id: 2 }
|
||||
])
|
||||
const stateoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '正常', id: 1 },
|
||||
{ name: '中断', id: 0 }
|
||||
])
|
||||
const prodialogVisible = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const protitle = ref('')
|
||||
const treeData: any = ref([])
|
||||
const treeDataCopy: any = ref([])
|
||||
//进度条对象
|
||||
const percentageoption = ref([
|
||||
{
|
||||
name: '1号测试终端',
|
||||
status: 'exception',
|
||||
percentage: 20
|
||||
},
|
||||
{
|
||||
name: '2号测试终端',
|
||||
status: 'warning',
|
||||
percentage: 50
|
||||
},
|
||||
{
|
||||
name: '3号测试终端',
|
||||
status: 'success',
|
||||
percentage: 90
|
||||
}
|
||||
])
|
||||
const programoption: any = ref([])
|
||||
const logtableData: any = ref([])
|
||||
const tableRef = ref()
|
||||
const status = ref('')
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/version/getTerminalVersionList',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.forEach((item: any) => {
|
||||
// if (item.children.length > 0) {
|
||||
// item.id = item.children[0].pid
|
||||
// }
|
||||
// })
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
setTimeout(() => {
|
||||
tableRef.value.setAllTreeExpand(true)
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
tableStore.table.params.teriminal = ''
|
||||
tableStore.table.params.state = ''
|
||||
tableStore.table.params.program = ''
|
||||
tableStore.table.params.searchEvent = ''
|
||||
tableStore.table.params.filterName = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
getDevTypeList().then(res => {
|
||||
teriminaloption.value = res.data
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
const add = () => {}
|
||||
const updateprogram = (row: any) => {
|
||||
protitle.value = row.name
|
||||
prodialogVisible.value = true
|
||||
}
|
||||
const queryview = (row: any) => {
|
||||
dialogVisible.value = true
|
||||
protitle.value = row.name
|
||||
let data = {
|
||||
id: row.id
|
||||
}
|
||||
getTerminalUpLog(data).then((res: any) => {
|
||||
logtableData.value = res.data
|
||||
})
|
||||
}
|
||||
const format = (percentage: any) => {
|
||||
if (percentage <= 100 && percentage >= 90) {
|
||||
status.value = 'success'
|
||||
return percentage === 100 ? '升级成功' : `${percentage}%`
|
||||
} else if (percentage > 0 && percentage < 50) {
|
||||
status.value = 'exception'
|
||||
return percentage <= 20 ? '升级失败' + percentage + '%' : `${percentage}%`
|
||||
} else if (percentage > 0 && percentage <= 50) {
|
||||
status.value = 'warning'
|
||||
return percentage <= 50 ? '升级中断' : `${percentage}%`
|
||||
}
|
||||
}
|
||||
const formFilter = (row: any) => {
|
||||
let title = '/'
|
||||
if (row.cellValue != null) {
|
||||
teriminaloption.value.forEach((item: any) => {
|
||||
if (item.id == row.cellValue) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(e => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
|
||||
treeData.value = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
treeData.value = treeDataCopy
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 300)
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main" style="position: relative">
|
||||
<TableHeader>
|
||||
<template #select>
|
||||
<el-form-item label="终端型号">
|
||||
<el-select v-model="tableStore.table.params.teriminal" clearable placeholder="请选择终端型号">
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端状态">
|
||||
<el-select v-model="tableStore.table.params.teriminalstatus" clearable placeholder="请选择终端状态">
|
||||
<el-option
|
||||
v-for="item in teriminalstatusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态">
|
||||
<el-select v-model="tableStore.table.params.state" clearable placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in stateoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="程序版本">
|
||||
<el-select v-model="tableStore.table.params.program" clearable placeholder="请选择程序版本">
|
||||
<el-option
|
||||
v-for="item in programoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" @click="add">导出</el-button>
|
||||
<el-button icon="el-icon-Check" @click="add">批量升级</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div :style="`height: calc(${tableStore.table.height} + 58px)`">
|
||||
<vxe-table
|
||||
v-loading="tableStore.table.loading"
|
||||
height="auto"
|
||||
auto-resize
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="treeData"
|
||||
show-overflow
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
>
|
||||
<vxe-column field="name" align="left" title="电网拓扑" min-width="200" tree-node></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号" :formatter="formFilter"></vxe-column>
|
||||
<vxe-column field="versionName" title="版本号"></vxe-column>
|
||||
<vxe-column field="protocol" title="协议版本"></vxe-column>
|
||||
<vxe-column field="versionDate" title="版本日期"></vxe-column>
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.runFlag === 0" style="color: #fff; background: #0099cc" size="small">
|
||||
投运
|
||||
</el-tag>
|
||||
<el-tag v-if="row.runFlag === 1" style="color: #fff; background: #996600" size="small">
|
||||
检修
|
||||
</el-tag>
|
||||
<el-tag v-if="row.runFlag === 2" style="color: #fff; background: #A52a2a" size="small">
|
||||
停运
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.comFlag === 0" style="color: #fff; background: #A52a2a" size="small">
|
||||
中断
|
||||
</el-tag>
|
||||
<el-tag v-if="row.comFlag === 1" style="color: #fff; background: #2e8b57" size="small">
|
||||
正常
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateBy" title="升级人员">
|
||||
<template #default="{ row }">
|
||||
<span v-if="row.updateBy == null || row.updateBy == '/'">--</span>
|
||||
<span v-else>{{ row.updateBy }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="updateTime" title="最新升级时间"></vxe-column>
|
||||
<vxe-column title="操作" min-width="100">
|
||||
<template #default="{ row }">
|
||||
<el-button v-if="row.level == 4" size="small" link @click="updateprogram(row)">升级</el-button>
|
||||
<el-button
|
||||
v-if="row.level == 4"
|
||||
:disabled="row.state == 1 ? true : false"
|
||||
size="small"
|
||||
link
|
||||
@click="queryview(row)"
|
||||
>
|
||||
日志查看
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<el-dialog
|
||||
draggable
|
||||
v-model="dialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:title="protitle + '#终端升级日志查看'"
|
||||
width="70%"
|
||||
>
|
||||
<div :style="{ height: dialogHeight.height }">
|
||||
<vxe-table height="auto" auto-resize :data="logtableData" v-bind="defaultAttribute">
|
||||
<vxe-column field="devTypeName" align="center" title="终端序号"></vxe-column>
|
||||
<vxe-column field="versionId" align="center" title="版本序号"></vxe-column>
|
||||
<vxe-column field="flag" align="center" title="版本状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.flag == true" style="color: #fff; background: #fc0">前期版本</el-tag>
|
||||
<el-tag v-if="row.flag == false" style="color: #fff; background: #0c0">当前版本</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="result" align="center" title="升级结果" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.result == false" style="color: #fff; background: #f30">升级失败</el-tag>
|
||||
<el-tag v-if="row.result == true" style="color: #fff; background: #093">升级成功</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="state" align="center" title="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.state == false" style="color: #fff; background: #f30">删除</el-tag>
|
||||
<el-tag v-if="row.state == true" style="color: #fff; background: #093">正常</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="createBy" align="center" title="创建用户"></vxe-column>
|
||||
<vxe-column field="createTime" align="center" title="创建时间"></vxe-column>
|
||||
<vxe-column field="updateTime" align="center" title="升级时间"></vxe-column>
|
||||
<vxe-column field="updateBy" align="center" title="升级人员"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 升级 -->
|
||||
<el-dialog
|
||||
draggable
|
||||
v-model="prodialogVisible"
|
||||
:close-on-click-modal="false"
|
||||
:title="protitle + '#终端程序升级'"
|
||||
width="40%"
|
||||
>
|
||||
<el-col v-for="(item, index) in percentageoption" :key="index">
|
||||
<span style="font-size: 14px; font-weight: bold">{{ item.name }}</span>
|
||||
:
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="item.percentage"
|
||||
:status="item.status"
|
||||
:format="format"
|
||||
></el-progress>
|
||||
</el-col>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getTerminalUpLog } from '@/api/device-boot/Business'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { getDevTypeList } from '@/api/device-boot/modelManage'
|
||||
import { debounce } from 'lodash-es'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
defineOptions({
|
||||
name: 'BusinessAdministrator/TerminalManagement/ProgramManagement'
|
||||
})
|
||||
|
||||
const pageHeight = mainHeight(83)
|
||||
const dialogHeight = mainHeight(300)
|
||||
const dictData = useDictData()
|
||||
const teriminaloption: any = ref([])
|
||||
const teriminalstatusoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '投运', id: 0 },
|
||||
{ name: '检修', id: 1 },
|
||||
{ name: '停运', id: 2 }
|
||||
])
|
||||
const stateoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '正常', id: 1 },
|
||||
{ name: '中断', id: 0 }
|
||||
])
|
||||
const prodialogVisible = ref(false)
|
||||
const dialogVisible = ref(false)
|
||||
const protitle = ref('')
|
||||
const treeData: any = ref([])
|
||||
const treeDataCopy: any = ref([])
|
||||
//进度条对象
|
||||
const percentageoption = ref([
|
||||
{
|
||||
name: '1号测试终端',
|
||||
status: 'exception',
|
||||
percentage: 20
|
||||
},
|
||||
{
|
||||
name: '2号测试终端',
|
||||
status: 'warning',
|
||||
percentage: 50
|
||||
},
|
||||
{
|
||||
name: '3号测试终端',
|
||||
status: 'success',
|
||||
percentage: 90
|
||||
}
|
||||
])
|
||||
const programoption: any = ref([])
|
||||
const logtableData: any = ref([])
|
||||
const tableRef = ref()
|
||||
const status = ref('')
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/version/getTerminalVersionList',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
// tableStore.table.data.forEach((item: any) => {
|
||||
// if (item.children.length > 0) {
|
||||
// item.id = item.children[0].pid
|
||||
// }
|
||||
// })
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
setTimeout(() => {
|
||||
tableRef.value.setAllTreeExpand(true)
|
||||
}, 0)
|
||||
}
|
||||
})
|
||||
tableStore.table.params.teriminal = ''
|
||||
tableStore.table.params.state = ''
|
||||
tableStore.table.params.program = ''
|
||||
tableStore.table.params.searchEvent = ''
|
||||
tableStore.table.params.filterName = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
getDevTypeList().then(res => {
|
||||
teriminaloption.value = res.data
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
const add = () => {}
|
||||
const updateprogram = (row: any) => {
|
||||
protitle.value = row.name
|
||||
prodialogVisible.value = true
|
||||
}
|
||||
const queryview = (row: any) => {
|
||||
dialogVisible.value = true
|
||||
protitle.value = row.name
|
||||
let data = {
|
||||
id: row.id
|
||||
}
|
||||
getTerminalUpLog(data).then((res: any) => {
|
||||
logtableData.value = res.data
|
||||
})
|
||||
}
|
||||
const format = (percentage: any) => {
|
||||
if (percentage <= 100 && percentage >= 90) {
|
||||
status.value = 'success'
|
||||
return percentage === 100 ? '升级成功' : `${percentage}%`
|
||||
} else if (percentage > 0 && percentage < 50) {
|
||||
status.value = 'exception'
|
||||
return percentage <= 20 ? '升级失败' + percentage + '%' : `${percentage}%`
|
||||
} else if (percentage > 0 && percentage <= 50) {
|
||||
status.value = 'warning'
|
||||
return percentage <= 50 ? '升级中断' : `${percentage}%`
|
||||
}
|
||||
}
|
||||
const formFilter = (row: any) => {
|
||||
let title = '/'
|
||||
if (row.cellValue != null) {
|
||||
teriminaloption.value.forEach((item: any) => {
|
||||
if (item.id == row.cellValue) {
|
||||
title = item.name
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
return title
|
||||
}
|
||||
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(e => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
|
||||
treeData.value = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
treeData.value = treeDataCopy
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 300)
|
||||
</script>
|
||||
|
||||
@@ -1,282 +1,282 @@
|
||||
<template>
|
||||
<div class="default-main" style="position: relative">
|
||||
<TableHeader>
|
||||
<template #select>
|
||||
<el-form-item label="终端型号">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.devType"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择终端型号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端状态">
|
||||
<el-select v-model="tableStore.table.params.runFlag" clearable placeholder="请选择终端状态">
|
||||
<el-option
|
||||
v-for="item in teriminalstatusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态">
|
||||
<el-select v-model="tableStore.table.params.comFlag" clearable placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in stateoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="筛选">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
clearable
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary" icon="el-icon-DataLine" @click="manage('终端状态管理', 0)">
|
||||
终端状态管理
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-Operation" @click="manage('流量套餐配置', 1)">
|
||||
流量套餐配置
|
||||
</el-button> -->
|
||||
<!-- <el-button type="primary" icon="el-icon-Menu" @click="manage('流量策略配置', 2)">
|
||||
流量策略配置
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Histogram" @click="liultjData">流量统计</el-button> -->
|
||||
<!-- <el-button type="primary" icon="el-icon-Setting" @click="resect">重启前置程序</el-button> -->
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div :style="`height: calc(${tableStore.table.height} + 58px)`">
|
||||
<vxe-table
|
||||
v-loading="tableStore.table.loading"
|
||||
height="auto"
|
||||
auto-resize
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="treeData"
|
||||
show-overflow
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
:checkbox-config="{ labelField: 'name' }"
|
||||
>
|
||||
<vxe-column
|
||||
field="name"
|
||||
align="left"
|
||||
type="checkbox"
|
||||
title="电网拓扑"
|
||||
min-width="200"
|
||||
tree-node
|
||||
></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号">
|
||||
<template #default="{ row }">
|
||||
{{ teriminaloption.find((item: any) => item.id === row.devType)?.name }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="version" title="版本信息"></vxe-column>
|
||||
<vxe-column field="ip" title="网络参数"></vxe-column>
|
||||
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.runFlag === 0" type="success" :disable-transitions="true" size="small">投运</el-tag>
|
||||
<el-tag v-if="row.runFlag === 1" type="warning" :disable-transitions="true" size="small">检修</el-tag>
|
||||
<el-tag v-if="row.runFlag === 2" type="danger" :disable-transitions="true" size="small">停运</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.comFlag === 0" type="danger" :disable-transitions="true" size="small">中断</el-tag>
|
||||
<el-tag v-if="row.comFlag === 1" type="success" :disable-transitions="true" size="small">正常</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="160">
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button v-if="row.level === 4" type="primary" size="small" link @click="uesdealia(row)">
|
||||
终端详情
|
||||
</el-button> -->
|
||||
<el-button v-if="row.level === 4" type="primary" size="small" link @click="log(row)">
|
||||
查看日志
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<!-- 终端详情 -->
|
||||
<detail ref="detailRef" />
|
||||
<!-- 配置 -->
|
||||
<disposition ref="dispositionRef" @onSubmit="tableStore.index()" />
|
||||
<!-- 日志 -->
|
||||
<Log ref="logRef" v-if="logFlag" @close="logFlag = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick, reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDevTypeList } from '@/api/device-boot/modelManage'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { debounce } from 'lodash-es'
|
||||
|
||||
import disposition from './components/disposition.vue'
|
||||
import detail from './components/detail.vue'
|
||||
import Log from './components/log.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
|
||||
defineOptions({
|
||||
name: 'BusinessAdministrator/TerminalManagement/TerminalManagement'
|
||||
})
|
||||
const dispositionRef = ref()
|
||||
const detailRef = ref()
|
||||
const logRef = ref()
|
||||
const dictData = useDictData()
|
||||
const logFlag = ref(false)
|
||||
const teriminaloption: any = ref([])
|
||||
|
||||
const teriminalstatusoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '投运', id: 0 },
|
||||
{ name: '检修', id: 1 },
|
||||
{ name: '停运', id: 2 }
|
||||
])
|
||||
const stateoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '正常', id: 1 },
|
||||
{ name: '中断', id: 0 }
|
||||
])
|
||||
const treeData: any = ref([])
|
||||
const treeDataCopy: any = ref([])
|
||||
|
||||
const tableRef = ref()
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/maintain/getTerminalMainList',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
setTimeout(() => {
|
||||
tableRef.value.setAllTreeExpand(true)
|
||||
}, 0)
|
||||
searchEvent()
|
||||
}
|
||||
})
|
||||
tableStore.table.params.devType = ''
|
||||
tableStore.table.params.runFlag = ''
|
||||
tableStore.table.params.comFlag = ''
|
||||
tableStore.table.params.filterName = ''
|
||||
// 处理大数据卡顿
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
getDevTypeList().then(res => {
|
||||
teriminaloption.value = res.data
|
||||
})
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
// 终端状态管理
|
||||
const manage = (name: string, key: number) => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const selectRecords = $table
|
||||
.getCheckboxRecords()
|
||||
.filter((item: any) => item.level == 4)
|
||||
.map(item => item.id)
|
||||
console.log('🚀 ~ deviceData ~ selectRecords:', selectRecords)
|
||||
if (selectRecords.length == 0) {
|
||||
return ElMessage({
|
||||
message: '请至少选择一台装置',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
dispositionRef.value.open({
|
||||
title: name,
|
||||
id: selectRecords,
|
||||
key: key
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 流量统计
|
||||
const liultjData = () => {}
|
||||
// 重启前置程序
|
||||
const resect = () => {}
|
||||
|
||||
// 终端详情
|
||||
const uesdealia = (row: any) => {
|
||||
detailRef.value.open(row)
|
||||
}
|
||||
// 流量详情
|
||||
const log = (row: any) => {
|
||||
logFlag.value = true
|
||||
setTimeout(() => {
|
||||
logRef.value.open(row)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy.value,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
treeData.value = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
treeData.value = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main" style="position: relative">
|
||||
<TableHeader>
|
||||
<template #select>
|
||||
<el-form-item label="终端型号">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.devType"
|
||||
filterable
|
||||
clearable
|
||||
placeholder="请选择终端型号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端状态">
|
||||
<el-select v-model="tableStore.table.params.runFlag" clearable placeholder="请选择终端状态">
|
||||
<el-option
|
||||
v-for="item in teriminalstatusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态">
|
||||
<el-select v-model="tableStore.table.params.comFlag" clearable placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in stateoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
clearable
|
||||
placeholder="输入关键字筛选"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button type="primary" icon="el-icon-DataLine" @click="manage('终端状态管理', 0)">
|
||||
终端状态管理
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-Operation" @click="manage('流量套餐配置', 1)">
|
||||
流量套餐配置
|
||||
</el-button> -->
|
||||
<!-- <el-button type="primary" icon="el-icon-Menu" @click="manage('流量策略配置', 2)">
|
||||
流量策略配置
|
||||
</el-button>
|
||||
<el-button type="primary" icon="el-icon-Histogram" @click="liultjData">流量统计</el-button> -->
|
||||
<!-- <el-button type="primary" icon="el-icon-Setting" @click="resect">重启前置程序</el-button> -->
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div :style="`height: calc(${tableStore.table.height} + 58px)`">
|
||||
<vxe-table
|
||||
v-loading="tableStore.table.loading"
|
||||
height="auto"
|
||||
auto-resize
|
||||
ref="tableRef"
|
||||
v-bind="defaultAttribute"
|
||||
:data="treeData"
|
||||
show-overflow
|
||||
:tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }"
|
||||
:checkbox-config="{ labelField: 'name' }"
|
||||
>
|
||||
<vxe-column
|
||||
field="name"
|
||||
align="left"
|
||||
type="checkbox"
|
||||
title="电网拓扑"
|
||||
min-width="200"
|
||||
tree-node
|
||||
></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号">
|
||||
<template #default="{ row }">
|
||||
{{ teriminaloption.find((item: any) => item.id === row.devType)?.name }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="version" title="版本信息"></vxe-column>
|
||||
<vxe-column field="ip" title="网络参数"></vxe-column>
|
||||
|
||||
<vxe-column field="runFlag" title="终端状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.runFlag === 0" type="success" :disable-transitions="true" size="small">投运</el-tag>
|
||||
<el-tag v-if="row.runFlag === 1" type="warning" :disable-transitions="true" size="small">检修</el-tag>
|
||||
<el-tag v-if="row.runFlag === 2" type="danger" :disable-transitions="true" size="small">停运</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="comFlag" title="通讯状态">
|
||||
<template #default="{ row }">
|
||||
<el-tag v-if="row.comFlag === 0" type="danger" :disable-transitions="true" size="small">中断</el-tag>
|
||||
<el-tag v-if="row.comFlag === 1" type="success" :disable-transitions="true" size="small">正常</el-tag>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="操作" width="160">
|
||||
<template #default="{ row }">
|
||||
<!-- <el-button v-if="row.level === 4" type="primary" size="small" link @click="uesdealia(row)">
|
||||
终端详情
|
||||
</el-button> -->
|
||||
<el-button v-if="row.level === 4" type="primary" size="small" link @click="log(row)">
|
||||
查看日志
|
||||
</el-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
<!-- 终端详情 -->
|
||||
<detail ref="detailRef" />
|
||||
<!-- 配置 -->
|
||||
<disposition ref="dispositionRef" @onSubmit="tableStore.index()" />
|
||||
<!-- 日志 -->
|
||||
<Log ref="logRef" v-if="logFlag" @close="logFlag = false" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick, reactive } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { getDevTypeList } from '@/api/device-boot/modelManage'
|
||||
import XEUtils from 'xe-utils'
|
||||
import { debounce } from 'lodash-es'
|
||||
|
||||
import disposition from './components/disposition.vue'
|
||||
import detail from './components/detail.vue'
|
||||
import Log from './components/log.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
|
||||
defineOptions({
|
||||
name: 'BusinessAdministrator/TerminalManagement/TerminalManagement'
|
||||
})
|
||||
const dispositionRef = ref()
|
||||
const detailRef = ref()
|
||||
const logRef = ref()
|
||||
const dictData = useDictData()
|
||||
const logFlag = ref(false)
|
||||
const teriminaloption: any = ref([])
|
||||
|
||||
const teriminalstatusoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '投运', id: 0 },
|
||||
{ name: '检修', id: 1 },
|
||||
{ name: '停运', id: 2 }
|
||||
])
|
||||
const stateoption = ref([
|
||||
{ name: '全部', id: '' },
|
||||
{ name: '正常', id: 1 },
|
||||
{ name: '中断', id: 0 }
|
||||
])
|
||||
const treeData: any = ref([])
|
||||
const treeDataCopy: any = ref([])
|
||||
|
||||
const tableRef = ref()
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/maintain/getTerminalMainList',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
loadCallback: () => {
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
setTimeout(() => {
|
||||
tableRef.value.setAllTreeExpand(true)
|
||||
}, 0)
|
||||
searchEvent()
|
||||
}
|
||||
})
|
||||
tableStore.table.params.devType = ''
|
||||
tableStore.table.params.runFlag = ''
|
||||
tableStore.table.params.comFlag = ''
|
||||
tableStore.table.params.filterName = ''
|
||||
// 处理大数据卡顿
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = Math.random() * 1000
|
||||
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
getDevTypeList().then(res => {
|
||||
teriminaloption.value = res.data
|
||||
})
|
||||
|
||||
tableStore.index()
|
||||
})
|
||||
|
||||
// 终端状态管理
|
||||
const manage = (name: string, key: number) => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const selectRecords = $table
|
||||
.getCheckboxRecords()
|
||||
.filter((item: any) => item.level == 4)
|
||||
.map(item => item.id)
|
||||
console.log('🚀 ~ deviceData ~ selectRecords:', selectRecords)
|
||||
if (selectRecords.length == 0) {
|
||||
return ElMessage({
|
||||
message: '请至少选择一台装置',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
dispositionRef.value.open({
|
||||
title: name,
|
||||
id: selectRecords,
|
||||
key: key
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// 流量统计
|
||||
const liultjData = () => {}
|
||||
// 重启前置程序
|
||||
const resect = () => {}
|
||||
|
||||
// 终端详情
|
||||
const uesdealia = (row: any) => {
|
||||
detailRef.value.open(row)
|
||||
}
|
||||
// 流量详情
|
||||
const log = (row: any) => {
|
||||
logFlag.value = true
|
||||
setTimeout(() => {
|
||||
logRef.value.open(row)
|
||||
}, 100)
|
||||
}
|
||||
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy.value,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
treeData.value = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
treeData.value = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
</script>
|
||||
|
||||
@@ -3073,7 +3073,7 @@ const setDown = () => {
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
if (VITE_FLAG) {
|
||||
getYwZtSubstation({ orgId: '' }).then(res => {
|
||||
|
||||
@@ -1,341 +1,341 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 算法库 -->
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<algorithmTree ref="treeRef" :default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick" @onAddTree="onAddTree"></algorithmTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="boxTop">
|
||||
<div>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio-button v-for="(item, i) in dotList?.childrens" :label="item.name" :value="i" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="information">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="revise">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deletes">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="heightTab">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="dotList?.childrens[radio]?.children">
|
||||
<vxe-column field="name" title="算法名称"></vxe-column>
|
||||
<vxe-column field="createTime" title="创建时间"></vxe-column>
|
||||
|
||||
<vxe-column field="period" title="计算周期">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.period == 0
|
||||
? '日'
|
||||
: row.period == 1
|
||||
? '月'
|
||||
: row.period == 2
|
||||
? '季'
|
||||
: row.period == 3
|
||||
? '年'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="source" title="数据来源"></vxe-column>
|
||||
<!-- <vxe-column field="useFLag" title="是否启用">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.useFLag === 1 ? 'success' : 'info'" effect="dark"
|
||||
style="cursor: pointer" @click="change(row)">
|
||||
{{ row.useFLag === 1 ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
<vxe-column field="definition" title="定义">
|
||||
<template #default="{ row }">
|
||||
|
||||
<el-button type="primary" link @click="view(row)">查看</el-button>
|
||||
</template>
|
||||
|
||||
</vxe-column>
|
||||
<!-- <vxe-column title="操作" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="edit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="del(row)">删除</el-button>
|
||||
<el-popconfirm title="确定删除吗？" confirm-button-type='danger' @confirm="del(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
</vxe-table>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 树弹框 -->
|
||||
<addTree ref="addTreeRef" @getTree="treeRef.loadData(dotList.id)" />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit ref="popupEditRef" v-if="popupEditFlag"
|
||||
@getTree="treeRef.loadData(dotList.id), (popupEditFlag = false)" />
|
||||
<!-- 定义 -->
|
||||
<el-dialog draggable v-model="viewFlag" title="定义" width="60%">
|
||||
<div style="min-height: 300px; max-height: 55vh;">
|
||||
<div class="editor" ref="editorRef" v-html="summary" />
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 删除 -->
|
||||
<el-dialog draggable v-model="dialogVisible" title="请选择需要删除的数据" width="400">
|
||||
<el-tree-select v-model="TreeValue" :data="TreeData" filterable check-strictly :props="defaultProps"
|
||||
default-expand-all :render-after-expand="false" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="del">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import addTree from './components/addTree.vue'
|
||||
import PopupEdit from './components/form.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { deleteyById } from '@/api/supervision-boot/database/index'
|
||||
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import katex from "katex";
|
||||
import "katex/dist/katex.css";
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/algorithm'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const heightTab = mainHeight(82)
|
||||
const size = ref(0)
|
||||
const addTreeRef = ref()
|
||||
const editorRef = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const viewFlag = ref(false)
|
||||
const popupEditFlag = ref(false)
|
||||
const treeRef = ref()
|
||||
const summary = ref('')
|
||||
const popupEditRef = ref()
|
||||
const TreeData = ref([])
|
||||
const TreeValue = ref([])
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const dotList: any = ref()
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
// const tableStore = new TableStore({
|
||||
// url: '/supervision-boot/libalgorithm/queryAllAlgorithmLibrary',
|
||||
// method: 'GET',
|
||||
// column: [
|
||||
// { title: '算法名称', field: 'name' },
|
||||
// {
|
||||
// title: '定义',
|
||||
// field: 'name1'
|
||||
// },
|
||||
// {
|
||||
// title: '计算公式',
|
||||
// field: 'name2'
|
||||
// },
|
||||
// {
|
||||
// title: '计算周期',
|
||||
// field: 'name3'
|
||||
// },
|
||||
// {
|
||||
// title: '数据来源',
|
||||
// field: 'name4'
|
||||
// },
|
||||
// {
|
||||
// title: '是否启用',
|
||||
// field: 'name5',
|
||||
// render: 'tag',
|
||||
// effect: 'dark',
|
||||
// custom: {
|
||||
// 0: 'info',
|
||||
// 1: 'success'
|
||||
// },
|
||||
// replaceValue: {
|
||||
// 0: '否',
|
||||
// 1: '是'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// loadCallback: () => {}
|
||||
// })
|
||||
const radio = ref(0)
|
||||
|
||||
// 新增弹框
|
||||
const addUser = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '新增算法'
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
// 修改弹框
|
||||
const revise = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '修改算法',
|
||||
row: dotList.value
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
// tableStore.index()
|
||||
})
|
||||
|
||||
const view = (row: any) => {
|
||||
|
||||
viewFlag.value = true
|
||||
summary.value = row.definition
|
||||
setTimeout(() => {
|
||||
|
||||
const spans = document.querySelectorAll('span[data-value]');
|
||||
// 遍历每个 span 标签
|
||||
spans.forEach(function (span) {
|
||||
|
||||
let val = katex.renderToString(span.getAttribute('data-value'), {
|
||||
throwOnError: false,
|
||||
})
|
||||
// var newDiv = document.createElement('div');
|
||||
var newDiv = span
|
||||
newDiv.innerHTML = val;
|
||||
|
||||
span.parentNode.replaceChild(newDiv, span);
|
||||
});
|
||||
|
||||
}, 100)
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.pid != '0') {
|
||||
dotList.value = data
|
||||
radio.value = 0
|
||||
}
|
||||
}
|
||||
const onAddTree = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const deletes = () => {
|
||||
TreeValue.value = []
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
TreeData.value = res.data
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 删除
|
||||
const del = () => {
|
||||
if (TreeValue.value.length == 0) {
|
||||
return ElMessage.warning('请选择数据')
|
||||
}
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyById({ id: TreeValue.value }).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
dialogVisible.value = false
|
||||
treeRef.value.loadData()
|
||||
})
|
||||
})
|
||||
|
||||
// if (TreeValue.value.length > 0) {
|
||||
// ElMessage.warning('请选择数据')
|
||||
// return
|
||||
// }
|
||||
}
|
||||
// 启用
|
||||
const change = (row: any) => {
|
||||
console.log('🚀 ~ change ~ row:', row)
|
||||
ElMessageBox.confirm(`请确认是否${row.useFLag == 0 ? '启用' : '关闭'}算法?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateAlgorithmLibrary({ ...row, useFLag: row.useFLag == 0 ? 1 : 0 }).then(res => {
|
||||
ElMessage.success(row.useFLag == 0 ? '启用' : '关闭' + '成功')
|
||||
treeRef.value.loadData(dotList.value.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boxTop {
|
||||
height: 52px;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.editor {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 算法库 -->
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<algorithmTree ref="treeRef" :default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick" @onAddTree="onAddTree"></algorithmTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="boxTop">
|
||||
<div>
|
||||
<el-radio-group v-model="radio">
|
||||
<el-radio-button v-for="(item, i) in dotList?.childrens" :label="item.name" :value="i" />
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<div v-if="information">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser">
|
||||
新增
|
||||
</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="revise">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deletes">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div :style="heightTab">
|
||||
<vxe-table height="auto" v-bind="defaultAttribute" :data="dotList?.childrens[radio]?.children">
|
||||
<vxe-column field="name" title="算法名称"></vxe-column>
|
||||
<vxe-column field="createTime" title="创建时间"></vxe-column>
|
||||
|
||||
<vxe-column field="period" title="计算周期">
|
||||
<template #default="{ row }">
|
||||
{{
|
||||
row.period == 0
|
||||
? '日'
|
||||
: row.period == 1
|
||||
? '月'
|
||||
: row.period == 2
|
||||
? '季'
|
||||
: row.period == 3
|
||||
? '年'
|
||||
: ''
|
||||
}}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="source" title="数据来源"></vxe-column>
|
||||
<!-- <vxe-column field="useFLag" title="是否启用">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.useFLag === 1 ? 'success' : 'info'" effect="dark"
|
||||
style="cursor: pointer" @click="change(row)">
|
||||
{{ row.useFLag === 1 ? '是' : '否' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
<vxe-column field="definition" title="定义">
|
||||
<template #default="{ row }">
|
||||
|
||||
<el-button type="primary" link @click="view(row)">查看</el-button>
|
||||
</template>
|
||||
|
||||
</vxe-column>
|
||||
<!-- <vxe-column title="操作" width="150px">
|
||||
<template #default="{ row }">
|
||||
<el-button type="primary" link @click="edit(row)">修改</el-button>
|
||||
<el-button type="danger" link @click="del(row)">删除</el-button>
|
||||
<el-popconfirm title="确定删除吗？" confirm-button-type='danger' @confirm="del(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column> -->
|
||||
</vxe-table>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 树弹框 -->
|
||||
<addTree ref="addTreeRef" @getTree="treeRef.loadData(dotList.id)" />
|
||||
<!-- 弹框 -->
|
||||
<PopupEdit ref="popupEditRef" v-if="popupEditFlag"
|
||||
@getTree="treeRef.loadData(dotList.id), (popupEditFlag = false)" />
|
||||
<!-- 定义 -->
|
||||
<el-dialog draggable v-model="viewFlag" title="定义" width="60%">
|
||||
<div style="min-height: 300px; max-height: 55vh;">
|
||||
<div class="editor" ref="editorRef" v-html="summary" />
|
||||
|
||||
</div>
|
||||
</el-dialog>
|
||||
<!-- 删除 -->
|
||||
<el-dialog draggable v-model="dialogVisible" title="请选择需要删除的数据" width="400">
|
||||
<el-tree-select v-model="TreeValue" :data="TreeData" filterable check-strictly :props="defaultProps"
|
||||
default-expand-all :render-after-expand="false" />
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="del">删除</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import algorithmTree from '@/components/tree/pqs/algorithmTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import addTree from './components/addTree.vue'
|
||||
import PopupEdit from './components/form.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { deleteyById } from '@/api/supervision-boot/database/index'
|
||||
import { queryAllAlgorithmLibrary, updateAlgorithmLibrary } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import katex from "katex";
|
||||
import "katex/dist/katex.css";
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/algorithm'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const heightTab = mainHeight(82)
|
||||
const size = ref(0)
|
||||
const addTreeRef = ref()
|
||||
const editorRef = ref()
|
||||
const dialogVisible = ref(false)
|
||||
const viewFlag = ref(false)
|
||||
const popupEditFlag = ref(false)
|
||||
const treeRef = ref()
|
||||
const summary = ref('')
|
||||
const popupEditRef = ref()
|
||||
const TreeData = ref([])
|
||||
const TreeValue = ref([])
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
|
||||
const defaultProps = {
|
||||
label: 'name',
|
||||
value: 'id'
|
||||
}
|
||||
const dotList: any = ref()
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
// const tableStore = new TableStore({
|
||||
// url: '/supervision-boot/libalgorithm/queryAllAlgorithmLibrary',
|
||||
// method: 'GET',
|
||||
// column: [
|
||||
// { title: '算法名称', field: 'name' },
|
||||
// {
|
||||
// title: '定义',
|
||||
// field: 'name1'
|
||||
// },
|
||||
// {
|
||||
// title: '计算公式',
|
||||
// field: 'name2'
|
||||
// },
|
||||
// {
|
||||
// title: '计算周期',
|
||||
// field: 'name3'
|
||||
// },
|
||||
// {
|
||||
// title: '数据来源',
|
||||
// field: 'name4'
|
||||
// },
|
||||
// {
|
||||
// title: '是否启用',
|
||||
// field: 'name5',
|
||||
// render: 'tag',
|
||||
// effect: 'dark',
|
||||
// custom: {
|
||||
// 0: 'info',
|
||||
// 1: 'success'
|
||||
// },
|
||||
// replaceValue: {
|
||||
// 0: '否',
|
||||
// 1: '是'
|
||||
// }
|
||||
// }
|
||||
// ],
|
||||
// loadCallback: () => {}
|
||||
// })
|
||||
const radio = ref(0)
|
||||
|
||||
// 新增弹框
|
||||
const addUser = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '新增算法'
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
// 修改弹框
|
||||
const revise = () => {
|
||||
popupEditFlag.value = true
|
||||
setTimeout(() => {
|
||||
popupEditRef.value.open({
|
||||
title: '修改算法',
|
||||
row: dotList.value
|
||||
})
|
||||
}, 100)
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
// tableStore.index()
|
||||
})
|
||||
|
||||
const view = (row: any) => {
|
||||
|
||||
viewFlag.value = true
|
||||
summary.value = row.definition
|
||||
setTimeout(() => {
|
||||
|
||||
const spans = document.querySelectorAll('span[data-value]');
|
||||
// 遍历每个 span 标签
|
||||
spans.forEach(function (span) {
|
||||
|
||||
let val = katex.renderToString(span.getAttribute('data-value'), {
|
||||
throwOnError: false,
|
||||
})
|
||||
// var newDiv = document.createElement('div');
|
||||
var newDiv = span
|
||||
newDiv.innerHTML = val;
|
||||
|
||||
span.parentNode.replaceChild(newDiv, span);
|
||||
});
|
||||
|
||||
}, 100)
|
||||
|
||||
//
|
||||
}
|
||||
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
if (data.pid != '0') {
|
||||
dotList.value = data
|
||||
radio.value = 0
|
||||
}
|
||||
}
|
||||
const onAddTree = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const deletes = () => {
|
||||
TreeValue.value = []
|
||||
queryAllAlgorithmLibrary().then(res => {
|
||||
TreeData.value = res.data
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
// 删除
|
||||
const del = () => {
|
||||
if (TreeValue.value.length == 0) {
|
||||
return ElMessage.warning('请选择数据')
|
||||
}
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyById({ id: TreeValue.value }).then(res => {
|
||||
ElMessage.success('删除成功')
|
||||
dialogVisible.value = false
|
||||
treeRef.value.loadData()
|
||||
})
|
||||
})
|
||||
|
||||
// if (TreeValue.value.length > 0) {
|
||||
// ElMessage.warning('请选择数据')
|
||||
// return
|
||||
// }
|
||||
}
|
||||
// 启用
|
||||
const change = (row: any) => {
|
||||
console.log('🚀 ~ change ~ row:', row)
|
||||
ElMessageBox.confirm(`请确认是否${row.useFLag == 0 ? '启用' : '关闭'}算法?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
updateAlgorithmLibrary({ ...row, useFLag: row.useFLag == 0 ? 1 : 0 }).then(res => {
|
||||
ElMessage.success(row.useFLag == 0 ? '启用' : '关闭' + '成功')
|
||||
treeRef.value.loadData(dotList.value.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.boxTop {
|
||||
height: 52px;
|
||||
padding: 10px 10px 10px 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.editor {
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border: 1px solid black;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
th {
|
||||
background-color: #f2f2f2;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
td {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div >
|
||||
<TableHeader ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
@@ -26,6 +26,7 @@ const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
showPage: true, // 确保启用分页
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{
|
||||
title: '典型设备',
|
||||
|
||||
@@ -1,15 +1,19 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div>
|
||||
<TableHeader>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable
|
||||
placeholder="请输入搜索名称" maxlength="32" show-word-limit/>
|
||||
<el-input
|
||||
v-model="tableStore.table.params.searchValue"
|
||||
clearable
|
||||
placeholder="请输入搜索名称"
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" isGroup/>
|
||||
<Table ref="tableRef" isGroup />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="tsx">
|
||||
@@ -23,7 +27,8 @@ const tableRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/libModel/pageLibModelQuery',
|
||||
method: 'POST',
|
||||
column: [
|
||||
publicHeight: 60,
|
||||
column: [
|
||||
{
|
||||
title: '谐波源',
|
||||
children: [
|
||||
@@ -32,12 +37,14 @@ const tableStore = new TableStore({
|
||||
title: '序号',
|
||||
width: '80',
|
||||
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: 'name', title: '名称',minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级',minWidth: 200 },
|
||||
{ field: 'capacity', title: '容量',minWidth: 200 }
|
||||
{ field: 'name', title: '名称', minWidth: 200 },
|
||||
{ field: 'voltage', title: '电压等级', minWidth: 200 },
|
||||
{ field: 'capacity', title: '容量', minWidth: 200 }
|
||||
]
|
||||
},
|
||||
{
|
||||
@@ -50,13 +57,13 @@ const tableStore = new TableStore({
|
||||
}))
|
||||
}
|
||||
],
|
||||
// 在请求发送前处理参数
|
||||
// 在请求发送前处理参数
|
||||
beforeSearchFun: () => {
|
||||
tableStore.table.params.pageSize = 100
|
||||
tableStore.table.params.pageSize = 100
|
||||
},
|
||||
resetCallback: () => {
|
||||
resetCallback: () => {
|
||||
tableStore.table.params.searchValue = ''
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.type = 1
|
||||
@@ -70,5 +77,4 @@ const queryData = () => {
|
||||
defineExpose({
|
||||
queryData
|
||||
})
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,212 +1,212 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 标准库 -->
|
||||
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<standardTree ref="treeRef"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick"></standardTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="pd10" style="display: flex; justify-content: end">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="editUser" v-if="information">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven"
|
||||
v-if="information">删除</el-button>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download" v-if="flag">下载</el-button>
|
||||
</div>
|
||||
<el-empty v-if="url.length == 0" description="暂无数据" class="custom-empty"
|
||||
:style="`height: calc(${height.height} - 60px);`" />
|
||||
<div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
|
||||
<vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
|
||||
<vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
|
||||
:options="excelOptions" />
|
||||
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url"/> -->
|
||||
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
|
||||
<img v-if="
|
||||
url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')
|
||||
" :src="url" />
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 新增 -->
|
||||
|
||||
<addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import standardTree from '@/components/tree/pqs/standardTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import addTree from './components/addTree.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
||||
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
import { deleteyLibstandard } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/standard'
|
||||
})
|
||||
const excelOptions = ref({})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const treeRef = ref()
|
||||
const addTreeRef = ref()
|
||||
const url = ref('')
|
||||
const dotList: any = ref({})
|
||||
const flag: any = ref(false)
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
console.log("🚀 ~ handleNodeClick ~ data:", data)
|
||||
dotList.value = data
|
||||
url.value = ''
|
||||
flag.value = false
|
||||
if (data?.url != null && data?.url != '') {
|
||||
flag.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
url.value = `/api-docx/excelreport` + data.url
|
||||
excelOptions.value = { xls: data.url.split('.')[1] == 'xls' ? true : false }
|
||||
// getFileNameAndFilePath({ filePath: data.url }).then(res => {
|
||||
// url.value = res.data.url
|
||||
// })
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const deleteEven = () => {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyLibstandard({ id: dotList.value.id }).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
})
|
||||
setTimeout(() => {
|
||||
treeRef.value.loadData()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
}
|
||||
const addUser = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const editUser = () => {
|
||||
addTreeRef.value.open('修改', dotList.value)
|
||||
}
|
||||
// 下载
|
||||
const download = () => {
|
||||
let url = dotList.value.url
|
||||
let urls = url
|
||||
let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
|
||||
downloadFile({ filePath: url }).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: urls.includes('.pdf')
|
||||
? 'application/pdf'
|
||||
: urls.includes('.docx')
|
||||
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
: urls.includes('.xls')
|
||||
? 'application/vnd.ms-excel'
|
||||
: urls.includes('.xlsx')
|
||||
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
: urls.includes('.png')
|
||||
? 'image/png'
|
||||
: urls.includes('.jpeg')
|
||||
? 'image/jpeg'
|
||||
: urls.includes('.jpg')
|
||||
? 'image/jpg'
|
||||
: ''
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = name
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divBox {
|
||||
width: 250px;
|
||||
height: 31px;
|
||||
margin: auto;
|
||||
line-height: 32px;
|
||||
border: 1px solid #c9c9c9;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #002255;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
// margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 自定义 el-empty 的样式 */
|
||||
:deep(.custom-empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
/* 调整高度 */
|
||||
padding: 20px;
|
||||
|
||||
/* 调整内边距 */
|
||||
.el-empty__image {
|
||||
display: none;
|
||||
/* 隐藏默认图片 */
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 14px;
|
||||
/* 调整字体大小 */
|
||||
color: var(--vxe-font-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<!-- 标准库 -->
|
||||
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<standardTree ref="treeRef"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId" @node-click="handleNodeClick"
|
||||
@init="handleNodeClick"></standardTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<div class="pd10" style="display: flex; justify-content: end">
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addUser" v-if="information">新增</el-button>
|
||||
<el-button icon="el-icon-Edit" type="primary" @click="editUser" v-if="information">修改</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven"
|
||||
v-if="information">删除</el-button>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="download" v-if="flag">下载</el-button>
|
||||
</div>
|
||||
<el-empty v-if="url.length == 0" description="暂无数据" class="custom-empty"
|
||||
:style="`height: calc(${height.height} - 60px);`" />
|
||||
<div :style="`height: calc(${height.height} - 60px);overflow: auto;`" v-else>
|
||||
<vue-office-docx v-if="url.includes('.doc') || url.includes('.docx')" :src="url" />
|
||||
<vue-office-excel v-if="url.includes('.xls') || url.includes('.xlsx')" :src="url"
|
||||
:options="excelOptions" />
|
||||
<!-- <vue-office-pdf v-if="url.includes('.pdf')" :src="url"/> -->
|
||||
<iframe v-if="url.includes('.pdf')" :src="url" style="width: 100%; height: 99%"></iframe>
|
||||
<img v-if="
|
||||
url.includes('.png') || url.includes('.jpg') || url.includes('.gif') || url.includes('.bmp')
|
||||
" :src="url" />
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
<!-- 新增 -->
|
||||
|
||||
<addTree ref="addTreeRef" @onSubmit="treeRef.loadData(dotList.id)"></addTree>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import standardTree from '@/components/tree/pqs/standardTree.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import addTree from './components/addTree.vue'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { getFileNameAndFilePath, downloadFile } from '@/api/system-boot/file'
|
||||
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
import { deleteyLibstandard } from '@/api/supervision-boot/database/index'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'database/standard'
|
||||
})
|
||||
const excelOptions = ref({})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const treeRef = ref()
|
||||
const addTreeRef = ref()
|
||||
const url = ref('')
|
||||
const dotList: any = ref({})
|
||||
const flag: any = ref(false)
|
||||
const information = adminInfo.roleCode.includes('information_info')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
console.log("🚀 ~ handleNodeClick ~ data:", data)
|
||||
dotList.value = data
|
||||
url.value = ''
|
||||
flag.value = false
|
||||
if (data?.url != null && data?.url != '') {
|
||||
flag.value = true
|
||||
|
||||
setTimeout(() => {
|
||||
url.value = `/api-docx/excelreport` + data.url
|
||||
excelOptions.value = { xls: data.url.split('.')[1] == 'xls' ? true : false }
|
||||
// getFileNameAndFilePath({ filePath: data.url }).then(res => {
|
||||
// url.value = res.data.url
|
||||
// })
|
||||
}, 100)
|
||||
}
|
||||
}
|
||||
// 删除
|
||||
const deleteEven = () => {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
deleteyLibstandard({ id: dotList.value.id }).then(() => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功！'
|
||||
})
|
||||
setTimeout(() => {
|
||||
treeRef.value.loadData()
|
||||
}, 100)
|
||||
})
|
||||
})
|
||||
}
|
||||
const addUser = () => {
|
||||
addTreeRef.value.open('新增')
|
||||
}
|
||||
const editUser = () => {
|
||||
addTreeRef.value.open('修改', dotList.value)
|
||||
}
|
||||
// 下载
|
||||
const download = () => {
|
||||
let url = dotList.value.url
|
||||
let urls = url
|
||||
let name = url.match(/\/([^/]+)\.(\w+)$/)[1]
|
||||
downloadFile({ filePath: url }).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: urls.includes('.pdf')
|
||||
? 'application/pdf'
|
||||
: urls.includes('.docx')
|
||||
? 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||
: urls.includes('.xls')
|
||||
? 'application/vnd.ms-excel'
|
||||
: urls.includes('.xlsx')
|
||||
? 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||
: urls.includes('.png')
|
||||
? 'image/png'
|
||||
: urls.includes('.jpeg')
|
||||
? 'image/jpeg'
|
||||
: urls.includes('.jpg')
|
||||
? 'image/jpg'
|
||||
: ''
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a')
|
||||
link.href = url
|
||||
link.download = name
|
||||
document.body.appendChild(link)
|
||||
link.click()
|
||||
link.remove()
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.divBox {
|
||||
width: 250px;
|
||||
height: 31px;
|
||||
margin: auto;
|
||||
line-height: 32px;
|
||||
border: 1px solid #c9c9c9;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #002255;
|
||||
}
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
// margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* 自定义 el-empty 的样式 */
|
||||
:deep(.custom-empty) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
/* 调整高度 */
|
||||
padding: 20px;
|
||||
|
||||
/* 调整内边距 */
|
||||
.el-empty__image {
|
||||
display: none;
|
||||
/* 隐藏默认图片 */
|
||||
}
|
||||
|
||||
.el-empty__description {
|
||||
font-size: 14px;
|
||||
/* 调整字体大小 */
|
||||
color: var(--vxe-font-color);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,282 +1,282 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Download" type="primary" @click="download">下载波形</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" :checkboxConfig="checkboxConfig" />
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { Download } from '@element-plus/icons-vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { VxeTablePropTypes } from 'vxe-table'
|
||||
import { downloadWaveFile } from '@/api/event-boot/transient'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/area/TransientEventList'
|
||||
})
|
||||
const pageHeight = mainHeight(20)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
const eventList = dictData.getBasicData('Event_Statis')
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const waveFormRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/transient/getTransientValue',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '暂降发生时刻', minWidth: '180' },
|
||||
{ field: 'lineName', title: '监测点名称', minWidth: '180' },
|
||||
{ field: 'gdName', title: '供电公司', minWidth: '120' },
|
||||
{ field: 'subName', title: '变电站', minWidth: '150' },
|
||||
{ field: 'ip', title: '网络参数', minWidth: '110' },
|
||||
{ field: 'scale', title: '电压等级', minWidth: '110' },
|
||||
// {
|
||||
// field: 'advanceType',
|
||||
// title: '暂降类型',
|
||||
// minWidth: '90',
|
||||
// formatter: (row: any) => {
|
||||
// return row.cellValue || '其他'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'advanceReason',
|
||||
title: '暂降原因',
|
||||
minWidth: '90',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue || '其他'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'eventType',
|
||||
title: '暂态统计类型',
|
||||
minWidth: '120',
|
||||
formatter: (row: any) => {
|
||||
return eventList.filter(item => item.id === row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
// {
|
||||
// field: 'severity', title: '严重度', minWidth: "80", formatter: (row: any) => {
|
||||
// return row.cellValue.toFixed(2)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降幅值(%)',
|
||||
minWidth: '110',
|
||||
formatter: (row: any) => {
|
||||
return (row.cellValue * 100).toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'eventDescribe',
|
||||
title: '暂降深度(%)',
|
||||
minWidth: '110',
|
||||
formatter: (row: any) => {
|
||||
let data: any = (100 - row.row.featureAmplitude * 100).toFixed(2)
|
||||
|
||||
return data >= 0 ? data : '/'
|
||||
}
|
||||
},
|
||||
{ field: 'duration', title: '持续时间(s)', minWidth: '100' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
}, 100)
|
||||
// row.loading = true
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// view2.value = true
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag != 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.statFlag = true
|
||||
tableStore.table.params.isType = 0
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
|
||||
checkMethod: ({ row }) => {
|
||||
return row.fileFlag === 1
|
||||
}
|
||||
})
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
}
|
||||
// 下载波形
|
||||
const download = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择数据')
|
||||
return
|
||||
}
|
||||
downloadWaveFile({
|
||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
||||
}).then((res: any) => {
|
||||
if (res.type == 'application/json') {
|
||||
ElMessage.warning('暂无可下载的波形文件!')
|
||||
return
|
||||
}
|
||||
ElMessage.info('下载中......')
|
||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '波形分析下载' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link) //释放标签
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker area showExport>
|
||||
<template #select>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.statisticalType"
|
||||
value-key="id"
|
||||
placeholder="请选择统计类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in classificationData"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.scale"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择电压等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in voltageleveloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择终端厂家"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.loadType"
|
||||
multiple
|
||||
collapse-tags
|
||||
clearable
|
||||
value-key="id"
|
||||
placeholder="请选择干扰源类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in interfereoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Download" type="primary" @click="download">下载波形</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" :checkboxConfig="checkboxConfig" />
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import { Download } from '@element-plus/icons-vue'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { ElMessageBox, ElMessage } from 'element-plus'
|
||||
import { VxeTablePropTypes } from 'vxe-table'
|
||||
import { downloadWaveFile } from '@/api/event-boot/transient'
|
||||
const dictData = useDictData()
|
||||
defineOptions({
|
||||
name: 'harmonic-boot/area/TransientEventList'
|
||||
})
|
||||
const pageHeight = mainHeight(20)
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
const eventList = dictData.getBasicData('Event_Statis')
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const waveFormRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/event-boot/transient/getTransientValue',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ width: '60', type: 'checkbox' },
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '60',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '暂降发生时刻', minWidth: '180' },
|
||||
{ field: 'lineName', title: '监测点名称', minWidth: '180' },
|
||||
{ field: 'gdName', title: '供电公司', minWidth: '120' },
|
||||
{ field: 'subName', title: '变电站', minWidth: '150' },
|
||||
{ field: 'ip', title: '网络参数', minWidth: '110' },
|
||||
{ field: 'scale', title: '电压等级', minWidth: '110' },
|
||||
// {
|
||||
// field: 'advanceType',
|
||||
// title: '暂降类型',
|
||||
// minWidth: '90',
|
||||
// formatter: (row: any) => {
|
||||
// return row.cellValue || '其他'
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'advanceReason',
|
||||
title: '暂降原因',
|
||||
minWidth: '90',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue || '其他'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'eventType',
|
||||
title: '暂态统计类型',
|
||||
minWidth: '120',
|
||||
formatter: (row: any) => {
|
||||
return eventList.filter(item => item.id === row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
// {
|
||||
// field: 'severity', title: '严重度', minWidth: "80", formatter: (row: any) => {
|
||||
// return row.cellValue.toFixed(2)
|
||||
// }
|
||||
// },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降幅值(%)',
|
||||
minWidth: '110',
|
||||
formatter: (row: any) => {
|
||||
return (row.cellValue * 100).toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'eventDescribe',
|
||||
title: '暂降深度(%)',
|
||||
minWidth: '110',
|
||||
formatter: (row: any) => {
|
||||
let data: any = (100 - row.row.featureAmplitude * 100).toFixed(2)
|
||||
|
||||
return data >= 0 ? data : '/'
|
||||
}
|
||||
},
|
||||
{ field: 'duration', title: '持续时间(s)', minWidth: '100' },
|
||||
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
}, 100)
|
||||
// row.loading = true
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// view2.value = true
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag != 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => {}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.scale = []
|
||||
tableStore.table.params.manufacturer = []
|
||||
tableStore.table.params.loadType = []
|
||||
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.statFlag = true
|
||||
tableStore.table.params.isType = 0
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
|
||||
checkMethod: ({ row }) => {
|
||||
return row.fileFlag === 1
|
||||
}
|
||||
})
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
}
|
||||
// 下载波形
|
||||
const download = () => {
|
||||
if (!tableStore.table.selection.length) {
|
||||
ElMessage.warning('请选择数据')
|
||||
return
|
||||
}
|
||||
downloadWaveFile({
|
||||
lineId: tableStore.table.selection.map((item: any) => item.eventId)
|
||||
}).then((res: any) => {
|
||||
if (res.type == 'application/json') {
|
||||
ElMessage.warning('暂无可下载的波形文件!')
|
||||
return
|
||||
}
|
||||
ElMessage.info('下载中......')
|
||||
let blob = new Blob([res], { type: 'application/zip' }) // console.log(blob) // var href = window.URL.createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '波形分析下载' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link) //释放标签
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -571,7 +571,7 @@ const group = (chart: any, myChartDom: any) => {
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
userDataList({
|
||||
pageNum: 1,
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<el-option label="非电网侧" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入变电站/终端/监测点"
|
||||
@@ -63,21 +63,21 @@
|
||||
<vxe-column field="gdName" title="供电公司" align="center" min-width="120" ></vxe-column>
|
||||
<vxe-column field="subStationName" :show-overflow="true" title="变电站" align="center" min-width="150"></vxe-column>
|
||||
<vxe-column field="devName" title="终端名称" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="devType" title="终端型号" align="center" min-width="150"></vxe-column>
|
||||
<vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column>
|
||||
<!-- <vxe-column field="devType" title="终端型号" align="center" min-width="150"></vxe-column> -->
|
||||
<!-- <vxe-column field="loginTime" title="投运时间" align="center" min-width="120"></vxe-column> -->
|
||||
<vxe-column field="lineName" title="监测点名称" align="center" min-width="150" :formatter="formatMonitorId"></vxe-column>
|
||||
<vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="objName" title="监测对象名称" align="center" min-width="150" :formatter="formatMonitorId"></vxe-column>
|
||||
<vxe-column field="interval" title="统计间隔" align="center" min-width="100" :formatter="formatMonitorId"></vxe-column>
|
||||
<vxe-column field="onlineRate" title="在线率(%)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="integrity" title="完整率(%)" align="center" min-width="100"></vxe-column>
|
||||
<!-- <vxe-column field="powerFlag" title="监测位置" align="center" min-width="100"></vxe-column> -->
|
||||
<!-- <vxe-column field="lineVoltage" title="监测点电压等级" align="center" min-width="120"></vxe-column> -->
|
||||
<!-- <vxe-column field="loadType" title="干扰源类型" align="center" min-width="120"></vxe-column> -->
|
||||
<!-- <vxe-column field="objName" title="监测对象名称" align="center" min-width="150" :formatter="formatMonitorId"></vxe-column> -->
|
||||
<!-- <vxe-column field="interval" title="统计间隔" align="center" min-width="100" :formatter="formatMonitorId"></vxe-column> -->
|
||||
<!-- <vxe-column field="onlineRate" title="在线率(%)" align="center" min-width="100"></vxe-column> -->
|
||||
<!-- <vxe-column field="integrity" title="完整率(%)" align="center" min-width="100"></vxe-column> -->
|
||||
<vxe-column field="harmonicValue" :title="harmonicValueTitle" align="center" min-width="120"></vxe-column>
|
||||
<vxe-column field="upCounts" title="暂升次数(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="downCounts" title="电压暂降(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column>
|
||||
<vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column>
|
||||
<!-- <vxe-column field="upCounts" title="暂升次数(次)" align="center" min-width="100"></vxe-column> -->
|
||||
<!-- <vxe-column field="downCounts" title="电压暂降(次)" align="center" min-width="100"></vxe-column> -->
|
||||
<!-- <vxe-column field="breakCounts" title="短时中断(次)" align="center" min-width="100"></vxe-column> -->
|
||||
<!-- <vxe-column field="monitorId" title="一类监测点" align="center" min-width="120" :formatter="formatMonitorId"></vxe-column> -->
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<el-option label="非电网侧" value="2"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入变电站"
|
||||
@@ -86,9 +86,10 @@
|
||||
</div>
|
||||
|
||||
<!-- 添加弹窗 -->
|
||||
<el-dialog
|
||||
<el-dialog draggable
|
||||
v-model="detailDialogVisible"
|
||||
:title="detailDialogTitle"
|
||||
width="1000px"
|
||||
|
||||
>
|
||||
<div v-loading="detailLoading">
|
||||
@@ -99,6 +100,7 @@
|
||||
ref="detailTableRef"
|
||||
:data="detailData"
|
||||
auto-resize
|
||||
v-bind="defaultAttribute"
|
||||
resizable
|
||||
show-overflow
|
||||
height="400px"
|
||||
@@ -123,6 +125,7 @@
|
||||
|
||||
import { ref, onMounted, provide, onBeforeUnmount, computed, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
|
||||
@@ -109,7 +109,7 @@ const tableStore = new TableStore({
|
||||
{ field: 'name', title: '电网拓扑', minWidth: '150' },
|
||||
{
|
||||
field: 'onlineMonitorNumber',
|
||||
title: '在线监测点数量(个)',
|
||||
title: '在运监测点数(个)',
|
||||
minWidth: '100px',
|
||||
formatter: (row: any) => {
|
||||
return row.cellValue == -1 ? '/' : row.cellValue
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input
|
||||
v-model="tableStore.table.params.filterName"
|
||||
@keyup="searchEvent"
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输入监测点名称" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
<span class="divBox_title">低于90%监测点数</span>
|
||||
<span
|
||||
class="divBox_num text-style"
|
||||
style="color: #ff6600"
|
||||
style="color: #57bc6e"
|
||||
@click="totalTable(90, '低于90%监测点_')"
|
||||
>
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
@@ -115,7 +115,7 @@
|
||||
</span>
|
||||
<!-- 低于90%监测点数 -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
style="flex: 1; color: #388e3c"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 90, o.citName + '_低于90%监测点_')"
|
||||
>
|
||||
@@ -160,13 +160,13 @@
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="所在地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="cit" title="所在地市" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px" ></vxe-column>
|
||||
<vxe-column field="lineName" title="监测点名称" :formatter="formatter" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="90px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
@@ -267,7 +267,13 @@ const tableStore = new TableStore({
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
}
|
||||
})
|
||||
// 合并子集数据 并去重
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data.citDetailList
|
||||
@@ -413,7 +419,8 @@ const echart = () => {
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
|
||||
@@ -1,216 +1,216 @@
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" multiple collapse-tags clearable value-key="id"
|
||||
placeholder="请选择电压等级">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" multiple collapse-tags clearable
|
||||
value-key="id" placeholder="请选择终端厂家">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" multiple collapse-tags clearable value-key="id"
|
||||
placeholder="请选择干扰源类型">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }" :key="num" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { debounce } from 'lodash-es'
|
||||
import XEUtils from 'xe-utils'
|
||||
const dictData = useDictData()
|
||||
const tableRef = ref()
|
||||
const num = ref(0)
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
const treeDataCopy: any = ref([])
|
||||
const treeData: any = ref([])
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
publicHeight: 65,
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ field: 'name', title: '电网拓扑', width: 350, align: 'left', treeNode: true },
|
||||
{
|
||||
field: 'ip',
|
||||
title: '网络参数',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.ip || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'dataName',
|
||||
title: '终端名称',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.dataName || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'manufacturer',
|
||||
title: '厂家',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.manufacturer || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'comFlag',
|
||||
title: '通讯状态',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
3: 'info'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '中断',
|
||||
1: '正常',
|
||||
3: '/'
|
||||
}
|
||||
// formatter: ({ row }: any) => {
|
||||
// return row.comFlag || '/'
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '最新数据时间',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.updateTime || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'onlineRate',
|
||||
title: '在线率(%)',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'assess',
|
||||
title: '评估',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'info',
|
||||
1: 'danger',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '暂无数据',
|
||||
1: '不合格',
|
||||
2: '合格',
|
||||
3: '优秀'
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
tableStore.table.data = treeData.value
|
||||
tableStore.table.params.filterName=''
|
||||
searchEvent()
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = (Math.random() * 1000)
|
||||
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy.value,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
console.log("🚀 ~ searchEvent ~ rest:", rest)
|
||||
|
||||
tableStore.table.data = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
tableStore.table.data = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value.getRef()
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
<template>
|
||||
<TableHeader area datePicker ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.filterName" @keyup="searchEvent" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select v-model="tableStore.table.params.statisticalType" value-key="id" placeholder="请选择统计类型">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="tableStore.table.params.scale" multiple collapse-tags clearable value-key="id"
|
||||
placeholder="请选择电压等级">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" multiple collapse-tags clearable
|
||||
value-key="id" placeholder="请选择终端厂家">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="tableStore.table.params.loadType" multiple collapse-tags clearable value-key="id"
|
||||
placeholder="请选择干扰源类型">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name"
|
||||
:value="item"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" :tree-config="{ transform: true, parentField: 'uPid', rowField: 'uId' }"
|
||||
:scroll-y="{ enabled: true }" :key="num" />
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { debounce } from 'lodash-es'
|
||||
import XEUtils from 'xe-utils'
|
||||
const dictData = useDictData()
|
||||
const tableRef = ref()
|
||||
const num = ref(0)
|
||||
|
||||
const classificationData = dictData.getBasicData('Statistical_Type', ['Report_Type'])
|
||||
const voltageleveloption = dictData.getBasicData('Dev_Voltage_Stand')
|
||||
const terminaloption = dictData.getBasicData('Dev_Manufacturers')
|
||||
const interfereoption = dictData.getBasicData('Interference_Source')
|
||||
const treeDataCopy: any = ref([])
|
||||
const treeData: any = ref([])
|
||||
const TableHeaderRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/terminalOnlineRateData/getOnlineRateData',
|
||||
publicHeight: 65,
|
||||
showPage: false,
|
||||
method: 'POST',
|
||||
column: [
|
||||
{ field: 'name', title: '电网拓扑', width: 350, align: 'left', treeNode: true },
|
||||
{
|
||||
field: 'ip',
|
||||
title: '网络参数',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.ip || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'dataName',
|
||||
title: '终端名称',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.dataName || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'manufacturer',
|
||||
title: '厂家',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.manufacturer || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'comFlag',
|
||||
title: '通讯状态',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'danger',
|
||||
1: 'success',
|
||||
3: 'info'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '中断',
|
||||
1: '正常',
|
||||
3: '/'
|
||||
}
|
||||
// formatter: ({ row }: any) => {
|
||||
// return row.comFlag || '/'
|
||||
// }
|
||||
},
|
||||
{
|
||||
field: 'updateTime',
|
||||
title: '最新数据时间',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.updateTime || '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'onlineRate',
|
||||
title: '在线率(%)',
|
||||
formatter: ({ row }: any) => {
|
||||
return row.onlineRate == 3.14159 ? '暂无数据' : row.onlineRate.toFixed(2)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'assess',
|
||||
title: '评估',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'info',
|
||||
1: 'danger',
|
||||
2: 'warning',
|
||||
3: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '暂无数据',
|
||||
1: '不合格',
|
||||
2: '合格',
|
||||
3: '优秀'
|
||||
}
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
tableStore.options.column[0].title = tableStore.table.params.statisticalType.name
|
||||
},
|
||||
|
||||
loadCallback: () => {
|
||||
|
||||
setTimeout(() => {
|
||||
tableRef.value.getRef().setAllTreeExpand(true)
|
||||
}, 1000)
|
||||
|
||||
treeData.value = tree2List(tableStore.table.data, Math.random() * 1000)
|
||||
treeDataCopy.value = JSON.parse(JSON.stringify(treeData.value))
|
||||
tableStore.table.data = treeData.value
|
||||
tableStore.table.params.filterName=''
|
||||
searchEvent()
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
tableStore.table.params.statisticalType = classificationData.filter(item => item.name == '电网拓扑')[0]
|
||||
tableStore.table.params.monitorFlag = 2
|
||||
tableStore.table.params.powerFlag = 2
|
||||
tableStore.table.params.serverName = 'harmonicBoot'
|
||||
provide('tableStore', tableStore)
|
||||
const tree2List = (list: any, id: any) => {
|
||||
//存储结果的数组
|
||||
let arr: any = []
|
||||
// 遍历 tree 数组
|
||||
list.forEach((item: any) => {
|
||||
item.uPid = id
|
||||
item.uId = (Math.random() * 1000)
|
||||
item.comFlag = item.comFlag == null ? 3 : item.comFlag
|
||||
item.assess = item.onlineRate == 3.14159 ? 0 : item.onlineRate < 60 ? 1 : item.onlineRate < 90 ? 2 : 3
|
||||
// 判断item是否存在children
|
||||
if (!item.children) return arr.push(item)
|
||||
// 函数递归，对children数组进行tree2List的转换
|
||||
const children = tree2List(item.children, item.uId)
|
||||
// 删除item的children属性
|
||||
delete item.children
|
||||
// 把item和children数组添加至结果数组
|
||||
//..children: 意思是把children数组展开
|
||||
arr.push(item, ...children)
|
||||
})
|
||||
// 返回结果数组
|
||||
return arr
|
||||
}
|
||||
// 表格过滤
|
||||
const searchEvent = debounce(() => {
|
||||
const filterVal = XEUtils.toValueString(tableStore.table.params.filterName).trim().toLowerCase()
|
||||
|
||||
if (filterVal) {
|
||||
const options = { children: 'children' }
|
||||
const searchProps = ['name']
|
||||
|
||||
const rest = XEUtils.searchTree(
|
||||
treeDataCopy.value,
|
||||
(item: any) => searchProps.some(key => String(item[key]).toLowerCase().indexOf(filterVal) > -1),
|
||||
options
|
||||
)
|
||||
console.log("🚀 ~ searchEvent ~ rest:", rest)
|
||||
|
||||
tableStore.table.data = rest
|
||||
|
||||
// 搜索之后默认展开所有子节点
|
||||
} else {
|
||||
tableStore.table.data = treeDataCopy.value
|
||||
}
|
||||
nextTick(() => {
|
||||
const $table = tableRef.value.getRef()
|
||||
if ($table) {
|
||||
$table.setAllTreeExpand(true)
|
||||
}
|
||||
})
|
||||
}, 500)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -12,8 +12,8 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入终端名称" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
<span class="divBox_title">低于90%终端数</span>
|
||||
<span
|
||||
class="divBox_num text-style"
|
||||
style="color: #ff6600"
|
||||
style="color: #57bc6e"
|
||||
@click="totalTable(90, '低于90%终端_')"
|
||||
>
|
||||
{{ monitoringPoints.abnormalNum }}
|
||||
@@ -115,7 +115,7 @@
|
||||
</span>
|
||||
<!-- 低于90%终端数 -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
style="flex: 1; color: #388e3c"
|
||||
class="text text-style"
|
||||
@click="renderTable(o.detailList, 90, o.citName + '_低于90%终端_')"
|
||||
>
|
||||
@@ -161,10 +161,10 @@
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="所在地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="subStation" title="变电站" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="deviceName" title="终端名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="90px">
|
||||
<template #default="{ row }">
|
||||
@@ -267,9 +267,15 @@ const tableStore = new TableStore({
|
||||
monitoringPoints.value.runNum = tableStore.table.data.totalNum
|
||||
monitoringPoints.value.abnormalNum = tableStore.table.data.belowNum
|
||||
monitoringPoints.value.totalOnlineRate = tableStore.table.data.totalOnlineRate - 0
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter(
|
||||
(k: any) => k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
)
|
||||
abnormal.value = tableStore.table.data.citDetailList.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.citTotalNum != 0
|
||||
} else {
|
||||
return k.citName != '上送国网' && k.citName != '非上送国网'
|
||||
}
|
||||
})
|
||||
console.log(123, tableStore.table.params.statisticalType.name)
|
||||
|
||||
// 合并子集数据 并去重
|
||||
totalData.value = Array.from(
|
||||
tableStore.table.data.citDetailList
|
||||
@@ -417,7 +423,8 @@ const echart = () => {
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
@@ -478,7 +485,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -90,7 +90,7 @@ const activeName = ref('2')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
|
||||
@@ -109,7 +109,7 @@ provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||
|
||||
@@ -129,7 +129,7 @@ provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
getTemplateByDept({ id: dictData.state.area[0].id })
|
||||
|
||||
@@ -1,152 +1,152 @@
|
||||
<template>
|
||||
<div class='default-main' :style='height'>
|
||||
<splitpanes style='height: 100%' class='default-theme' id='navigation-splitpanes'>
|
||||
<pane :size='size'>
|
||||
<PointTree :default-expand-all='false' @node-click='handleNodeClick' @init='handleNodeClick'>
|
||||
</PointTree>
|
||||
</pane>
|
||||
<pane style='background: #fff' :style='height'>
|
||||
<TableHeader ref='TableHeaderRef' datePicker :show-search='false'>
|
||||
<template v-slot:select>
|
||||
<el-form-item label='客户名称'>
|
||||
<el-input v-model='tableStore.table.params.crmName' maxlength='32' show-word-limit clearable
|
||||
placeholder='请输入客户名称' />
|
||||
</el-form-item>
|
||||
<el-form-item label='报表编号'>
|
||||
<el-input v-model='tableStore.table.params.reportNumber' clearable
|
||||
placeholder='请输入报表编号' maxlength='12' show-word-limit />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-upload :show-file-list='false' ref='uploadRef' action='' accept='.png,.jpg'
|
||||
:on-change='choose' :auto-upload='false'>
|
||||
<template #trigger>
|
||||
<el-button icon='el-icon-Upload' type='primary' class='mr10 ml10'>上传接线图</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-button icon='el-icon-Download' type='primary' @click='exportEvent'>生成</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class='box'>
|
||||
<div id='luckysheet'>
|
||||
<img width='100%' :style='`height: calc(${tableStore.table.height} + 40px)`'
|
||||
src='@/assets/img/jss.png' />
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { exportModel } from '@/api/process-boot/reportForms'
|
||||
import { genFileId, ElMessage, ElNotification } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
// name: 'harmonic-boot/report/word'
|
||||
})
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const dictData = useDictData()
|
||||
const TableHeaderRef = ref()
|
||||
const dotList: any = ref({})
|
||||
const Template: any = ref({})
|
||||
const uploadList: any = ref([])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
},
|
||||
loadCallback: () => {
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
|
||||
|
||||
if (dom) {
|
||||
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
dotList.value = data
|
||||
}
|
||||
// 上传
|
||||
const choose = (files: any) => {
|
||||
const isJPG = files.raw.type === 'image/jpg'
|
||||
const isPNG = files.raw.type === 'image/png'
|
||||
if (!isJPG && !isPNG) {
|
||||
ElMessage.warning('上传文件只能是 JPG/PNG 格式!')
|
||||
return false
|
||||
}
|
||||
|
||||
uploadList.value = files
|
||||
ElMessage.success('上传成功')
|
||||
}
|
||||
// 生成
|
||||
const exportEvent = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage.warning('请选择监测点进行报告生成!')
|
||||
}
|
||||
|
||||
let form = new FormData()
|
||||
form.append('lineIndex', dotList.value.id)
|
||||
form.append('name', dotList.value.name)
|
||||
form.append('crmName', tableStore.table.params.crmName || '')
|
||||
form.append('reportNumber', tableStore.table.params.reportNumber || '')
|
||||
form.append('type', '0')
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
console.log('🚀 ~ exportEvent ~ uploadList.value:', uploadList.value?.raw)
|
||||
form.append('file', uploadList.value?.raw || '')
|
||||
// 特殊字符正则表达式
|
||||
const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
|
||||
if (specialCharRegex.test(tableStore.table.params.crmName) || specialCharRegex.test(tableStore.table.params.reportNumber)) {
|
||||
ElNotification({
|
||||
type: 'error',
|
||||
message: '包含特殊字符，请注意修改!'
|
||||
})
|
||||
}else{
|
||||
ElMessage('生成报告中...')
|
||||
exportModel(form).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||
})
|
||||
// createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = dotList.value.name // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class='default-main' :style='height'>
|
||||
<splitpanes style='height: 100%' class='default-theme' id='navigation-splitpanes'>
|
||||
<pane :size='size'>
|
||||
<PointTree :default-expand-all='false' @node-click='handleNodeClick' @init='handleNodeClick'>
|
||||
</PointTree>
|
||||
</pane>
|
||||
<pane style='background: #fff' :style='height'>
|
||||
<TableHeader ref='TableHeaderRef' datePicker :show-search='false'>
|
||||
<template v-slot:select>
|
||||
<el-form-item label='客户名称'>
|
||||
<el-input v-model='tableStore.table.params.crmName' maxlength='32' show-word-limit clearable
|
||||
placeholder='请输入客户名称' />
|
||||
</el-form-item>
|
||||
<el-form-item label='报表编号'>
|
||||
<el-input v-model='tableStore.table.params.reportNumber' clearable
|
||||
placeholder='请输入报表编号' maxlength='12' show-word-limit />
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-upload :show-file-list='false' ref='uploadRef' action='' accept='.png,.jpg'
|
||||
:on-change='choose' :auto-upload='false'>
|
||||
<template #trigger>
|
||||
<el-button icon='el-icon-Upload' type='primary' class='mr10 ml10'>上传接线图</el-button>
|
||||
</template>
|
||||
</el-upload>
|
||||
<el-button icon='el-icon-Download' type='primary' @click='exportEvent'>生成</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class='box'>
|
||||
<div id='luckysheet'>
|
||||
<img width='100%' :style='`height: calc(${tableStore.table.height} + 40px)`'
|
||||
src='@/assets/img/jss.png' />
|
||||
</div>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang='ts'>
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { exportModel } from '@/api/process-boot/reportForms'
|
||||
import { genFileId, ElMessage, ElNotification } from 'element-plus'
|
||||
import type { UploadProps, UploadUserFile } from 'element-plus'
|
||||
|
||||
defineOptions({
|
||||
// name: 'harmonic-boot/report/word'
|
||||
})
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const dictData = useDictData()
|
||||
const TableHeaderRef = ref()
|
||||
const dotList: any = ref({})
|
||||
const Template: any = ref({})
|
||||
const uploadList: any = ref([])
|
||||
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'POST',
|
||||
column: [],
|
||||
beforeSearchFun: () => {
|
||||
},
|
||||
loadCallback: () => {
|
||||
}
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
|
||||
|
||||
if (dom) {
|
||||
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
dotList.value = data
|
||||
}
|
||||
// 上传
|
||||
const choose = (files: any) => {
|
||||
const isJPG = files.raw.type === 'image/jpg'
|
||||
const isPNG = files.raw.type === 'image/png'
|
||||
if (!isJPG && !isPNG) {
|
||||
ElMessage.warning('上传文件只能是 JPG/PNG 格式!')
|
||||
return false
|
||||
}
|
||||
|
||||
uploadList.value = files
|
||||
ElMessage.success('上传成功')
|
||||
}
|
||||
// 生成
|
||||
const exportEvent = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage.warning('请选择监测点进行报告生成!')
|
||||
}
|
||||
|
||||
let form = new FormData()
|
||||
form.append('lineIndex', dotList.value.id)
|
||||
form.append('name', dotList.value.name)
|
||||
form.append('crmName', tableStore.table.params.crmName || '')
|
||||
form.append('reportNumber', tableStore.table.params.reportNumber || '')
|
||||
form.append('type', '0')
|
||||
form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
|
||||
form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
|
||||
console.log('🚀 ~ exportEvent ~ uploadList.value:', uploadList.value?.raw)
|
||||
form.append('file', uploadList.value?.raw || '')
|
||||
// 特殊字符正则表达式
|
||||
const specialCharRegex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/
|
||||
if (specialCharRegex.test(tableStore.table.params.crmName) || specialCharRegex.test(tableStore.table.params.reportNumber)) {
|
||||
ElNotification({
|
||||
type: 'error',
|
||||
message: '包含特殊字符，请注意修改!'
|
||||
})
|
||||
}else{
|
||||
ElMessage('生成报告中...')
|
||||
exportModel(form).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||
})
|
||||
// createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = dotList.value.name // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang='scss'>
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,343 +1,343 @@
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step
|
||||
:class="active == i ? 'highlight' : ''"
|
||||
:title="item.name"
|
||||
@click="handleClick(i)"
|
||||
></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量超标占比环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<div style="height: 250px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>区域稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
|
||||
<vxe-column field="deptName" title="区域" />
|
||||
<vxe-column sortable field="onlineNum" title="在线监测点数量(个)" />
|
||||
<vxe-column sortable field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="监测点数 " field="overNum">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="天数" field="overDay">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
row.forEach((item: any) => {
|
||||
maxList.push(...(item.ratioList || [0]))
|
||||
})
|
||||
let max = Math.max(...maxList) > 50 ? 100 : 50
|
||||
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = [
|
||||
'频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)'
|
||||
]
|
||||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '60%'],
|
||||
radius: '60%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.evaluationData {
|
||||
height: 33px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 4px 20px 0px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: none !important;
|
||||
}
|
||||
</style>
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step
|
||||
:class="active == i ? 'highlight' : ''"
|
||||
:title="item.name"
|
||||
@click="handleClick(i)"
|
||||
></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量超标占比环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<div style="height: 250px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>区域稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
|
||||
<vxe-column field="deptName" title="区域" />
|
||||
<vxe-column sortable field="onlineNum" title="在运监测点数(个)" />
|
||||
<vxe-column sortable field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="监测点数 " field="overNum">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="天数" field="overDay">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list == null ? '' : scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
row.forEach((item: any) => {
|
||||
maxList.push(...(item.ratioList || [0]))
|
||||
})
|
||||
let max = Math.max(...maxList) > 50 ? 100 : 50
|
||||
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = [
|
||||
'频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)'
|
||||
]
|
||||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '60%'],
|
||||
radius: '60%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.evaluationData {
|
||||
height: 33px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 4px 20px 0px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,338 +1,338 @@
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step :class="active == i ? 'highlight' : ''" :title="item.name"
|
||||
@click="handleClick(i)"></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量超标占比环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<div style="height: 250px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>区域稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
|
||||
<vxe-column field="deptName" title="区域" />
|
||||
<vxe-column sortable field="onlineNum" title="在线监测点数量(个)" />
|
||||
<vxe-column sortable field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="监测点数 " field="overNum">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="天数" field="overDay">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
row.forEach((item: any) => {
|
||||
maxList.push(...(item.ratioList || [0]))
|
||||
})
|
||||
let max = Math.max(...maxList) > 50 ? 100 : 50
|
||||
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)']
|
||||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '60%'],
|
||||
radius: '60%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.evaluationData {
|
||||
height: 33px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 4px 20px 0px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: none !important;
|
||||
}
|
||||
</style>
|
||||
<!-- 稳态 -->
|
||||
<template>
|
||||
<!-- 终端 -->
|
||||
<el-dialog draggable title="稳态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
|
||||
<el-row style="height: 300px" :gutter="20">
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<div class="boxSteps">
|
||||
<el-steps>
|
||||
<template v-for="(item, i) in Voltage">
|
||||
<el-step :class="active == i ? 'highlight' : ''" :title="item.name"
|
||||
@click="handleClick(i)"></el-step>
|
||||
</template>
|
||||
</el-steps>
|
||||
</div>
|
||||
<div v-for="(item, i) in evaluationData" class="evaluationData">
|
||||
<el-row style="width: 100%">
|
||||
<el-col :span="12" style="display: flex">
|
||||
<img :src="url[i]" />
|
||||
<span>{{ item.targetName }}</span>
|
||||
</el-col>
|
||||
<el-col :span="12" style="display: flex">
|
||||
<div style="width: 150px">
|
||||
均值：
|
||||
<span style="color: #339966">{{ item.avg == 3.14159 ? '--' : item.avg }}</span>
|
||||
</div>
|
||||
<div>
|
||||
标准差：
|
||||
<span style="color: #ff9900">{{ item.avg == 3.14159 ? '--' : item.sd }}</span>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="title">
|
||||
<span>稳态电能质量超标占比环比变化</span>
|
||||
</div>
|
||||
<div class="pie">
|
||||
<div style="height: 250px; width: 100%" ref="chartRef"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div>
|
||||
<div class="title">
|
||||
<span>区域稳态电能质量水平评估</span>
|
||||
</div>
|
||||
<vxe-table v-bind="defaultAttribute" ref="vxeRef" height="365px" :data="tableData">
|
||||
<vxe-column field="deptName" title="区域" />
|
||||
<vxe-column sortable field="onlineNum" title="在运监测点数(个)" />
|
||||
<vxe-column sortable field="overNum" title="超标监测点数量(个)" />
|
||||
<vxe-column sortable field="overRatio" title="超标监测点占比(%)" />
|
||||
|
||||
<vxe-colgroup :title="item" v-for="(item, i) in title">
|
||||
<vxe-column title="监测点数 " field="overNum">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overNum }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column title="天数" field="overDay">
|
||||
<template #default="scope">
|
||||
<span>{{ scope.row.list[i].overDay }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-colgroup>
|
||||
</vxe-table>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, nextTick } from 'vue'
|
||||
import echarts from '@/components/echarts/echarts'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { color } from '@/components/echarts/color'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { getEvaluationData, evaluationDetail, evaluationRatio } from '@/api/device-boot/panorama'
|
||||
const dialogVisible: any = ref(false)
|
||||
const rowList = ref({})
|
||||
const active: any = ref(1)
|
||||
const evaluationData: any = ref([])
|
||||
|
||||
const dictData = useDictData()
|
||||
const Voltage: any = dictData.getBasicData('Dev_Voltage_Stand').filter(item => {
|
||||
if (item.code == '35kV' || item.code == '500kV' || item.code == '220kV' || item.code == '110kV') {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
const chartRef = ref<HTMLDivElement>()
|
||||
const url: any = [
|
||||
new URL(`@/assets/img/PLPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/DYPC.png`, import.meta.url),
|
||||
new URL(`@/assets/img/JBL.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SXDY.png`, import.meta.url),
|
||||
new URL(`@/assets/img/SB.png`, import.meta.url)
|
||||
]
|
||||
const tableData: any = ref([])
|
||||
const title = ['电压偏差(超标)', '频率偏差(超标)', '电压总谐波畸变率(超标)', '闪变(超标)', '三相电压不平衡度(超标)']
|
||||
|
||||
const echart = (row: any) => {
|
||||
let maxList: any = []
|
||||
row.forEach((item: any) => {
|
||||
maxList.push(...(item.ratioList || [0]))
|
||||
})
|
||||
let max = Math.max(...maxList) > 50 ? 100 : 50
|
||||
|
||||
let chart = echarts.init(chartRef.value as HTMLDivElement)
|
||||
|
||||
let dataname = ['频率偏差(Hz)',
|
||||
'电压偏差(%)',
|
||||
'电压总谐波畸变率(%)',
|
||||
'三相电压不平衡度(%)',
|
||||
'闪变',
|
||||
'谐波电压(%)',
|
||||
'谐波电流(%)',
|
||||
'间谐波电压(%)',
|
||||
'负序电流(A)']
|
||||
// let datamax = [100, 100, 100, 100, 100, 100]
|
||||
let indicator = []
|
||||
for (let i = 0; i < dataname.length; i++) {
|
||||
indicator.push({
|
||||
name: dataname[i],
|
||||
max: max
|
||||
})
|
||||
}
|
||||
|
||||
let option: any = {
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.55)',
|
||||
borderWidth: 0,
|
||||
position: 'bottom'
|
||||
},
|
||||
legend: {
|
||||
data: row.map((item: any) => item.time),
|
||||
type: 'scroll',
|
||||
orient: 'vertical',
|
||||
icon: 'roundRect',
|
||||
right: '20',
|
||||
|
||||
itemGap: 10,
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
textStyle: {
|
||||
fontSize: '15',
|
||||
color: '#656565'
|
||||
}
|
||||
},
|
||||
radar: {
|
||||
center: ['50%', '60%'],
|
||||
radius: '60%',
|
||||
startAngle: 90,
|
||||
splitNumber: 5,
|
||||
splitArea: {
|
||||
areaStyle: {
|
||||
color: ['#FFFFFF', '#F5F9FF'].reverse()
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: '#D2E4F8'
|
||||
}
|
||||
},
|
||||
name: {
|
||||
formatter: '{value}',
|
||||
textStyle: {
|
||||
color: '#656565',
|
||||
fontSize: 15
|
||||
}
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
series: []
|
||||
}
|
||||
|
||||
row.forEach((item: any, i: any) => {
|
||||
option.series.push({
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: color[i + 1]
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
color: color[i + 1]
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
})
|
||||
|
||||
chart.setOption(option)
|
||||
}
|
||||
|
||||
const open = async (row: any) => {
|
||||
rowList.value = row
|
||||
dialogVisible.value = true
|
||||
// 稳态电能质量水平评估
|
||||
handleClick(0)
|
||||
//环比
|
||||
evaluationRatio(row).then(res => {
|
||||
echart(res.data)
|
||||
})
|
||||
// 稳态电能质量水平评估详细列表
|
||||
evaluationDetail(row).then(res => {
|
||||
tableData.value = res.data
|
||||
})
|
||||
}
|
||||
// 点击电压等级
|
||||
const handleClick = (i: any) => {
|
||||
active.value = i
|
||||
getEvaluationData({
|
||||
...rowList.value,
|
||||
voltageLevel: Voltage[i].id
|
||||
}).then(res => {
|
||||
evaluationData.value = res.data
|
||||
})
|
||||
}
|
||||
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-select) {
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 10px;
|
||||
|
||||
span {
|
||||
font-weight: 550;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.pie {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.evaluationData {
|
||||
height: 33px;
|
||||
margin: 8px 30px;
|
||||
width: 100%;
|
||||
box-shadow: 1px 1px 1px 1px #e8e3e3;
|
||||
display: flex;
|
||||
font-size: 18px;
|
||||
line-height: 35px;
|
||||
|
||||
img {
|
||||
height: 25px;
|
||||
width: 25px;
|
||||
margin: 4px 20px 0px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon) {
|
||||
border: none;
|
||||
background: #ccc;
|
||||
margin-top: 5px;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
:deep(.el-step__icon-inner) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:deep(.boxSteps) {
|
||||
border-radius: 50px;
|
||||
width: 60%;
|
||||
height: 25px;
|
||||
margin: auto;
|
||||
margin-top: 30px;
|
||||
|
||||
.el-step__title {
|
||||
line-height: 18px;
|
||||
font-size: 16px;
|
||||
margin-left: -10px;
|
||||
font-weight: 500;
|
||||
color: #000 !important;
|
||||
position: relative;
|
||||
top: -50px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.highlight) {
|
||||
.el-step__icon {
|
||||
background: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.el-step__title {
|
||||
font-weight: 700 !important;
|
||||
color: var(--el-color-primary) !important;
|
||||
}
|
||||
|
||||
// .is-wait {
|
||||
// color: var(--el-color-primary) !important;
|
||||
// }
|
||||
}
|
||||
|
||||
:deep(.el-dialog__body) {
|
||||
max-height: none !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
<span style="font-size: 16px">{{ dropList.lineName }}详情 </span>
|
||||
<span style="font-weight: 500">最新数据时间：</span>
|
||||
<span style="color: var(--color-primary-default)">{{ dropList.updateTime }}</span>
|
||||
<span style="font-weight: 500">统计日期：</span>
|
||||
<span style="font-weight: 500" class="ml20">统计日期：</span>
|
||||
<span style="color: var(--color-primary-default)">
|
||||
{{ getTimeOfTheMonth('3')[0] + '至' + getTimeOfTheMonth('3')[1] }}
|
||||
</span>
|
||||
@@ -657,7 +657,7 @@ const echart = (row: any) => {
|
||||
},
|
||||
indicator: indicator
|
||||
},
|
||||
|
||||
color: color,
|
||||
series: []
|
||||
}
|
||||
|
||||
@@ -666,13 +666,17 @@ const echart = (row: any) => {
|
||||
name: item.time,
|
||||
type: 'radar',
|
||||
symbol: 'none',
|
||||
|
||||
areaStyle: {
|
||||
normal: {
|
||||
color: '#2a9fe069'
|
||||
}
|
||||
opacity: 0.6, // 调整透明度，避免重叠遮挡
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: `${color[i]}50` },
|
||||
{ offset: 1, color: `${color[i]}50` } // 渐变透明
|
||||
])
|
||||
},
|
||||
itemStyle: {
|
||||
color: '#2a9fe0'
|
||||
lineStyle: {
|
||||
color: color[i],
|
||||
width: 2
|
||||
},
|
||||
data: [item.ratioList]
|
||||
})
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<TableHeader date-picker area ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="对象类型">
|
||||
<!-- <el-form-item label="对象类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.objType"
|
||||
clearable
|
||||
@@ -16,7 +16,7 @@
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.manufacturer"
|
||||
@@ -136,7 +136,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item class="form_but">
|
||||
<el-button type="primary" @click="MonitorVerify" icon="el-icon-Refresh">更新</el-button>
|
||||
<el-button type="primary" @click="MonitorVerify" icon="el-icon-Search">查询</el-button>
|
||||
<el-button type="primary" @click="onExport" icon="el-icon-Download">导出</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
@@ -1,143 +1,151 @@
|
||||
<template>
|
||||
<el-dialog draggable width="1350px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex">
|
||||
<div :style="height1" class="mr10 box" style="width: 500px">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="TableData"
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
@current-change="currentChangeEvent"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="date" title="日期"></vxe-column>
|
||||
<vxe-column field="bdName" title="所属电站(场站)" width="120px"></vxe-column>
|
||||
<vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
|
||||
<vxe-column field="timeSum" title="告警时间(分钟)" width="80px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
<div :style="height" style="width: 820px" v-loading="loading1">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="80px">
|
||||
<template #default="{ rowIndex }">
|
||||
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="time" title="时间" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
|
||||
<vxe-column field="phaseType" title="相别" width="80px">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.phaseType == 'T' ? '/' : row.phaseType }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
|
||||
</vxe-table>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
background
|
||||
layout="sizes,total, ->, prev, pager, next, jumper"
|
||||
:total="TableData1.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dictData = useDictData()
|
||||
const StatisList = dictData.getBasicData('Steady_Statis')
|
||||
const dialogVisible = ref(false)
|
||||
const height1 = mainHeight(-110, 2)
|
||||
const height = mainHeight(10, 2)
|
||||
const tableRef = ref()
|
||||
const title = ref('')
|
||||
const loading1 = ref(false)
|
||||
const TableData = ref([])
|
||||
const TableData1 = ref([])
|
||||
const pageNum = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const numKey = ref(0)
|
||||
const targetKey = ref('')
|
||||
const clickRow = ref({})
|
||||
const open = (data: anyObj, time: string[], num: number) => {
|
||||
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
|
||||
title.value = '告警监测点详情'
|
||||
numKey.value = num
|
||||
targetKey.value = data.key
|
||||
TableData.value = []
|
||||
monitorLimitTable({
|
||||
monitorIds: num == 0 ? data.ids : [data.monitorId],
|
||||
targetKey: num == 0 ? data.key : '',
|
||||
searchBeginTime: time[0],
|
||||
searchEndTime: time[1]
|
||||
}).then(res => {
|
||||
TableData.value = res.data
|
||||
tableRef.value.setCurrentRow(TableData.value[0])
|
||||
currentChangeEvent()
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const currentChangeEvent = () => {
|
||||
loading1.value = true
|
||||
clickRow.value = tableRef.value.getCurrentRecord()
|
||||
TableData1.value = []
|
||||
monitorLimitTableDetail({
|
||||
monitorIds: [clickRow.value.monitorId],
|
||||
searchBeginTime: clickRow.value.date,
|
||||
targetKey: numKey.value == 0 ? targetKey.value : ''
|
||||
})
|
||||
.then(res => {
|
||||
TableData1.value = res.data
|
||||
loading1.value = false
|
||||
pageNum.value = 1
|
||||
})
|
||||
.catch(() => {
|
||||
loading1.value = false
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'time') {
|
||||
return clickRow.value.date + ' ' + row.cellValue
|
||||
} else if (row.column.field == 'type') {
|
||||
return row.cellValue === 'null' ? '/' : row.cellValue
|
||||
} else {
|
||||
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
:deep(.box) {
|
||||
.row--current {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<el-dialog draggable width="1350px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex" v-loading="loading">
|
||||
<div :style="height1" class="mr10 box" style="width: 500px">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="TableData"
|
||||
v-bind="defaultAttribute"
|
||||
ref="tableRef"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
@current-change="currentChangeEvent"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="60px"></vxe-column>
|
||||
<vxe-column field="date" title="日期"></vxe-column>
|
||||
<vxe-column field="bdName" title="所属电站(场站)" width="120px"></vxe-column>
|
||||
<vxe-column field="monitorName" title="监测点名称" width="120px"></vxe-column>
|
||||
<vxe-column field="timeSum" title="告警时间(分钟)" width="80px"></vxe-column>
|
||||
</vxe-table>
|
||||
</div>
|
||||
|
||||
<div :style="height" style="width: 820px" v-loading="loading1">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
:data="TableData1.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
v-bind="defaultAttribute"
|
||||
>
|
||||
<vxe-column type="seq" title="序号" width="80px">
|
||||
<template #default="{ rowIndex }">
|
||||
<span>{{ (pageNum - 1) * pageSize + rowIndex + 1 }}</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="time" title="时间" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="targetName" title="指标类型" min-width="100px"></vxe-column>
|
||||
<vxe-column field="phaseType" title="相别" width="80px">
|
||||
<template v-slot="{ row }">
|
||||
{{ row.phaseType == 'T' ? '/' : row.phaseType }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
|
||||
<vxe-column field="type" title="数据类型" width="105px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="val" title="值" width="85px" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="overLimitValue" title="限值" width="85px" :formatter="formatter"></vxe-column>
|
||||
</vxe-table>
|
||||
<div class="table-pagination">
|
||||
<el-pagination
|
||||
v-model:currentPage="pageNum"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50, 100, 200]"
|
||||
background
|
||||
layout="sizes,total, ->, prev, pager, next, jumper"
|
||||
:total="TableData1.length"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, inject } from 'vue'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { monitorLimitTable, monitorLimitTableDetail } from '@/api/device-boot/dataVerify'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
const dictData = useDictData()
|
||||
const StatisList = dictData.getBasicData('Steady_Statis')
|
||||
const dialogVisible = ref(false)
|
||||
const height1 = mainHeight(-110, 2)
|
||||
const height = mainHeight(10, 2)
|
||||
const tableRef = ref()
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const TableData = ref([])
|
||||
const TableData1 = ref([])
|
||||
const pageNum = ref(1)
|
||||
const pageSize = ref(20)
|
||||
const numKey = ref(0)
|
||||
const targetKey = ref('')
|
||||
const clickRow = ref({})
|
||||
const open = (data: anyObj, time: string[], num: number) => {
|
||||
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_告警详情展示'
|
||||
loading.value = true
|
||||
title.value = '告警监测点详情'
|
||||
numKey.value = num
|
||||
targetKey.value = data.key
|
||||
TableData.value = []
|
||||
monitorLimitTable({
|
||||
monitorIds: num == 0 ? data.ids : [data.monitorId],
|
||||
targetKey: num == 0 ? data.key : '',
|
||||
searchBeginTime: time[0],
|
||||
searchEndTime: time[1]
|
||||
})
|
||||
.then(res => {
|
||||
TableData.value = res.data
|
||||
tableRef.value.setCurrentRow(TableData.value[0])
|
||||
currentChangeEvent()
|
||||
loading.value = false
|
||||
})
|
||||
.catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
const currentChangeEvent = () => {
|
||||
loading1.value = true
|
||||
clickRow.value = tableRef.value.getCurrentRecord()
|
||||
TableData1.value = []
|
||||
monitorLimitTableDetail({
|
||||
monitorIds: [clickRow.value.monitorId],
|
||||
searchBeginTime: clickRow.value.date,
|
||||
targetKey: numKey.value == 0 ? targetKey.value : ''
|
||||
})
|
||||
.then(res => {
|
||||
TableData1.value = res.data
|
||||
loading1.value = false
|
||||
pageNum.value = 1
|
||||
})
|
||||
.catch(() => {
|
||||
loading1.value = false
|
||||
})
|
||||
}
|
||||
const formatter = (row: any) => {
|
||||
if (row.column.field == 'time') {
|
||||
return clickRow.value.date + ' ' + row.cellValue
|
||||
} else if (row.column.field == 'type') {
|
||||
return row.cellValue === 'null' ? '/' : row.cellValue
|
||||
} else {
|
||||
return row.cellValue == null ? '/' : (row.cellValue - 0).toFixed(2)
|
||||
}
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.table-pagination {
|
||||
height: 58px;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
background-color: var(--ba-bg-color-overlay);
|
||||
padding: 13px 15px;
|
||||
border-left: 1px solid #e4e7e9;
|
||||
border-right: 1px solid #e4e7e9;
|
||||
border-bottom: 1px solid #e4e7e9;
|
||||
}
|
||||
:deep(.box) {
|
||||
.row--current {
|
||||
background-color: var(--el-color-primary-light-8) !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -254,7 +254,7 @@ onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
setTimeout(() => {
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
}, 100)
|
||||
})
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<TableHeader date-picker area ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="对象类型">
|
||||
<!-- <el-form-item label="对象类型">
|
||||
<el-select
|
||||
v-model="tableStore.table.params.objType"
|
||||
clearable
|
||||
@@ -16,7 +16,7 @@
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="tableStore.table.params.manufacturer" clearable placeholder="请选择终端厂家">
|
||||
<el-option
|
||||
@@ -60,8 +60,8 @@
|
||||
{{
|
||||
isNaN((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 100)
|
||||
? 0
|
||||
: Math.floor((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 10000) /
|
||||
100
|
||||
: Math.floor((monitoringPoints.abnormalNum / monitoringPoints.runNum) * 10000) /
|
||||
100
|
||||
}}%
|
||||
</div>
|
||||
</div>
|
||||
@@ -99,13 +99,13 @@
|
||||
</el-segmented>
|
||||
</div>
|
||||
<div class="header">
|
||||
<span style="width: 170px; text-align: left">指标名称</span>
|
||||
<span style="width: 165px; text-align: left">指标名称</span>
|
||||
<span style="flex: 1">合理范围</span>
|
||||
<span style="width: 90px">异常测点数</span>
|
||||
<span style="width: 80px">异常测点数</span>
|
||||
</div>
|
||||
<div :style="indicatorHeight" style="overflow-y: auto">
|
||||
<div v-for="o in abnormal.filter(item => item.remark == segmented)" class="abnormal mb10">
|
||||
<span style="width: 170px; height: 24px" class="iconDiv">
|
||||
<span style="width: 165px; height: 24px" class="iconDiv">
|
||||
<div :style="{ backgroundColor: o.ids.length > 0 ? '#FF9100' : '' }"></div>
|
||||
{{ o.targetName }}
|
||||
</span>
|
||||
@@ -113,7 +113,7 @@
|
||||
<!-- 合理范围： -->
|
||||
<span style="color: #388e3c" class="text">{{ o.rangeDesc }}</span>
|
||||
</span>
|
||||
<span style="width: 90px; text-align: center">
|
||||
<span style="width: 80px; text-align: center">
|
||||
<span
|
||||
style="color: #388e3c"
|
||||
:class="` ${o.ids.length > 0 ? 'text-red' : ''}`"
|
||||
@@ -173,26 +173,26 @@
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="monitorName" title="监测点名称"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="devName" title="所属终端名称"></vxe-column>
|
||||
<vxe-column field="monitorName" title="监测点名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="devName" title="所属终端名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="IP">
|
||||
<template #default="{ row }">
|
||||
{{ decryptFromBase64(row.ip) }}
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="stationName" title="所属电站"></vxe-column>
|
||||
<vxe-column field="objType" title="监测对象类型" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="objName" title="监测对象名称" :formatter="formatter"></vxe-column>
|
||||
<vxe-column field="voltageLevel" title="电压等级"></vxe-column>
|
||||
<vxe-column field="abnormalDay" title="异常天数">
|
||||
<vxe-column field="stationName" title="所属电站" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="objType" title="监测对象类型" :formatter="formatter" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="objName" title="监测对象名称" :formatter="formatter" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="voltageLevel" title="电压等级" minWidth="80px"></vxe-column>
|
||||
<vxe-column field="abnormalDay" title="异常天数" width="80px">
|
||||
<template #default="{ row }">
|
||||
<span class="table_name" @click="quantityClick(row, 1)">
|
||||
{{ row.abnormalDay }}
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="abnormalDay" title="严重度">
|
||||
<vxe-column field="abnormalDay" title="严重度" width="80px">
|
||||
<template #default="{ row }">
|
||||
<el-tag type="warning" v-if="row.severity == 0">预警</el-tag>
|
||||
<el-tag type="danger" v-if="row.severity == 1">告警</el-tag>
|
||||
@@ -518,7 +518,7 @@ tableStore.table.params.name = ''
|
||||
provide('tableStore', tableStore)
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/assets/font/iconfont.css';
|
||||
@import '@/assets/font/iconfont.css';
|
||||
.card-list {
|
||||
display: flex;
|
||||
.monitoringPoints {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<el-dialog draggable width="1550px" class="cn-operate-dialog" v-model="dialogVisible" :title="title">
|
||||
<div style="display: flex">
|
||||
<div style="display: flex" v-loading="loading">
|
||||
<div :style="height1" class="mr10 box" style="width: 600px">
|
||||
<vxe-table
|
||||
height="auto"
|
||||
@@ -100,6 +100,7 @@ const height1 = mainHeight(-110, 2)
|
||||
const height = mainHeight(10, 2)
|
||||
const tableRef = ref()
|
||||
const title = ref('')
|
||||
const loading = ref(false)
|
||||
const loading1 = ref(false)
|
||||
const TableData = ref([])
|
||||
const TableData1 = ref([])
|
||||
@@ -110,6 +111,7 @@ const targetKey = ref('')
|
||||
const showColumn = ref(true)
|
||||
const open = (data: anyObj, time: string[], num: number) => {
|
||||
// title.value = (num == 0 ? data.targetName : data.monitorName) + '_异常监测点详情'
|
||||
loading.value = true
|
||||
title.value = '异常监测点详情'
|
||||
TableData.value = []
|
||||
numKey.value = num
|
||||
@@ -123,6 +125,9 @@ const open = (data: anyObj, time: string[], num: number) => {
|
||||
TableData.value = res.data
|
||||
tableRef.value.setCurrentRow(TableData.value[0])
|
||||
currentChangeEvent()
|
||||
loading.value = false
|
||||
}).catch(() => {
|
||||
loading.value = false
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader date-picker ref="TableHeaderRef" >
|
||||
<TableHeader date-picker ref="TableHeaderRef">
|
||||
<template v-slot:select>
|
||||
<el-form-item label="运行状态">
|
||||
<el-select v-model="tableStore.table.params.lineRunFlag" clearable placeholder="请选择运行状态">
|
||||
@@ -12,8 +12,8 @@
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.filterName" placeholder="输入关键字筛选" />
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="请输入终端名称" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
|
||||
@@ -86,22 +86,22 @@
|
||||
</span>
|
||||
<!-- -->
|
||||
<span
|
||||
style="flex: 1; color: #ff9100"
|
||||
style="flex: 1; color: #388e3c"
|
||||
class="text"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
:class="` ${o.integrity < 90 ? 'text-red' : ''}`"
|
||||
>
|
||||
{{ o.integrity }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.online < 90 ? 'text-red' : ''}`"
|
||||
:class="` ${o.online < 90 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.online }}
|
||||
</span>
|
||||
<span
|
||||
style="width: 80px; color: #388e3c"
|
||||
:class="` ${o.qualified < 90 ? 'text-red' : ''}`"
|
||||
:class="` ${o.qualified > 10 ? 'text-red' : ''}`"
|
||||
class="text"
|
||||
>
|
||||
{{ o.qualified }}
|
||||
@@ -138,12 +138,12 @@
|
||||
</span>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="cit" title="所在地市" width="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家"></vxe-column>
|
||||
<vxe-column field="name" title="终端名称"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px"></vxe-column>
|
||||
<vxe-column field="cit" title="所在地市" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="company" title="供电公司" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="subName" title="变电站" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="manufacturer" title="终端厂家" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="name" title="终端名称" minWidth="110px"></vxe-column>
|
||||
<vxe-column field="ip" title="终端IP" :formatter="formatter" width="130px" ></vxe-column>
|
||||
<vxe-column field="runFlag" title="运行状态" width="100px">
|
||||
<template #default="{ row }">
|
||||
<el-tag
|
||||
@@ -269,9 +269,13 @@ const tableStore = new TableStore({
|
||||
statisticsList.value.checkNum = totalData.value.filter(item => item.runFlag === '调试').length
|
||||
statisticsList.value.stopRunNum = totalData.value.filter(item => item.runFlag === '停运').length
|
||||
|
||||
abnormal.value = tableStore.table.data.filter(
|
||||
(k: any) => k.name != '上送国网' && k.name != '非上送国网'
|
||||
)
|
||||
abnormal.value = tableStore.table.data.filter((k: any) => {
|
||||
if (tableStore.table.params.statisticalType.name == '终端厂家') {
|
||||
return k.count != 0
|
||||
} else {
|
||||
return k.name != '上送国网' && k.name != '非上送国网'
|
||||
}
|
||||
})
|
||||
// 合并子集数据 并去重
|
||||
|
||||
totalTable(101, '')
|
||||
@@ -406,7 +410,8 @@ const echart = () => {
|
||||
}
|
||||
}
|
||||
tableStore.table.params.deptIndex = dictData.state.area[0].id
|
||||
tableStore.table.params.lineRunFlag = ''
|
||||
tableStore.table.params.lineRunFlag = 0
|
||||
tableStore.table.params.searchValue = ''
|
||||
|
||||
const formatter = (row: any) => {
|
||||
return row.cellValue || '/'
|
||||
@@ -425,7 +430,7 @@ const totalTable = (num: number, t: string) => {
|
||||
}
|
||||
|
||||
const change = (e: string) => {
|
||||
title.value = e==''?'' : e+'_'
|
||||
title.value = e == '' ? '' : e + '_'
|
||||
loading.value = true
|
||||
pageNum.value = 1
|
||||
dataList.value = []
|
||||
|
||||
@@ -1,331 +1,331 @@
|
||||
<!--待办事项列表-->
|
||||
<template>
|
||||
<div>
|
||||
<TableHeader date-picker nextFlag theCurrentTime>
|
||||
<template #select>
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
|
||||
<el-option v-for="item in statusSelect" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入关键字"
|
||||
clearable maxlength="32" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef" :checkbox-config="checkboxConfig"></Table>
|
||||
<!--弹框-->
|
||||
<monitor-quit-popup ref="deviceQuitPopup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MonitorQuitPopup from '@/views/pqs/supervise/retire/monitorQuitPopup.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessageBox } from 'element-plus/es'
|
||||
import { cancelQuitRunningDevice, getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'
|
||||
import { deleteQuitRunningDevice } from '@/api/supervision-boot/delete/index'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const statusSelect = dictData.statusSelect()
|
||||
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
//获取登陆用户姓名和部门
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'supervision/retire'
|
||||
})
|
||||
const { push, options, currentRoute } = useRouter()
|
||||
const flag = ref(false)
|
||||
const deviceQuitPopup = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/quitRunningDevice/list',
|
||||
method: 'POST',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '供电公司', field: 'gdName', minWidth: 130 },
|
||||
{ title: '变电站', field: 'subName', minWidth: 160 },
|
||||
{ title: '监测点', field: 'deviceName', minWidth: 200 },
|
||||
{ title: '退运原因', field: 'propertyNo', minWidth: 160 },
|
||||
{
|
||||
title: '变更前状态',
|
||||
field: 'devOriginalStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
|
||||
replaceValue: {
|
||||
0: '投运',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '目标状态',
|
||||
field: 'devStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '投运',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '流程状态',
|
||||
minWidth: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'primary',
|
||||
2: 'success',
|
||||
3: 'danger',
|
||||
4: 'warning',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '待提交审批',
|
||||
1: '审批中',
|
||||
2: '审批通过',
|
||||
3: '审批不通过',
|
||||
4: '已取消',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{ field: 'createTime', title: '开始时间', minWidth: 170 },
|
||||
{
|
||||
field: 'createBy',
|
||||
title: '填报人',
|
||||
minWidth: 80,
|
||||
formatter: (row: any) => {
|
||||
return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
minWidth: '150',
|
||||
fixed: 'right',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'productSetting',
|
||||
title: '流程详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.processInstanceId
|
||||
},
|
||||
click: row => {
|
||||
handleAudit(row.processInstanceId, row.historyInstanceId)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
showDisabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 0)
|
||||
},
|
||||
disabled: row => {
|
||||
return !(row.status == 0)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('编辑', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '重新发起',
|
||||
type: 'warning',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 3 || row.status == 4)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('重新发起', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancel',
|
||||
title: '取消',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || row.status !== 1
|
||||
},
|
||||
click: row => {
|
||||
cancelLeave(row)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
// for (let key in tableStore.table.params) {
|
||||
// if (tableStore.table.params[key] === '') {
|
||||
// delete tableStore.table.params[key]
|
||||
// }
|
||||
|
||||
// }
|
||||
tableStore.table.params.deviceType = 2
|
||||
}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.status = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
//新增退运终端信息
|
||||
const add = () => {
|
||||
deviceQuitPopup.value.open('新增监测点状态变更')
|
||||
}
|
||||
|
||||
// 禁止点击
|
||||
const checkboxConfig = reactive({
|
||||
checkMethod: ({ row }) => {
|
||||
return adminInfo.roleCode.includes('delete_info')
|
||||
? true
|
||||
: row.createBy == adminInfo.$state.id && row.status == 0
|
||||
}
|
||||
})
|
||||
const deleteEven = () => {
|
||||
if (tableStore.table.selection.length == 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择要删除的数据'
|
||||
})
|
||||
} else {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteQuitRunningDevice(tableStore.table.selection.map(item => item.id)).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
/** 流程实例详情 */
|
||||
const handleAudit = (instanceId: string, historyInstanceId: string) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
state: {
|
||||
id: instanceId,
|
||||
historyInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**取消流程操作*/
|
||||
const cancelLeave = async (row: any) => {
|
||||
// 二次确认
|
||||
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
})
|
||||
// 发起取消
|
||||
let data = {
|
||||
id: row.id,
|
||||
processInstanceId: row.processInstanceId,
|
||||
reason: value
|
||||
}
|
||||
await cancelQuitRunningDevice(data)
|
||||
ElMessage.success('取消成功')
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => currentRoute.value.path,
|
||||
() => {
|
||||
if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
|
||||
tableStore.index()
|
||||
flag.value = false
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const props = defineProps({ id: { type: String, default: 'null' } })
|
||||
watch(() => props.id, async (newValue, oldValue) => {
|
||||
if (newValue === 'null') return // 直接返回，避免后续逻辑执行
|
||||
const fullId = newValue.split('@')[0]
|
||||
let nowTime = Date.now()
|
||||
const routeTime = Number(newValue.split('@')[1])
|
||||
if (isNaN(routeTime) || nowTime - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return // 路由时间超过500ms，则不执行
|
||||
await getRunningDeviceById(fullId).then(res => {
|
||||
if (res && res.code == 'A0000') {
|
||||
deviceQuitPopup.value.open('重新发起', res.data)
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
<!--待办事项列表-->
|
||||
<template>
|
||||
<div>
|
||||
<TableHeader date-picker nextFlag theCurrentTime>
|
||||
<template #select>
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
|
||||
<el-option v-for="item in statusSelect" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入关键字"
|
||||
clearable maxlength="32" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef" :checkbox-config="checkboxConfig"></Table>
|
||||
<!--弹框-->
|
||||
<monitor-quit-popup ref="deviceQuitPopup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import MonitorQuitPopup from '@/views/pqs/supervise/retire/monitorQuitPopup.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessageBox } from 'element-plus/es'
|
||||
import { cancelQuitRunningDevice, getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'
|
||||
import { deleteQuitRunningDevice } from '@/api/supervision-boot/delete/index'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
const dictData = useDictData()
|
||||
const statusSelect = dictData.statusSelect()
|
||||
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
//获取登陆用户姓名和部门
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'supervision/retire'
|
||||
})
|
||||
const { push, options, currentRoute } = useRouter()
|
||||
const flag = ref(false)
|
||||
const deviceQuitPopup = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/quitRunningDevice/list',
|
||||
method: 'POST',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '供电公司', field: 'gdName', minWidth: 130 },
|
||||
{ title: '变电站', field: 'subName', minWidth: 160 },
|
||||
{ title: '监测点', field: 'deviceName', minWidth: 200 },
|
||||
{ title: '退运原因', field: 'propertyNo', minWidth: 160 },
|
||||
{
|
||||
title: '变更前状态',
|
||||
field: 'devOriginalStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
|
||||
replaceValue: {
|
||||
0: '投运',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '目标状态',
|
||||
field: 'devStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '投运',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '流程状态',
|
||||
minWidth: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'primary',
|
||||
2: 'success',
|
||||
3: 'danger',
|
||||
4: 'warning',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '待提交审批',
|
||||
1: '审批中',
|
||||
2: '审批通过',
|
||||
3: '审批不通过',
|
||||
4: '已取消',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{ field: 'createTime', title: '开始时间', minWidth: 170 },
|
||||
{
|
||||
field: 'createBy',
|
||||
title: '填报人',
|
||||
minWidth: 80,
|
||||
formatter: (row: any) => {
|
||||
return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
minWidth: '150',
|
||||
fixed: 'right',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'productSetting',
|
||||
title: '流程详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.processInstanceId
|
||||
},
|
||||
click: row => {
|
||||
handleAudit(row.processInstanceId, row.historyInstanceId)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
showDisabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 0)
|
||||
},
|
||||
disabled: row => {
|
||||
return !(row.status == 0)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('编辑', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '重新发起',
|
||||
type: 'warning',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 3 || row.status == 4)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('重新发起', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancel',
|
||||
title: '取消',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || row.status !== 1
|
||||
},
|
||||
click: row => {
|
||||
cancelLeave(row)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
// for (let key in tableStore.table.params) {
|
||||
// if (tableStore.table.params[key] === '') {
|
||||
// delete tableStore.table.params[key]
|
||||
// }
|
||||
|
||||
// }
|
||||
tableStore.table.params.deviceType = 2
|
||||
}
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
tableStore.table.params.status = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
//新增退运终端信息
|
||||
const add = () => {
|
||||
deviceQuitPopup.value.open('新增监测点状态变更')
|
||||
}
|
||||
|
||||
// 禁止点击
|
||||
const checkboxConfig = reactive({
|
||||
checkMethod: ({ row }) => {
|
||||
return adminInfo.roleCode.includes('delete_info')
|
||||
? true
|
||||
: row.createBy == adminInfo.$state.id && row.status == 0
|
||||
}
|
||||
})
|
||||
const deleteEven = () => {
|
||||
if (tableStore.table.selection.length == 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择要删除的数据'
|
||||
})
|
||||
} else {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteQuitRunningDevice(tableStore.table.selection.map(item => item.id)).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
/** 流程实例详情 */
|
||||
const handleAudit = (instanceId: string, historyInstanceId: string) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
state: {
|
||||
id: instanceId,
|
||||
historyInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**取消流程操作*/
|
||||
const cancelLeave = async (row: any) => {
|
||||
// 二次确认
|
||||
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
})
|
||||
// 发起取消
|
||||
let data = {
|
||||
id: row.id,
|
||||
processInstanceId: row.processInstanceId,
|
||||
reason: value
|
||||
}
|
||||
await cancelQuitRunningDevice(data)
|
||||
ElMessage.success('取消成功')
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => currentRoute.value.path,
|
||||
() => {
|
||||
if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
|
||||
tableStore.index()
|
||||
flag.value = false
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const props = defineProps({ id: { type: String, default: 'null' } })
|
||||
watch(() => props.id, async (newValue, oldValue) => {
|
||||
if (newValue === 'null') return // 直接返回，避免后续逻辑执行
|
||||
const fullId = newValue.split('@')[0]
|
||||
let nowTime = Date.now()
|
||||
const routeTime = Number(newValue.split('@')[1])
|
||||
if (isNaN(routeTime) || nowTime - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return // 路由时间超过500ms，则不执行
|
||||
await getRunningDeviceById(fullId).then(res => {
|
||||
if (res && res.code == 'A0000') {
|
||||
deviceQuitPopup.value.open('重新发起', res.data)
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
@@ -1,324 +1,324 @@
|
||||
<!--待办事项列表-->
|
||||
<template>
|
||||
<div>
|
||||
<TableHeader date-picker nextFlag theCurrentTime>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
|
||||
<el-option v-for="item in statusSelect" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入关键字" clearable maxlength="32" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef" :checkbox-config="checkboxConfig"></Table>
|
||||
<!--弹框-->
|
||||
<device-quit-popup ref="deviceQuitPopup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessageBox } from 'element-plus/es'
|
||||
import { cancelQuitRunningDevice, getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { deleteQuitRunningDevice } from '@/api/supervision-boot/delete/index'
|
||||
const dictData = useDictData()
|
||||
const statusSelect = dictData.statusSelect()
|
||||
|
||||
//获取登陆用户姓名和部门
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'supervision/retire'
|
||||
})
|
||||
const { push, options, currentRoute } = useRouter()
|
||||
const flag = ref(false)
|
||||
const deviceQuitPopup = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/quitRunningDevice/list',
|
||||
method: 'POST',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '供电公司', field: 'gdName', minWidth: 130 },
|
||||
{ title: '变电站', field: 'subName', minWidth: 160 },
|
||||
{ title: '终端名称', field: 'deviceName', minWidth: 130 },
|
||||
{ title: '变更原因', field: 'propertyNo', minWidth: 160 },
|
||||
{
|
||||
title: '变更前状态',
|
||||
field: 'devOriginalStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '运行',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '目标状态',
|
||||
field: 'devStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '运行',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '流程状态',
|
||||
minWidth: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'primary',
|
||||
2: 'success',
|
||||
3: 'danger',
|
||||
4: 'warning'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '待提交审批',
|
||||
1: '审批中',
|
||||
2: '审批通过',
|
||||
3: '审批不通过',
|
||||
4: '已取消'
|
||||
}
|
||||
},
|
||||
{ field: 'createTime', title: '开始时间', minWidth: 170 },
|
||||
{
|
||||
field: 'createBy',
|
||||
title: '填报人',
|
||||
minWidth: 80,
|
||||
formatter: (row: any) => {
|
||||
return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
minWidth: '150',
|
||||
fixed: 'right',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'productSetting',
|
||||
title: '流程详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.processInstanceId
|
||||
},
|
||||
click: row => {
|
||||
flag.value = true
|
||||
handleAudit(row.processInstanceId, row.historyInstanceId)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
showDisabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 0)
|
||||
},
|
||||
disabled: row => {
|
||||
return !(row.status == 0)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('编辑', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '重新发起',
|
||||
type: 'warning',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 3 || row.status == 4)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('重新发起', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancel',
|
||||
title: '取消',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || row.status != 1
|
||||
},
|
||||
click: row => {
|
||||
cancelLeave(row)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
// for (let key in tableStore.table.params) {
|
||||
// if (tableStore.table.params[key] === '') {
|
||||
// delete tableStore.table.params[key]
|
||||
// }
|
||||
// }
|
||||
tableStore.table.params.deviceType = 1
|
||||
}
|
||||
})
|
||||
tableStore.table.params.status = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
//新增退运终端信息
|
||||
const add = () => {
|
||||
deviceQuitPopup.value.open('新增终端状态变更')
|
||||
}
|
||||
// 禁止点击
|
||||
const checkboxConfig = reactive({
|
||||
checkMethod: ({ row }) => {
|
||||
return adminInfo.roleCode.includes('delete_info')
|
||||
? true
|
||||
: row.createBy == adminInfo.$state.id && row.status == 0
|
||||
}
|
||||
})
|
||||
const deleteEven = () => {
|
||||
if (tableStore.table.selection.length == 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择要删除的数据'
|
||||
})
|
||||
} else {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteQuitRunningDevice(tableStore.table.selection.map(item => item.id)).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
/** 流程实例详情 */
|
||||
const handleAudit = (instanceId: string, historyInstanceId: string) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
state: {
|
||||
id: instanceId,
|
||||
historyInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**取消流程操作*/
|
||||
const cancelLeave = async (row: any) => {
|
||||
// 二次确认
|
||||
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
})
|
||||
// 发起取消
|
||||
let data = {
|
||||
id: row.id,
|
||||
processInstanceId: row.processInstanceId,
|
||||
reason: value
|
||||
}
|
||||
await cancelQuitRunningDevice(data)
|
||||
ElMessage.success('取消成功')
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => currentRoute.value.path,
|
||||
() => {
|
||||
if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
|
||||
tableStore.index()
|
||||
flag.value = false
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const props = defineProps({ id: { type: String, default: 'null' } })
|
||||
watch(() => props.id, async (newValue, oldValue) => {
|
||||
if (newValue === 'null') return // 直接返回，避免后续逻辑执行
|
||||
const fullId = newValue.split('@')[0]
|
||||
let nowTime = Date.now()
|
||||
const routeTime = Number(newValue.split('@')[1])
|
||||
if (isNaN(routeTime) || nowTime - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return // 路由时间超过500ms，则不执行
|
||||
await getRunningDeviceById(fullId).then(res => {
|
||||
if (res && res.code == 'A0000') {
|
||||
deviceQuitPopup.value.open('重新发起', res.data)
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
<!--待办事项列表-->
|
||||
<template>
|
||||
<div>
|
||||
<TableHeader date-picker nextFlag theCurrentTime>
|
||||
<template v-slot:select>
|
||||
<el-form-item label="流程状态">
|
||||
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
|
||||
<el-option v-for="item in statusSelect" :key="item.id" :label="item.name"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" placeholder="请输入关键字" clearable maxlength="32" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="add">新增</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven">删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<!--表格-->
|
||||
<Table ref="tableRef" :checkbox-config="checkboxConfig"></Table>
|
||||
<!--弹框-->
|
||||
<device-quit-popup ref="deviceQuitPopup" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { onMounted, provide, ref, watch } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import DeviceQuitPopup from '@/views/pqs/supervise/retire/deviceQuitPopup.vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ElMessageBox } from 'element-plus/es'
|
||||
import { cancelQuitRunningDevice, getRunningDeviceById } from '@/api/supervision-boot/device/quitRunningDev'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { deleteQuitRunningDevice } from '@/api/supervision-boot/delete/index'
|
||||
const dictData = useDictData()
|
||||
const statusSelect = dictData.statusSelect()
|
||||
|
||||
//获取登陆用户姓名和部门
|
||||
const adminInfo = useAdminInfo()
|
||||
defineOptions({
|
||||
name: 'supervision/retire'
|
||||
})
|
||||
const { push, options, currentRoute } = useRouter()
|
||||
const flag = ref(false)
|
||||
const deviceQuitPopup = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/supervision-boot/quitRunningDevice/list',
|
||||
method: 'POST',
|
||||
publicHeight: 65,
|
||||
column: [
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ title: '供电公司', field: 'gdName', minWidth: 130 },
|
||||
{ title: '变电站', field: 'subName', minWidth: 160 },
|
||||
{ title: '终端名称', field: 'deviceName', minWidth: 130 },
|
||||
{ title: '变更原因', field: 'propertyNo', minWidth: 160 },
|
||||
{
|
||||
title: '变更前状态',
|
||||
field: 'devOriginalStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '运行',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '目标状态',
|
||||
field: 'devStatus',
|
||||
minWidth: 130,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'success',
|
||||
1: 'warning',
|
||||
2: 'danger',
|
||||
3: 'warning',
|
||||
4: 'info',
|
||||
null: 'primary'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '运行',
|
||||
1: '检修',
|
||||
2: '停运',
|
||||
3: '调试',
|
||||
4: '退运',
|
||||
null: '/'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'status',
|
||||
title: '流程状态',
|
||||
minWidth: 100,
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'primary',
|
||||
2: 'success',
|
||||
3: 'danger',
|
||||
4: 'warning'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '待提交审批',
|
||||
1: '审批中',
|
||||
2: '审批通过',
|
||||
3: '审批不通过',
|
||||
4: '已取消'
|
||||
}
|
||||
},
|
||||
{ field: 'createTime', title: '开始时间', minWidth: 170 },
|
||||
{
|
||||
field: 'createBy',
|
||||
title: '填报人',
|
||||
minWidth: 80,
|
||||
formatter: (row: any) => {
|
||||
return dictData.state.userList.filter(item => item.id == row.cellValue)[0]?.name
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
align: 'center',
|
||||
minWidth: '150',
|
||||
fixed: 'right',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'productSetting',
|
||||
title: '流程详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return !row.processInstanceId
|
||||
},
|
||||
click: row => {
|
||||
flag.value = true
|
||||
handleAudit(row.processInstanceId, row.historyInstanceId)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '编辑',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
showDisabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 0)
|
||||
},
|
||||
disabled: row => {
|
||||
return !(row.status == 0)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('编辑', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '重新发起',
|
||||
type: 'warning',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || !(row.status == 3 || row.status == 4)
|
||||
},
|
||||
click: row => {
|
||||
deviceQuitPopup.value.open('重新发起', row)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'cancel',
|
||||
title: '取消',
|
||||
type: 'danger',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
disabled: row => {
|
||||
return row.createBy != adminInfo.$state.id || row.status != 1
|
||||
},
|
||||
click: row => {
|
||||
cancelLeave(row)
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
// for (let key in tableStore.table.params) {
|
||||
// if (tableStore.table.params[key] === '') {
|
||||
// delete tableStore.table.params[key]
|
||||
// }
|
||||
// }
|
||||
tableStore.table.params.deviceType = 1
|
||||
}
|
||||
})
|
||||
tableStore.table.params.status = ''
|
||||
tableStore.table.params.searchValue = ''
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
//新增退运终端信息
|
||||
const add = () => {
|
||||
deviceQuitPopup.value.open('新增终端状态变更')
|
||||
}
|
||||
// 禁止点击
|
||||
const checkboxConfig = reactive({
|
||||
checkMethod: ({ row }) => {
|
||||
return adminInfo.roleCode.includes('delete_info')
|
||||
? true
|
||||
: row.createBy == adminInfo.$state.id && row.status == 0
|
||||
}
|
||||
})
|
||||
const deleteEven = () => {
|
||||
if (tableStore.table.selection.length == 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择要删除的数据'
|
||||
})
|
||||
} else {
|
||||
ElMessageBox.confirm('此操作将永久删除, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
deleteQuitRunningDevice(tableStore.table.selection.map(item => item.id)).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
/** 流程实例详情 */
|
||||
const handleAudit = (instanceId: string, historyInstanceId: string) => {
|
||||
push({
|
||||
name: 'BpmProcessInstanceDetail',
|
||||
state: {
|
||||
id: instanceId,
|
||||
historyInstanceId
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/**取消流程操作*/
|
||||
const cancelLeave = async (row: any) => {
|
||||
// 二次确认
|
||||
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
inputType: 'textarea',
|
||||
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空，且非空格
|
||||
inputErrorMessage: '取消原因不能为空'
|
||||
})
|
||||
// 发起取消
|
||||
let data = {
|
||||
id: row.id,
|
||||
processInstanceId: row.processInstanceId,
|
||||
reason: value
|
||||
}
|
||||
await cancelQuitRunningDevice(data)
|
||||
ElMessage.success('取消成功')
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
})
|
||||
watch(
|
||||
() => currentRoute.value.path,
|
||||
() => {
|
||||
if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
|
||||
tableStore.index()
|
||||
flag.value = false
|
||||
}
|
||||
},
|
||||
{
|
||||
deep: true
|
||||
}
|
||||
)
|
||||
|
||||
const props = defineProps({ id: { type: String, default: 'null' } })
|
||||
watch(() => props.id, async (newValue, oldValue) => {
|
||||
if (newValue === 'null') return // 直接返回，避免后续逻辑执行
|
||||
const fullId = newValue.split('@')[0]
|
||||
let nowTime = Date.now()
|
||||
const routeTime = Number(newValue.split('@')[1])
|
||||
if (isNaN(routeTime) || nowTime - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return // 路由时间超过500ms，则不执行
|
||||
await getRunningDeviceById(fullId).then(res => {
|
||||
if (res && res.code == 'A0000') {
|
||||
deviceQuitPopup.value.open('重新发起', res.data)
|
||||
}
|
||||
})
|
||||
}, { immediate: true })
|
||||
</script>
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
<el-radio-button :label="1">离线</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选">
|
||||
<el-form-item label="筛选数据">
|
||||
<el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
<el-form-item label="触发类型:">
|
||||
|
||||
@@ -1,218 +1,218 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker :showReset="false" showExport ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<!-- <el-form-item label="筛选">-->
|
||||
<!-- <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />-->
|
||||
<!-- </el-form-item>-->
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Tickets" type="primary" @click="analysis1">分析记录管理</el-button>
|
||||
<el-button icon="el-icon-SuccessFilled" type="primary" @click="firing">启动关联分析</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<!-- 分析记录管理 -->
|
||||
<el-dialog draggable v-model="dialogAnalysis" title="分析记录管理" width="60%">
|
||||
<vxe-table height="500" auto-resize :data="AnalysisData" v-bind="defaultAttribute">
|
||||
<vxe-column field="timeId" title="策略名称"></vxe-column>
|
||||
<vxe-column field="timeId" title="操作时间"></vxe-column>
|
||||
<vxe-column field="createName" title="操作人"></vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm title="是否确认删除策略！" @confirm="details(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { queryRelevantLogPage, delRelevantLog, processEvents, analysis } from '@/api/advance-boot/analyse'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
|
||||
defineOptions({
|
||||
name: 'Advancedanalysis/eventcorrelation'
|
||||
})
|
||||
const dialogAnalysis = ref(false)
|
||||
const AnalysisData = ref([])
|
||||
const pageHeight = mainHeight(20)
|
||||
const bxecharts = mainHeight(95).height as any
|
||||
const loading = ref(false)
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const TableHeaderRef = ref()
|
||||
const waveFormRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/advance-boot/process/querySagEventsPage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '发生时间' },
|
||||
{ field: 'duration', title: '持续时间(s)' },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降(骤升)幅值(%)'
|
||||
},
|
||||
{ field: 'gdName', title: '供电公司' },
|
||||
{ field: 'subName', title: '变电站' },
|
||||
{ field: 'lineName', title: '监测点' },
|
||||
{
|
||||
field: 'dealFlag',
|
||||
title: '暂降特征幅值计算',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success',
|
||||
2: 'success',
|
||||
3: 'warning'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '未处理',
|
||||
1: '已处理',
|
||||
2: '已处理,无结果',
|
||||
3: '计算失败'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'fileFlag',
|
||||
title: '录波文件',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '不存在',
|
||||
1: '存在'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
},100)
|
||||
// row.loading = true
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// view2.value = true
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag != 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => { }
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
const bxactiveName = ref('ssbx')
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
TableHeaderRef.value.setTheDate(1)
|
||||
nextTick(() => {
|
||||
|
||||
// tableStore.index()
|
||||
TableHeaderRef.value.onComSearch()
|
||||
|
||||
})
|
||||
})
|
||||
//分析记录管理
|
||||
const analysis1 = () => {
|
||||
queryRelevantLogPage({}).then((res: any) => {
|
||||
AnalysisData.value = res.data.records
|
||||
})
|
||||
dialogAnalysis.value = true
|
||||
}
|
||||
// 启动关联分析
|
||||
const firing = () => {
|
||||
processEvents({
|
||||
startTime: tableStore.table.params.searchBeginTime,
|
||||
endTime: tableStore.table.params.searchEndTime
|
||||
}).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.message
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
// 删除策略
|
||||
const details = (row: any) => {
|
||||
delRelevantLog({ id: row.id }).then((res: any) => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.message
|
||||
})
|
||||
queryRelevantLogPage({}).then((res: any) => {
|
||||
AnalysisData.value = res.data.records
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
}
|
||||
</script>
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<div v-show="view">
|
||||
<TableHeader datePicker :showReset="false" showExport ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<!-- <el-form-item label="筛选数据">-->
|
||||
<!-- <el-input v-model="tableStore.table.params.searchValue" clearable placeholder="输入关键字筛选" />-->
|
||||
<!-- </el-form-item>-->
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Tickets" type="primary" @click="analysis1">分析记录管理</el-button>
|
||||
<el-button icon="el-icon-SuccessFilled" type="primary" @click="firing">启动关联分析</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
<!-- 分析记录管理 -->
|
||||
<el-dialog draggable v-model="dialogAnalysis" title="分析记录管理" width="60%">
|
||||
<vxe-table height="500" auto-resize :data="AnalysisData" v-bind="defaultAttribute">
|
||||
<vxe-column field="timeId" title="策略名称"></vxe-column>
|
||||
<vxe-column field="timeId" title="操作时间"></vxe-column>
|
||||
<vxe-column field="createName" title="操作人"></vxe-column>
|
||||
<vxe-column title="操作" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-popconfirm title="是否确认删除策略！" @confirm="details(row)">
|
||||
<template #reference>
|
||||
<el-button type="danger" link>删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</vxe-column>
|
||||
</vxe-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<div :style="{ height: pageHeight.height }" style="padding: 10px; overflow: hidden" v-if="!view">
|
||||
<waveForm ref="waveFormRef" senior :boxoList="boxoList" :wp="wp" @backbxlb="backbxlb" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, nextTick } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import { defaultAttribute } from '@/components/table/defaultAttribute'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { queryRelevantLogPage, delRelevantLog, processEvents, analysis } from '@/api/advance-boot/analyse'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import waveForm from '@/components/echarts/waveForm.vue'
|
||||
import { getMonitorEventAnalyseWave } from '@/api/event-boot/transient'
|
||||
|
||||
defineOptions({
|
||||
name: 'Advancedanalysis/eventcorrelation'
|
||||
})
|
||||
const dialogAnalysis = ref(false)
|
||||
const AnalysisData = ref([])
|
||||
const pageHeight = mainHeight(20)
|
||||
const bxecharts = mainHeight(95).height as any
|
||||
const loading = ref(false)
|
||||
const view = ref(true)
|
||||
const view2 = ref(false)
|
||||
const TableHeaderRef = ref()
|
||||
const waveFormRef = ref()
|
||||
const tableStore = new TableStore({
|
||||
url: '/advance-boot/process/querySagEventsPage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
{
|
||||
field: 'index',
|
||||
title: '序号',
|
||||
width: '80',
|
||||
formatter: (row: any) => {
|
||||
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
|
||||
}
|
||||
},
|
||||
{ field: 'startTime', title: '发生时间' },
|
||||
{ field: 'duration', title: '持续时间(s)' },
|
||||
{
|
||||
field: 'featureAmplitude',
|
||||
title: '暂降(骤升)幅值(%)'
|
||||
},
|
||||
{ field: 'gdName', title: '供电公司' },
|
||||
{ field: 'subName', title: '变电站' },
|
||||
{ field: 'lineName', title: '监测点' },
|
||||
{
|
||||
field: 'dealFlag',
|
||||
title: '暂降特征幅值计算',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success',
|
||||
2: 'success',
|
||||
3: 'warning'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '未处理',
|
||||
1: '已处理',
|
||||
2: '已处理,无结果',
|
||||
3: '计算失败'
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'fileFlag',
|
||||
title: '录波文件',
|
||||
render: 'tag',
|
||||
custom: {
|
||||
0: 'warning',
|
||||
1: 'success'
|
||||
},
|
||||
replaceValue: {
|
||||
0: '不存在',
|
||||
1: '存在'
|
||||
}
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
width: '120',
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'edit',
|
||||
title: '波形分析',
|
||||
type: 'primary',
|
||||
disabled: row => {
|
||||
return row.fileFlag == 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton',
|
||||
click: async row => {
|
||||
view.value = false
|
||||
setTimeout(() => {
|
||||
waveFormRef.value.open(row)
|
||||
},100)
|
||||
// row.loading = true
|
||||
// boxoList.value = row
|
||||
// await getMonitorEventAnalyseWave({ id: row.eventId, systemType: 0 })
|
||||
// .then(res => {
|
||||
// row.loading = false
|
||||
// if (res != undefined) {
|
||||
// wp.value = res.data
|
||||
// view.value = false
|
||||
// view2.value = true
|
||||
// }
|
||||
// })
|
||||
// .catch(() => {
|
||||
// row.loading = false
|
||||
// })
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '暂无波形',
|
||||
type: '',
|
||||
disabled: row => {
|
||||
return row.fileFlag != 0
|
||||
},
|
||||
icon: 'el-icon-Plus',
|
||||
render: 'basicButton'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
loadCallback: () => { }
|
||||
})
|
||||
tableStore.table.params.searchValue = ''
|
||||
const bxactiveName = ref('ssbx')
|
||||
const boxoList = ref({})
|
||||
const wp = ref({})
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
|
||||
onMounted(() => {
|
||||
TableHeaderRef.value.setTheDate(1)
|
||||
nextTick(() => {
|
||||
|
||||
// tableStore.index()
|
||||
TableHeaderRef.value.onComSearch()
|
||||
|
||||
})
|
||||
})
|
||||
//分析记录管理
|
||||
const analysis1 = () => {
|
||||
queryRelevantLogPage({}).then((res: any) => {
|
||||
AnalysisData.value = res.data.records
|
||||
})
|
||||
dialogAnalysis.value = true
|
||||
}
|
||||
// 启动关联分析
|
||||
const firing = () => {
|
||||
processEvents({
|
||||
startTime: tableStore.table.params.searchBeginTime,
|
||||
endTime: tableStore.table.params.searchEndTime
|
||||
}).then(res => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.message
|
||||
})
|
||||
tableStore.index()
|
||||
})
|
||||
}
|
||||
// 删除策略
|
||||
const details = (row: any) => {
|
||||
delRelevantLog({ id: row.id }).then((res: any) => {
|
||||
ElMessage({
|
||||
type: 'success',
|
||||
message: res.message
|
||||
})
|
||||
queryRelevantLogPage({}).then((res: any) => {
|
||||
AnalysisData.value = res.data.records
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const backbxlb = () => {
|
||||
view.value = true
|
||||
view2.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<div>
|
||||
<div v-show="view">
|
||||
<!-- 表头 -->
|
||||
<TableHeader date-picker showExport>
|
||||
<TableHeader ref="TableHeaderRef" date-picker showExport>
|
||||
<template v-slot:operation>
|
||||
<el-button :icon="Download" type="primary" @click="download">下载波形</el-button>
|
||||
</template>
|
||||
@@ -130,11 +130,16 @@ const tableStore = new TableStore({
|
||||
},
|
||||
loadCallback: () => {}
|
||||
})
|
||||
const TableHeaderRef = ref()
|
||||
provide('tableStore', tableStore)
|
||||
tableStore.table.params.searchState = 0
|
||||
onMounted(() => {
|
||||
TableHeaderRef.value.setTheDate(1)
|
||||
// 加载数据
|
||||
tableStore.index()
|
||||
nextTick(() => {
|
||||
// tableStore.index()
|
||||
TableHeaderRef.value.onComSearch()
|
||||
})
|
||||
})
|
||||
const checkboxConfig = reactive<VxeTablePropTypes.CheckboxConfig<any>>({
|
||||
checkMethod: ({ row }) => {
|
||||
|
||||
@@ -30,9 +30,9 @@
|
||||
<EventStatistics :externalHeight='20'/>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
|
||||
<!-- <el-tab-pane label="运行情况" name="4" lazy :style="height" v-if="!isReload">
|
||||
<RunningCondition :externalHeight='20'/>
|
||||
</el-tab-pane>
|
||||
</el-tab-pane> -->
|
||||
<el-tab-pane label="暂态报告" name="5" lazy v-if="!isReload">
|
||||
<TransientReport />
|
||||
</el-tab-pane>
|
||||
@@ -70,7 +70,7 @@ const activeName = ref('3')
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
|
||||
@@ -49,7 +49,7 @@ const showTree = ref(false)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
params.value.deptIndex = adminInfo.$state.deptId
|
||||
params.value.searchBeginTime = datePickerRef.value.timeValue[0]
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
</el-form-item> -->
|
||||
</template>
|
||||
<template #operation>
|
||||
<!-- <el-button icon="el-icon-Download" type="primary" @click="preview">预览报告</el-button> -->
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
@@ -175,7 +176,7 @@ provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
|
||||
@@ -202,12 +203,41 @@ const exportEvent = () => {
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '监测点报告' // 设置下载的文件名
|
||||
link.download = monitoringPoint.state.lineName.split('>').at(-1)+'_暂态报告' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
const preview = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage({
|
||||
message: '请选择监测点进行预览!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
let a = ''
|
||||
|
||||
formd.value.lineId = monitoringPoint.state.lineId
|
||||
formd.value.lineName = monitoringPoint.state.lineName.split('>').at(-1)
|
||||
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||
ElMessage('生成报告中,请稍等!')
|
||||
getLineExport(formd.value).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||
})
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = monitoringPoint.state.lineName.split('>').at(-1)+'_暂态报告' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
|
||||
@@ -1,297 +1,297 @@
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<PointTree
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<!-- <div :style="height"></div> -->
|
||||
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label=" 模板策略">
|
||||
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
|
||||
<el-option
|
||||
v-for="item in templatePolicy"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">监测点详情</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.xq">监测点详情</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降事件列表</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.lb">表格</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降密度</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.mdbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.mdtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降事件点</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.sjdITIC">ITIC</el-checkbox>
|
||||
<el-checkbox v-model="formd.sjdF47">F47</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">概率分布</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.glfbfz">暂降幅值</el-checkbox>
|
||||
<el-checkbox v-model="formd.glfbsj">持续时间</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">月份统计</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.tjbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.tjtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降原因</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.yybg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.yytx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降类型</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.lxbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.lxtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'TransientReport/monitoringpointReport'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const value = ref('')
|
||||
const TableHeaderRef = ref()
|
||||
const dotList: any = ref({
|
||||
name: monitoringPoint.state.lineName.split('>')[3],
|
||||
id: monitoringPoint.state.lineId,
|
||||
level: 6
|
||||
})
|
||||
|
||||
const formd: any = ref({
|
||||
xq: false,
|
||||
lb: false,
|
||||
mdbg: false,
|
||||
mdtx: false,
|
||||
sjdITIC: false,
|
||||
sjdF47: false,
|
||||
glfbfz: false,
|
||||
glfbsj: false,
|
||||
tjbg: false,
|
||||
tjtx: false,
|
||||
yybg: false,
|
||||
yytx: false,
|
||||
lxbg: false,
|
||||
lxtx: false,
|
||||
type: 0
|
||||
})
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'post',
|
||||
column: []
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 100)
|
||||
}
|
||||
})
|
||||
getList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
type: 0
|
||||
}).then(res => {
|
||||
templatePolicy.value = res.data.records
|
||||
// 默认选中第一个
|
||||
if (res.data.records && res.data.records.length > 0) {
|
||||
value.value = res.data.records[0].id
|
||||
// 触发 change 事件，加载对应的配置
|
||||
changeFn(res.data.records[0].id)
|
||||
}
|
||||
})
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
dotList.value = data
|
||||
}
|
||||
const changeFn = (val: any) => {
|
||||
formd.value = {
|
||||
xq: false,
|
||||
lb: false,
|
||||
mdbg: false,
|
||||
mdtx: false,
|
||||
sjdITIC: false,
|
||||
sjdF47: false,
|
||||
glfbfz: false,
|
||||
glfbsj: false,
|
||||
tjbg: false,
|
||||
tjtx: false,
|
||||
yybg: false,
|
||||
yytx: false,
|
||||
lxbg: false,
|
||||
lxtx: false,
|
||||
type: 0
|
||||
}
|
||||
let data = {
|
||||
id: val
|
||||
}
|
||||
|
||||
selectReleation(data).then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
for (let k in formd.value) {
|
||||
if (item.name == k) {
|
||||
formd.value[k] = true
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const exportEvent = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage({
|
||||
message: '请选择监测点进行报告生成!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
let a = ''
|
||||
|
||||
formd.value.lineId = dotList.value.id
|
||||
formd.value.lineName = dotList.value.name
|
||||
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||
ElMessage('生成报告中,请稍等!')
|
||||
getLineExport(formd.value).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||
})
|
||||
// createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '监测点报告' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
.divBox {
|
||||
width: 250px;
|
||||
height: 31px;
|
||||
margin: auto;
|
||||
line-height: 32px;
|
||||
border: 1px solid #c9c9c9;
|
||||
&:hover {
|
||||
border: 1px solid #002255;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
padding: 10px;
|
||||
// margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<div class="default-main" :style="height">
|
||||
<splitpanes style="height: 100%" class="default-theme" id="navigation-splitpanes">
|
||||
<pane :size="size">
|
||||
<PointTree
|
||||
:default-expand-all="false"
|
||||
:default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
|
||||
:current-node-key="monitoringPoint.state.lineId"
|
||||
@node-click="handleNodeClick"
|
||||
@init="handleNodeClick"
|
||||
></PointTree>
|
||||
</pane>
|
||||
<pane style="background: #fff" :style="height">
|
||||
<!-- <div :style="height"></div> -->
|
||||
<TableHeader ref="TableHeaderRef" date-picker :show-search="false">
|
||||
<template v-slot:select>
|
||||
<el-form-item label=" 模板策略">
|
||||
<el-select v-model="value" placeholder="请选择" @change="changeFn" clearable>
|
||||
<el-option
|
||||
v-for="item in templatePolicy"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Download" type="primary" @click="exportEvent">生成报告</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<div class="box" :style="`height: calc(${tableStore.table.height} + 45px)`">
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">监测点详情</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.xq">监测点详情</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降事件列表</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.lb">表格</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降密度</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.mdbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.mdtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降事件点</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.sjdITIC">ITIC</el-checkbox>
|
||||
<el-checkbox v-model="formd.sjdF47">F47</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">概率分布</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.glfbfz">暂降幅值</el-checkbox>
|
||||
<el-checkbox v-model="formd.glfbsj">持续时间</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">月份统计</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.tjbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.tjtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降原因</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.yybg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.yytx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
<el-row>
|
||||
<el-col :span="12" class="mTop">
|
||||
<div class="grid-content">
|
||||
<div class="divBox">暂降类型</div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12" class="mTop">
|
||||
<el-checkbox v-model="formd.lxbg">表格</el-checkbox>
|
||||
<el-checkbox v-model="formd.lxtx">图形</el-checkbox>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider></el-divider>
|
||||
</div>
|
||||
</pane>
|
||||
</splitpanes>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { onMounted, ref, provide } from 'vue'
|
||||
import 'splitpanes/dist/splitpanes.css'
|
||||
import { Splitpanes, Pane } from 'splitpanes'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import PointTree from '@/components/tree/pqs/pointTree.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { mainHeight } from '@/utils/layout'
|
||||
import { getLineExport, getList, selectReleation } from '@/api/event-boot/report'
|
||||
import { useMonitoringPoint } from '@/stores/monitoringPoint'
|
||||
import { ElMessage } from 'element-plus'
|
||||
defineOptions({
|
||||
name: 'TransientReport/monitoringpointReport'
|
||||
})
|
||||
const monitoringPoint = useMonitoringPoint()
|
||||
const height = mainHeight(20)
|
||||
const size = ref(0)
|
||||
const value = ref('')
|
||||
const TableHeaderRef = ref()
|
||||
const dotList: any = ref({
|
||||
name: monitoringPoint.state.lineName.split('>')[3],
|
||||
id: monitoringPoint.state.lineId,
|
||||
level: 6
|
||||
})
|
||||
|
||||
const formd: any = ref({
|
||||
xq: false,
|
||||
lb: false,
|
||||
mdbg: false,
|
||||
mdtx: false,
|
||||
sjdITIC: false,
|
||||
sjdF47: false,
|
||||
glfbfz: false,
|
||||
glfbsj: false,
|
||||
tjbg: false,
|
||||
tjtx: false,
|
||||
yybg: false,
|
||||
yytx: false,
|
||||
lxbg: false,
|
||||
lxtx: false,
|
||||
type: 0
|
||||
})
|
||||
|
||||
const templatePolicy: any = ref([])
|
||||
const tableStore = new TableStore({
|
||||
url: '',
|
||||
method: 'post',
|
||||
column: []
|
||||
})
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
const dom = document.getElementById('navigation-splitpanes')
|
||||
if (dom) {
|
||||
size.value = Math.round((180 / dom.offsetHeight) * 120)
|
||||
}
|
||||
})
|
||||
getList({
|
||||
pageNum: 1,
|
||||
pageSize: 100,
|
||||
type: 0
|
||||
}).then(res => {
|
||||
templatePolicy.value = res.data.records
|
||||
// 默认选中第一个
|
||||
if (res.data.records && res.data.records.length > 0) {
|
||||
value.value = res.data.records[0].id
|
||||
// 触发 change 事件，加载对应的配置
|
||||
changeFn(res.data.records[0].id)
|
||||
}
|
||||
})
|
||||
const handleNodeClick = (data: any, node: any) => {
|
||||
dotList.value = data
|
||||
}
|
||||
const changeFn = (val: any) => {
|
||||
formd.value = {
|
||||
xq: false,
|
||||
lb: false,
|
||||
mdbg: false,
|
||||
mdtx: false,
|
||||
sjdITIC: false,
|
||||
sjdF47: false,
|
||||
glfbfz: false,
|
||||
glfbsj: false,
|
||||
tjbg: false,
|
||||
tjtx: false,
|
||||
yybg: false,
|
||||
yytx: false,
|
||||
lxbg: false,
|
||||
lxtx: false,
|
||||
type: 0
|
||||
}
|
||||
let data = {
|
||||
id: val
|
||||
}
|
||||
|
||||
selectReleation(data).then(res => {
|
||||
res.data.forEach((item: any) => {
|
||||
for (let k in formd.value) {
|
||||
if (item.name == k) {
|
||||
formd.value[k] = true
|
||||
return
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const exportEvent = () => {
|
||||
if (dotList.value.level != 6) {
|
||||
return ElMessage({
|
||||
message: '请选择监测点进行报告生成!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
let a = ''
|
||||
|
||||
formd.value.lineId = dotList.value.id
|
||||
formd.value.lineName = dotList.value.name
|
||||
formd.value.searchBeginTime = TableHeaderRef.value.datePickerRef.timeValue[0]
|
||||
formd.value.searchEndTime = TableHeaderRef.value.datePickerRef.timeValue[1]
|
||||
formd.value.flag = TableHeaderRef.value.datePickerRef.interval
|
||||
ElMessage('生成报告中,请稍等!')
|
||||
getLineExport(formd.value).then((res: any) => {
|
||||
let blob = new Blob([res], {
|
||||
type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document;charset=UTF-8'
|
||||
})
|
||||
// createObjectURL(blob); //创建下载的链接
|
||||
const url = window.URL.createObjectURL(blob)
|
||||
const link = document.createElement('a') // 创建a标签
|
||||
link.href = url
|
||||
link.download = '监测点报告' // 设置下载的文件名
|
||||
document.body.appendChild(link)
|
||||
link.click() //执行下载
|
||||
document.body.removeChild(link)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.splitpanes.default-theme .splitpanes__pane {
|
||||
background: #eaeef1;
|
||||
}
|
||||
.grid-content {
|
||||
text-align: center;
|
||||
}
|
||||
.divBox {
|
||||
width: 250px;
|
||||
height: 31px;
|
||||
margin: auto;
|
||||
line-height: 32px;
|
||||
border: 1px solid #c9c9c9;
|
||||
&:hover {
|
||||
border: 1px solid #002255;
|
||||
}
|
||||
}
|
||||
.box {
|
||||
padding: 10px;
|
||||
// margin-top: 10px;
|
||||
overflow-y: auto;
|
||||
font-size: 15px;
|
||||
}
|
||||
.el-divider--horizontal {
|
||||
margin: 10px 0;
|
||||
}
|
||||
.mTop {
|
||||
margin-top: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user