日志记录:请求联调
故障录波：添加配置回显
This commit is contained in:
高云鹏
parent
71a3e989b5
commit
c2c2334030
@ -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
|
||||
})
|
||||
}
|
||||
@ -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)
|
||||
}
|
||||
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) // 限制在0到127之间，以生成较深的颜色
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 = {
|
||||
@ -415,9 +430,19 @@ const handleCheckChange = (data: any, state: boolean) => {
|
||||
const index = selectPreviewTree.findIndex((item: string) => item === data.key)
|
||||
selectPreviewTree.splice(index, 1)
|
||||
}
|
||||
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)) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user