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-06-27 09:39:53 +08:00
parent bb4682a8ca
commit f91281049b
9 changed files with 974 additions and 308 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -22,7 +22,7 @@
<el-tab-pane
v-for="(item, index) in deviceData.records"
:label="item.itemName"
:name="item.itemName"
:name="item.id"
:key="index"
>
<el-descriptions value="small" class="mb10" :column="4" border>
@@ -100,6 +100,22 @@
></el-option>
</el-select>
</el-form-item>
<el-form-item label="谐波次数" v-if="countOptions.length != 0">
<el-select
@change="init"
v-model="searchForm.count"
multiple
:multiple-limit="3"
placeholder="请选择谐波次数"
>
<el-option
v-for="item in countOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型">
<el-select @change="init" v-model="searchForm.type" placeholder="请选择值类型">
<el-option
@@ -113,9 +129,15 @@
</el-form>
<div class="history_searchBtn">
<!-- <el-button type="primary" icon="el-icon-Search" @click="handleSearch">查询</el-button> -->
<!-- <el-button type="primary" size="small" icon="el-icon-Download" @click="handleExport">
<el-button
v-if="historyDataList.length != 0"
type="primary"
size="small"
icon="el-icon-Download"
@click="handleExport"
>
导出
</el-button> -->
</el-button>
</div>
</div>
<!-- <div class="title">
@@ -178,10 +200,13 @@ const typeOptions = [
]
searchForm.value = {
index: '',
type: typeOptions[0].id
type: typeOptions[0].id,
count: []
}
//统计指标
const indexOptions: any = ref([])
//谐波次数
const countOptions: any = ref([])
// Harmonic_Type
// portable-harmonic
const legendDictList: any = ref([])
@@ -197,23 +222,34 @@ queryByCode('portable-harmonic').then(res => {
const activeName: any = ref()
const deviceData: any = ref([])
const schemeTreeRef = ref()
const nodeId: any = ref('')
//历史趋势devId
const historyDevId: any = ref('')
const chartTitle: any = ref('')
const nodeClick = async (e: anyObj) => {
loading.value = true
deviceData.value = []
nodeId.value = e.id
historyDevId.value = e.children && e.children.length != 0 ? e.children[0].id : e.id
let id = e.pid ? e.pid : e.id
console.log(id, e, '单个点击')
//查询测试项信息
try {
await getTestRecordInfo(id).then(res => {
deviceData.value = res.data
loading.value = false
res.data.records.map(item => {
if (item.id == e.id) {
activeName.value = item.itemName
}
})
if (res.data.records.length == 1) {
activeName.value = res.data.records[0].id
} else {
res.data.records.map((item: any) => {
//多层
console.log(item.id, e.id, '88888888888888888888')
if (item.id == e.id) {
activeName.value = item.id
return
console.log('着调了', activeName.value, item.id)
}
})
}
schemeTreeRef.value.getPlanData(deviceData.value)
})
} catch (error) {
@@ -237,28 +273,76 @@ const historyDataList: any = ref([])
const refreshTree = () => {
schemeTreeRef.value.getTreeList()
}
const isDel = ref(false)
const range = (start: any, end: any, step: any) => {
return Array.from({ length: (end - start) / step + 1 }, (_, i) => start + i * step)
}
const init = async () => {
if (nodeId.value) {
try {
//查询历史趋势
historyDataList.value = []
loading.value = true
chartTitle.value =
deviceData.value.itemName +
' ' +
deviceData.value.records[0]?.itemName +
' ' +
indexOptions.value.find(item => {
return item.id == searchForm.value.index
})?.name
await getHistoryTrend({
devId: nodeId.value,
statisticalId: searchForm.value.index,
valueType: searchForm.value.type
//选择指标的时候切换legend内容和data数据
let list: any = []
legendDictList.value?.selectedList?.map((item: any) => {
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
countOptions.value = []
item.eleEpdPqdVOS.map((vv: any) => {
if (vv.harmStart && vv.harmEnd) {
let list = []
range(0, 0, 0)
list = range(vv.harmStart, vv.harmEnd, 2)
list.map((item: any) => {
countOptions.value.push({
id: item,
name: item
})
})
} else {
countOptions.value = []
}
})
}
})
if (historyDevId.value) {
//查询历史趋势
historyDataList.value = []
loading.value = true
let middleTitle = ''
if (
deviceData.value.records &&
deviceData.value.records.length != 0 &&
deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})?.itemName
) {
middleTitle = deviceData.value.records.find((item: any) => {
return item.id == activeName.value
})?.itemName
} else {
middleTitle = ''
}
chartTitle.value =
deviceData.value.itemName +
' ' +
middleTitle +
' ' +
indexOptions.value.find(item => {
return item.id == searchForm.value.index
})?.name
let obj = {
devId: historyDevId.value,
statisticalId: searchForm.value.index,
valueType: searchForm.value.type,
frequency: ''
}
if (countOptions.value.length != 0 && searchForm.value.count.length != 0) {
obj.frequency = JSON.parse(JSON.stringify(searchForm.value.count.join(',')))
} else {
searchForm.value.count = []
delete obj.frequency
}
try {
await getHistoryTrend(obj)
.then(res => {
if (res.code == 'A0000') {
console.log(res, '趋势图')
historyDataList.value = res.data
echartsData.value = null
//icon图标替换legend图例
@@ -268,8 +352,10 @@ const init = async () => {
'path://M1001.661867 796.544c48.896 84.906667 7.68 157.013333-87.552 157.013333H110.781867c-97.834667 0-139.050667-69.504-90.112-157.013333l401.664-666.88c48.896-87.552 128.725333-87.552 177.664 0l401.664 666.88zM479.165867 296.533333v341.333334a32 32 0 1 0 64 0v-341.333334a32 32 0 1 0-64 0z m0 469.333334v42.666666a32 32 0 1 0 64 0v-42.666666a32 32 0 1 0-64 0z'
let xAxis: any[] = []
historyDataList.value.map(item => {
let unit = ''
historyDataList.value.map((item: any) => {
xAxis.push(item.time)
unit = item.unit
})
echartsData.value = {
options: {
@@ -281,9 +367,67 @@ const init = async () => {
],
toolbox: {
feature: {
saveAsImage: {
title: '保存'
}
// saveAsImage: {
// title: '保存'
// },
// dataView: { readOnly: false },
// myTool1: {
// show: true,
// title: '下载数据',
// icon: 'path://M18 20.288L21.288 17l-.688-.688l-2.1 2.1v-4.887h-1v4.887l-2.1-2.1l-.688.688zM14.5 23.5v-1h7v1zm-10-4v-17H13L18.5 8v3.14h-1V8.5h-5v-5h-7v15h6.615v1zm1-1v-15z',
// onclick: function () {
// setTimeout(() => {
// // 使用这个函数转换数据为CSV格式
// let csv = ''
// const list = echartsData.value.options.series
// list.map((item: any, key: any) => {
// csv = convertToCSV(item.data, key)
// })
// // 如果你想提供下载链接
// 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) {
// console.log(data, key, '0000000')
// // 添加列头
// let title = '时间,'
// list.map((item: any, index: any) => {
// // title+=item.name+','
// index == list.length - 1
// ? (title += `${item.name}\n`)
// : (title += `${item.name},`)
// })
// console.log(title, '99999999999')
// let csv = ''
// // csv += 'x,y\n'
// csv = title
// // 遍历数据并添加到CSV字符串中
// let arr = []
// arr[key] = data
// console.log(list[0].data.length, '77777777777')
// list[0].data.map((vv:any,indexs:any)=>{
// if (list.length==3) {
// csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}\n`
// }
// })
// // list[key].data.map((item: any, index: any) => {
// // if (key == 0) {
// // csv += `${xAxis[index]},${item},\n`
// // }
// // if (key == list.length - 1) {
// // csv += `${item}\n`
// // }
// // if (key != 0 && key != list.length - 1) {
// // csv += `${item},`
// // }
// // })
// return csv
// }
// }, 10)
// }
// }
}
},
tooltip: {
@@ -294,29 +438,7 @@ const init = async () => {
},
legend: {
//legend使用iconfont图标
// data: [
// {
// name: list[0]?.name,
// icon: iconThree
// },
// {
// name: list[1]?.name,
// icon: iconThree
// },
// {
// name: list[2]?.name,
// icon: iconThree
// },
// {
// name: list[3]?.name,
// icon: iconDanger
// }
// ],
// x: 'right',
// textStyle: {
// // color: 'white',
// fontSize: 14
// },
data: [],
top: 5,
right: 80,
itemWidth: 20,
@@ -349,7 +471,7 @@ const init = async () => {
yAxis: [
{
type: 'value',
name: 'KV',
name: unit,
axisLabel: {
color: '#A9AEB2',
fontSize: 12
@@ -376,141 +498,48 @@ const init = async () => {
}
}
}
]
// series: [
// {
// name: list[0]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#DAA521',
// lineStyle: {
// color: '#DAA521'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Load') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[1]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#2E8B58',
// lineStyle: {
// color: '#2E8B58'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_ThdA_Sys') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[2]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#A5292A',
// lineStyle: {
// color: '#A5292A'
// }
// }
// },
// data: historyDataList.value
// .map(item => {
// if (item.statisticalName === 'Apf_RmsI_TolOut') {
// return item.statisticalData
// } else {
// return ''
// }
// })
// .filter(item => item !== '')
// },
// {
// name: list[3]?.name,
// type: 'line',
// smooth: true,
// emphasis: {
// focus: 'series'
// },
// itemStyle: {
// normal: {
// color: '#d81e06',
// lineStyle: {
// color: '#d81e06'
// }
// }
// },
// data: []
// }
// ]
],
series: []
}
}
//选择指标的时候切换legend内容和data数据
let list = []
//颜色数组
const colorList = ['#DAA521', '#2E8B58', '#A5292A', '#d81e06']
legendDictList.value?.selectedList?.map(item => {
if (item.dataType == searchForm.value.index) {
list.push(item.eleEpdPqdVOS)
}
})
list.map((item, index) => {
echartsData.value.options.legend.data.push({
name: item.showName,
icon: iconThree
})
echartsData.value.options.series.push({
name: item.showName,
type: 'line',
smooth: true,
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: colorList[index],
lineStyle: {
color: colorList[index]
}
}
},
data: historyDataList.value
.map(vv => {
if (vv.statisticalName === item.name) {
return vv.statisticalData
} else {
return ''
}
item.map((vv: any, indexs: any) => {
//处理legend
if (historyDataList.value.length != 0) {
echartsData.value.options.legend.data.push({
name: vv.showName,
icon: iconThree
})
.filter(vv => vv !== '')
}
//series数据
echartsData.value.options.series.push({
name: vv.showName,
type: 'line',
smooth: true,
symbol: 'none',
emphasis: {
focus: 'series'
},
itemStyle: {
normal: {
color: colorList[indexs],
lineStyle: {
color: colorList[indexs]
}
}
},
data: historyDataList.value
.map((kk: any) => {
if (kk.statisticalName === vv.name) {
return kk.statisticalData
} else {
return ''
}
})
.filter((kk: any) => kk !== '')
})
})
})
loading.value = false
@@ -534,31 +563,66 @@ const historyChart = ref()
// const chart: any = ref(null)
// chart.value = echarts.init(historyChart.value)
const handleExport = () => {
// 使用ECharts的getOption方法获取当前图表的配置
const option = chart.value.getOption()
console.log(option.series, '00000000000')
return
const seriesData = option.series[0].data // 假设我们只导出第一个系列的数据
// 转换为CSV格式
let csvContent = 'data1,data2\n'
seriesData.forEach(item => {
csvContent += `${item.name},${item.value}\n`
})
// 创建Blob对象，并使用a标签下载
const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
const link = document.createElement('a')
if (link.download !== undefined) {
// 支持下载属性
const url = URL.createObjectURL(blob)
link.setAttribute('href', url)
link.setAttribute('download', 'data.csv')
link.style.visibility = 'hidden'
document.body.appendChild(link)
setTimeout(() => {
let xAxis: any = []
historyDataList.value.map((item: any) => {
xAxis.push(item.time)
})
// 使用这个函数转换数据为CSV格式
let csv = ''
const list = echartsData.value.options.series
list.map((item: any, key: any) => {
csv = convertToCSV(item.data, key)
})
// 如果你想提供下载链接
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()
document.body.removeChild(link)
}
function convertToCSV(data: any, key: any) {
console.log(data, key, '0000000')
// 添加列头
let title = '时间,'
list.map((item: any, index: any) => {
// title+=item.name+','
index == list.length - 1 ? (title += `${item.name}\n`) : (title += `${item.name},`)
})
let csv = ''
// csv += 'x,y\n'
csv = title
// 遍历数据并添加到CSV字符串中
let arr = []
arr[key] = data
let str = ''
list.map((item: any, index: any) => {
// str += '${list[' + index + '].data[indexs]},'
str += `${list[index].data['indexs']}`
})
console.log(str, 'strstrstrstrstrsr')
const listLength = list.length
list[0].data.map((vv: any, indexs: any) => {
switch (listLength) {
case 1:
csv += `${xAxis[indexs]},${list[0].data[indexs]}\n`
break
case 2:
csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]}\n`
break
case 3:
csv += `${xAxis[indexs]},${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}\n`
break
}
// if (list.length == 3) {
// // ${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}
// csv +=`${list[0].data[indexs]},${list[1].data[indexs]},${list[2].data[indexs]}`
// }
})
return csv
}
}, 10)
// historyChart.value.handleExport(historyDataList.value)
}
onMounted(() => {})