Web/admin-sjzx
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改冀北问题

Browse Source
This commit is contained in:
guanj
2025-12-09 20:04:55 +08:00
parent 8c41a8fc77
commit 0fe2d2b911
49 changed files with 6357 additions and 5917 deletions
Download Patch File Download Diff File Expand all files Collapse all files

564
src/views/pqs/harmonicMonitoring/area/TransientEventList/index.vue
View File

@@ -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>

2
src/views/pqs/harmonicMonitoring/detailed/division/components/compute.vue
View File

@@ -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,

28
src/views/pqs/harmonicMonitoring/detailed/pollutionReport/MonitoringPointTab.vue
View File

@@ -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>

7
src/views/pqs/harmonicMonitoring/detailed/pollutionReport/SubstationTab.vue
View File

@@ -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'

2
src/views/pqs/harmonicMonitoring/detailed/regionalStatistics/index.vue
View File

@@ -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

2
src/views/pqs/harmonicMonitoring/embed/lntegruty/components/table.vue
View File

@@ -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"

2
src/views/pqs/harmonicMonitoring/embed/lntegruty/components_JB/table.vue
View File

@@ -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"

33
src/views/pqs/harmonicMonitoring/embed/lntegruty/index_JB.vue
View File

@@ -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 || '/'

432
src/views/pqs/harmonicMonitoring/embed/onlinerate/components/table.vue
View File

@@ -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>

33
src/views/pqs/harmonicMonitoring/embed/onlinerate/index_JB.vue
View File

@@ -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 {

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue
View File

@@ -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) => {

2
src/views/pqs/harmonicMonitoring/monitoringPoint/online/statisticalReport/index.vue
View File

@@ -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 })

2
src/views/pqs/harmonicMonitoring/reportForms/statistics/index.vue
View File

@@ -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 })

304
src/views/pqs/harmonicMonitoring/reportForms/word/index.vue
View File

@@ -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>