日志记录:请求联调

故障录波:添加配置回显
This commit is contained in:
高云鹏 2024-11-15 15:07:45 +08:00
parent 71a3e989b5
commit c2c2334030
3 changed files with 154 additions and 65 deletions

View File

@ -8,9 +8,44 @@ export const getLogRecordListReq = (data: {
endTime: string
}) => {
return createAxios<never, Promise<ReqReturnType<any>>>({
url: '',
url: '/api/plc/files',
method: 'post',
data
})
}
export const setConfigReq = (data: {
id: string
options:string
}) => {
return createAxios<never, Promise<ReqReturnType<never>>>({
url: '/api/plc/updateFdrConfig',
method: 'post',
data
})
}
export const previewFileReq = (data: {
url: string
deviceCode: string
}) => {
return createAxios<never, Promise<ReqReturnType<any>>>({
url: '/api/plc/parseData',
method: 'post',
data
})
}
export const downloadFileReq = (data: {
url: string
}) => {
return createAxios({
url: '/api/plc/download',
method: 'post',
data,
responseType: 'blob'
}, {
reductDataFormat: false
})
}

View File

@ -80,7 +80,7 @@
</el-container>
</el-container>
</div>
<el-dialog v-model="configDialogVisible" title="配置信息" width="500">
<el-dialog v-model="configDialogVisible" title="配置信息" width="500" @close="closeConfigDialog">
<el-form ref="configFormRef" :model="configFormData" label-width="120" :rules="configFormRules">
<el-form-item prop="timeFormat" label="时间格式">
<el-input v-model="configFormData.timeFormat"></el-input>
@ -136,7 +136,7 @@
import { ref, reactive, computed, onMounted, nextTick, onUnmounted } from 'vue'
import { dayjs, ElMessage, FormInstance, TreeInstance } from 'element-plus'
import { Search, Setting } from '@element-plus/icons-vue'
import { getLogRecordListReq } from '/@/api/backend/logRecord/request'
import { getLogRecordListReq, setConfigReq, previewFileReq, downloadFileReq } from '/@/api/backend/logRecord/request'
import { equipList } from '/@/api/backend/temperature/request'
import * as echarts from 'echarts'
import { tableItemData } from './type'
@ -157,6 +157,7 @@ const treeData = ref<
label: string
id: string
code: string
options: any
children?: any[]
}[]
>([
@ -164,6 +165,7 @@ const treeData = ref<
label: '风机列表',
id: '0',
code: '0',
options: {},
children: [],
},
])
@ -186,14 +188,16 @@ const curTreeData = ref<{
label: string
id: string
code: string
options: any
children?: any[]
}>({
label: '风机列表',
id: '0',
code: '0',
options: {},
})
const handleNodeClick = (target: { label: string; id: string; code: string }) => {
const handleNodeClick = (target: { label: string; id: string; code: string; options: any }) => {
curTreeData.value = target
if (target.id === '0') return
getListForAirBlower()
@ -207,6 +211,7 @@ const getTreeDataList = () => {
label: item.name,
code: item.code,
id: item.id,
options: item.options ? JSON.parse(item.options).fdrFormat : {},
}
})
originTreeChildData = data
@ -274,17 +279,21 @@ const getListForAirBlower = () => {
endTime: dayjs(searchData.date[1]).format('YYYY-MM'),
}
// getLogRecordListReq(data).then((res) => {
// if (res.success) {
// pageSetting.total = res.data.length
// originTableData.value = res.data
// }
// })
getLogRecordListReq(data).then((res) => {
if (res.success) {
pageSetting.total = res.data.length
originTableData.value = res.data
}
})
}
const configDialogVisible = ref(false)
const configFormRef = ref<FormInstance>()
const closeConfigDialog = () => {
configFormRef.value?.resetFields()
}
const configFormData = reactive({
timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
delimiter: ';',
@ -293,6 +302,9 @@ const configFormData = reactive({
const openConfigDialog = () => {
configDialogVisible.value = true
configFormData.delimiter = curTreeData.value.options.delimiter
configFormData.timeFormat = curTreeData.value.options.timeFormat
configFormData.validStartLine = curTreeData.value.options.validStartLine
}
const configFormRules = {
@ -332,17 +344,19 @@ const cancelConfig = () => {
}
const setAirBlowerConfig = () => {
// setConfigReq({
// id: curTreeData.value.id,
// fdrFormat: JSON.stringify(configFormData),
// })
// .then(() => {
// ElMessage.success('')
// configDialogVisible.value = false
// })
// .catch((err) => {
// ElMessage.error('')
// })
const stringify = JSON.stringify({ fdrFormat: configFormData })
setConfigReq({
id: curTreeData.value.id,
options: stringify,
})
.then(() => {
ElMessage.success('配置成功')
configDialogVisible.value = false
})
.catch((err) => {
ElMessage.error('配置失败')
})
}
const previewFileDialogVisible = ref(false)
@ -351,18 +365,19 @@ const readFile = (data: tableItemData) => {
getFileData(data.path)
}
const downloadFile = (data: tableItemData) => {
// downloadFileReq({ url: data.path }).then((res) => {
// const url = window.URL.createObjectURL(res.data)
// const a = document.createElement('a')
// a.style.display = 'none'
// a.href = url
// a.download = data.name
// document.body.appendChild(a)
// a.click()
// window.URL.revokeObjectURL(url)
// document.body.removeChild(a)
// })
downloadFileReq({ url: data.path }).then((res) => {
const url = window.URL.createObjectURL(res.data)
const a = document.createElement('a')
a.style.display = 'none'
a.href = url
a.download = data.name
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
})
}
const closePreviewFileDialog = () => {
previewTreeData.value = []
previewChartData = []
@ -412,7 +427,11 @@ const handleCheckChange = (data: any, state: boolean) => {
const index = selectPreviewTree.findIndex((item: string) => item === data.key)
selectPreviewTree.splice(index, 1)
}
initPreviewChart()
if(selectPreviewTree.length > 0){
initPreviewChart()
}else{
previewChartInstance && previewChartInstance.clear()
}
}
let previewChartData: any = {}
@ -420,6 +439,14 @@ let curSeries: any = []
let previewChartInstance: any = null
const previewChartRef = ref()
const getRandomDarkColor = () => {
let r = Math.floor(Math.random() * 200) // 0127
let g = Math.floor(Math.random() * 200)
let b = Math.floor(Math.random() * 200)
let color = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
return color
}
const createSeriresData = () => {
const seriesData: any = []
const curAttr = curSeries.map((item: any) => item.name)
@ -430,7 +457,7 @@ const createSeriresData = () => {
})
selectPreviewTree.forEach((item: string) => {
if (!curAttr.includes(item)) {
const color = '#' + Math.floor(Math.random() * 16777215).toString(16)
const color = getRandomDarkColor()
const data = {
name: item,
type: 'line',
@ -534,7 +561,7 @@ const initPreviewChart = () => {
{
start: 0,
end: 100,
}
},
],
legend: {
data: [],
@ -550,30 +577,30 @@ const initPreviewChart = () => {
const getFileData = (url: string) => {
previewTreeLoading.value = true
// previewFileReq({
// deviceCode: curTreeData.value.code,
// url: url,
// }).then((res) => {
// previewChartData = res.data
// const attrName = Object.keys(res.data)
// const data: any = []
// attrName.forEach((item) => {
// if (item === 'TimeStamp') {
// previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => {
// return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
// })
// } else {
// data.push({
// label: item,
// key: item,
// isLeaf: true,
// })
// }
// })
// previewTreeData.value = data
// originPreviewTreeData = data
// previewTreeLoading.value = false
// })
previewFileReq({
deviceCode: curTreeData.value.code,
url: url,
}).then((res) => {
previewChartData = res.data
const attrName = Object.keys(res.data)
const data: any = []
attrName.forEach((item) => {
if (item === 'TimeStamp') {
previewChartData.TimeStamp = previewChartData.TimeStamp.map((item: any) => {
return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
})
} else {
data.push({
label: item,
key: item,
isLeaf: true,
})
}
})
previewTreeData.value = data
originPreviewTreeData = data
previewTreeLoading.value = false
})
}
onMounted(() => {
@ -669,7 +696,7 @@ onUnmounted(() => {
.tableBtnPart {
display: flex;
justify-content: center;
.el-button{
.el-button {
margin: 0;
}
}

View File

@ -80,7 +80,7 @@
</el-container>
</el-container>
</div>
<el-dialog v-model="configDialogVisible" title="配置信息" width="500">
<el-dialog v-model="configDialogVisible" title="配置信息" width="500" @close="closeConfigDialog">
<el-form ref="configFormRef" :model="configFormData" label-width="120" :rules="configFormRules">
<el-form-item prop="timeFormat" label="时间格式">
<el-input v-model="configFormData.timeFormat"></el-input>
@ -120,6 +120,9 @@
node-key="key"
@check-change="handleCheckChange"
></el-tree>
<!--
@node-click="previewNodeClick"
-->
</el-scrollbar>
</el-col>
<el-col :span="16" class="colPart">
@ -157,6 +160,7 @@ const treeData = ref<
label: string
id: string
code: string
options: any
children?: any[]
}[]
>([
@ -164,6 +168,7 @@ const treeData = ref<
label: '风机列表',
id: '0',
code: '0',
options: {},
children: [],
},
])
@ -186,14 +191,16 @@ const curTreeData = ref<{
label: string
id: string
code: string
options: any
children?: any[]
}>({
label: '风机列表',
id: '0',
code: '0',
options: {},
})
const handleNodeClick = (target: { label: string; id: string; code: string }) => {
const handleNodeClick = (target: { label: string; id: string; code: string; options: any }) => {
curTreeData.value = target
if (target.id === '0') return
getListForAirBlower()
@ -207,6 +214,7 @@ const getTreeDataList = () => {
label: item.name,
code: item.code,
id: item.id,
options: item.options ? JSON.parse(item.options).fdrFormat : {},
}
})
originTreeChildData = data
@ -285,6 +293,10 @@ const getListForAirBlower = () => {
const configDialogVisible = ref(false)
const configFormRef = ref<FormInstance>()
const closeConfigDialog = () => {
configFormRef.value?.resetFields()
}
const configFormData = reactive({
timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
delimiter: ';',
@ -293,6 +305,9 @@ const configFormData = reactive({
const openConfigDialog = () => {
configDialogVisible.value = true
configFormData.delimiter = curTreeData.value.options.delimiter
configFormData.timeFormat = curTreeData.value.options.timeFormat
configFormData.validStartLine = curTreeData.value.options.validStartLine
}
const configFormRules = {
@ -333,7 +348,7 @@ const cancelConfig = () => {
const setAirBlowerConfig = () => {
const stringify = JSON.stringify({ fdrFormat: configFormData })
setConfigReq({
id: curTreeData.value.id,
options: stringify,
@ -415,9 +430,19 @@ const handleCheckChange = (data: any, state: boolean) => {
const index = selectPreviewTree.findIndex((item: string) => item === data.key)
selectPreviewTree.splice(index, 1)
}
initPreviewChart()
if(selectPreviewTree.length > 0){
initPreviewChart()
}else{
previewChartInstance && previewChartInstance.clear()
}
}
// const previewNodeClick = (data: any) => {
// if (selectPreviewTree.includes(data.key)) {
// previewTreeRef.value?.setChecked(data.key, false, false)
// }else{
// previewTreeRef.value?.setChecked(data.key, true, false)
// }
// }
let previewChartData: any = {}
let curSeries: any = []
let previewChartInstance: any = null
@ -433,6 +458,8 @@ const getRandomDarkColor = () => {
}
const createSeriresData = () => {
const seriesData: any = []
console.log(curSeries);
const curAttr = curSeries.map((item: any) => item.name)
selectPreviewTree.forEach((item: string, index: number) => {
if (curAttr.includes(item)) {