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

方案数据导出方案测试项信息&历史趋势

Browse Source
This commit is contained in:
zhujiyan
2024-07-08 11:13:51 +08:00
parent 005ce8856b
commit 93f44b0e37
1 changed files with 98 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
src/views/govern/device/planData/index.vue
View File

@@ -6,6 +6,9 @@
<el-descriptions value="small" title="方案信息" class="mb10" :column="2" border>
<template #extra>
<el-button size="small" type="primary" @click="handleOpen(0, '')">新增方案</el-button>
<el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
数据导出
</el-button>
</template>
<el-descriptions-item label="方案名称" width="60">
{{ deviceData.itemName }}
@@ -89,7 +92,7 @@
<p>历史趋势</p>
</div>
<div class="history_header">
<el-form :model="searchForm" class="history_select" label-width="auto">
<el-form :model="searchForm" class="history_select" id="history_select" label-width="auto">
<el-form-item label="统计指标">
<el-select
multiple
@@ -132,15 +135,6 @@
</el-form>
<div class="history_searchBtn">
<el-button type="primary" size="small" icon="el-icon-Search" @click="init()">查询</el-button>
<el-button
v-if="historyDataList.length != 0"
type="primary"
size="small"
icon="el-icon-Download"
@click="handleExport"
>
导出
</el-button>
</div>
</div>
<div class="history_chart" v-loading="loading" v-show="echartsData">
@@ -166,6 +160,8 @@ import { queryStatistical } from '@/api/system-boot/csstatisticalset'
import * as echarts from 'echarts'
import { isNonNullChain } from 'typescript'
import { position } from 'html2canvas/dist/types/css/property-descriptors/position'
import { read, writeFile, utils } from 'xlsx'
const dictData = useDictData()
defineOptions({
name: 'govern/device/manage'
@@ -294,7 +290,7 @@ const init = async () => {
'brown',
'#70B601',
'#1DD0CE',
'cadetblue',
'cadetblue'
]
if (historyDevId.value) {
//选择的指标使用方法处理
@@ -512,7 +508,7 @@ const init = async () => {
axisLine: {
show: true,
lineStyle: {
color: colorList[index+1]
color: colorList[index + 1]
}
},
nameTextStyle: {
@@ -606,8 +602,47 @@ const init = async () => {
const historyChart = ref()
// const chart: any = ref(null)
// chart.value = echarts.init(historyChart.value)
const handleExport = () => {
setTimeout(() => {
const handleExport = async () => {
const planCsv = ref('')
const chartsCsv = ref('')
if (deviceData.value.records && deviceData.value.records.length != 0) {
let csv = '',
obj = {}
obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
if (obj) {
csv = `方案测试项信息\n,
方案名称,${deviceData.value.itemName},
方案描述,${deviceData.value.describe},
测试项名称,${obj?.itemName},
测量间隔,${obj?.statisticalInterval},
电压等级,${
voltageLevelList.find(vv => {
return vv.id == obj.voltageLevel
})?.name
},
接线方式,${
volConTypeList.find(vv => {
return vv.id == obj.volConType
})?.name
},
最小短路容量,${obj.capacitySscmin},
用户协议容量,${obj.capacitySi},
基准短路容量,${obj.capacitySscb},
供电设备容量,${obj.capacitySt},
PT变比,${obj.pt && obj.pt1 ? obj.pt / obj.pt1 : obj.pt},
CT变比,${obj.ct && obj.ct1 ? obj.ct / obj.ct1 : obj.ct},
起始时间,${obj.startTime},
结束时间,${obj.endTime},
监测位置,${obj.location}\n,
`
planCsv.value = csv
}
}
if (historyDataList.value.length != 0) {
let xAxis: any = []
let timeList: any = []
historyDataList.value.map((item: any) => {
@@ -625,12 +660,13 @@ const handleExport = () => {
let csv: any = ''
const list = echartsData.value.options.series
csv = convertToCSV([], [])
chartsCsv.value = csv
// 如果你想提供下载链接
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = '历史趋势.csv'
link.click()
// const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
// const link = document.createElement('a')
// link.href = URL.createObjectURL(blob)
// link.download = '历史趋势.csv'
// link.click()
function convertToCSV(data: any, key: any) {
// 添加列头
let title = '统计时间,'
@@ -658,7 +694,26 @@ const handleExport = () => {
})
return csv
}
}, 10)
}
let csvs = ''
if (chartsCsv.value) {
csvs = planCsv.value + '历史趋势数据,\n\n' + chartsCsv.value
} else {
csvs = planCsv.value
}
// 如果你想提供下载链接
const blob = new Blob([csvs], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
let obj = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})
const date=window.XEUtils.toDateString(new Date() , 'yyyyMMdd HHmmss').replace(' ','_')
link.download = `${deviceData.value.itemName}_${obj?.itemName}_${date}.csv`
link.click()
return
}
const countData: any = ref([])
@@ -698,9 +753,13 @@ watch(
if (val == 0) {
countData.value = []
}
countData.value.map((item:any,key:any)=>{
if(val.findIndex((vv:any)=>{return vv==item.index})==-1){
countData.value.splice(key,1)
countData.value.map((item: any, key: any) => {
if (
val.findIndex((vv: any) => {
return vv == item.index
}) == -1
) {
countData.value.splice(key, 1)
}
})
}
@@ -767,17 +826,27 @@ onMounted(() => {})
.history_header {
display: flex;
flex-wrap: wrap;
.history_select {
// flex-wrap: wrap;
#history_select {
width: 90%;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
overflow: auto;
// flex-wrap: wrap;
.el-form-item {
flex: none;
width: 380px !important;
}
.el-select {
margin-right: 10px;
}
}
#history_select::-webkit-scrollbar {
width: 0 !important;
display: none !important;
}
.history_searchBtn {
flex: 1;
display: flex;
@@ -792,7 +861,7 @@ onMounted(() => {})
margin-top: 10px;
}
// ::v-deep .el-select {
// width: 200px !important;
// }
::v-deep .el-select {
width: 200px !important;
}
</style>