设备:量测添加加载中状态

故障:合并日志管理模块
单风机:修改显示字符
This commit is contained in:
高云鹏 2024-11-27 11:11:43 +08:00
parent 1f01735820
commit 96adbaf0f1
4 changed files with 324 additions and 159 deletions

View File

@ -209,7 +209,7 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.monthprodenergy }}</span>
</div>
<div>kWh</div>
<div>kWh</div>
<div>月发电量</div>
</div>
</div>
@ -221,7 +221,7 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.yearprodenergy }}</span>
</div>
<div>kWh</div>
<div>kWh</div>
<div>年发电量</div>
</div>
</div>
@ -233,7 +233,7 @@
<div>
<span class="content-number">{{ realTimeDataForSingle.ikwhoverall }}</span>
</div>
<div>kWh</div>
<div>kWh</div>
<div>总发电量</div>
</div>
</div>

View File

@ -69,7 +69,7 @@
</el-select>
</el-form-item>
</div>
<el-button type="primary" @click="getChartData">查询</el-button>
<el-button type="primary" @click="getChartData" :loading="loading">查询</el-button>
</div>
</el-form>
<div class="chartPart">
@ -301,6 +301,7 @@ watch(
}
)
const loading = ref(false)
const searchFormRef = ref<FormInstance>()
const lineChartVisible = ref(false)
const searchInfo = reactive({
@ -337,6 +338,7 @@ const shortcuts = [
const getChartData = () => {
searchFormRef.value?.validate((valid) => {
if (valid) {
loading.value = true
getRealValueRangeReq({
startTime: dayjs(seachOptions.datePickerValue[0]).valueOf(),
endTime: dayjs(seachOptions.datePickerValue[1]).valueOf(),
@ -482,6 +484,7 @@ const initChart = (data: { values: number[]; times: number[] }) => {
],
}
chartInstance.setOption(option)
loading.value = false
}
const closeLineChart = () => {

View File

@ -48,7 +48,7 @@
</div>
</el-header>
<el-main class="main">
<el-table :data="tableData">
<el-table :data="logTableData">
<el-table-column type="selection" width="55" />
<el-table-column label="文件名称" prop="name" align="center"></el-table-column>
<el-table-column label="修改时间" prop="lastModified" align="center" width="250"></el-table-column>
@ -56,8 +56,8 @@
<el-table-column label="操作" align="center" width="140">
<template #default="scope">
<div class="tableBtnPart">
<el-button text type="primary" @click="readFile(scope.row)">查看</el-button>
<el-button text type="danger" @click="downloadFile(scope.row)">下载</el-button>
<el-button text type="primary" @click="logReadFile(scope.row)">查看</el-button>
<el-button text type="danger" @click="logDownloadFile(scope.row)">下载</el-button>
</div>
</template>
</el-table-column>
@ -66,10 +66,10 @@
<el-footer class="footer">
<div class="footerPart">
<el-pagination
v-model:current-page="pageSetting.current"
v-model:page-size="pageSetting.pageSize"
:total="pageSetting.total"
:page-sizes="pageSetting.pageSizes"
v-model:current-page="logPageSetting.current"
v-model:page-size="logPageSetting.pageSize"
:total="logPageSetting.total"
:page-sizes="logPageSetting.pageSizes"
background
:pager-count="7"
layout="total,prev, pager, next, jumper,sizes"
@ -80,16 +80,16 @@
</el-container>
</el-container>
</div>
<el-dialog v-model="configDialogVisible" title="配置信息" width="500" @close="closeConfigDialog">
<el-form ref="configFormRef" :model="configFormData" label-width="120" :rules="configFormRules">
<el-dialog v-model="logConfigDialogVisible" title="配置信息" width="500" @close="closeConfigDialog">
<el-form ref="configFormRef" :model="logConfigFormData" label-width="120" :rules="configFormRules">
<el-form-item prop="timeFormat" label="时间格式">
<el-input v-model="configFormData.timeFormat"></el-input>
<el-input v-model="logConfigFormData.timeFormat"></el-input>
</el-form-item>
<el-form-item prop="delimiter" label="分隔符">
<el-input v-model="configFormData.delimiter"></el-input>
<el-input v-model="logConfigFormData.delimiter"></el-input>
</el-form-item>
<el-form-item prop="validStartLine" label="有效起始行数">
<el-input-number v-model="configFormData.validStartLine"></el-input-number>
<el-input-number v-model="logConfigFormData.validStartLine"></el-input-number>
</el-form-item>
</el-form>
<template #footer>
@ -258,18 +258,18 @@ const shortcuts = [
},
]
let originTableData = ref<tableItemData[]>([])
const tableData = computed(() => {
let data = originTableData.value
let logOriginTableData = ref<tableItemData[]>([])
const logTableData = computed(() => {
let data = logOriginTableData.value
if (searchData.fileName) {
const reg = new RegExp(searchData.fileName, 'i')
data = data.filter((item) => reg.test(item.name))
}
const res = data.slice((pageSetting.current - 1) * pageSetting.pageSize, pageSetting.current * pageSetting.pageSize)
pageSetting.total = res.length
const res = data.slice((logPageSetting.current - 1) * logPageSetting.pageSize, logPageSetting.current * logPageSetting.pageSize)
logPageSetting.total = res.length
return res
})
const pageSetting = reactive({
const logPageSetting = reactive({
current: 1,
pageSize: 20,
total: 0,
@ -287,30 +287,30 @@ const getListForAirBlower = () => {
getLogRecordListReq(data).then((res) => {
if (res.success) {
pageSetting.total = res.data.length
originTableData.value = res.data
logPageSetting.total = res.data.length
logOriginTableData.value = res.data
}
})
}
const configDialogVisible = ref(false)
const logConfigDialogVisible = ref(false)
const configFormRef = ref<FormInstance>()
const closeConfigDialog = () => {
configFormRef.value?.resetFields()
}
const configFormData = reactive({
const logConfigFormData = reactive({
timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
delimiter: ';',
validStartLine: 6,
})
const openConfigDialog = () => {
configDialogVisible.value = true
configFormData.delimiter = curTreeData.value.options.delimiter
configFormData.timeFormat = curTreeData.value.options.timeFormat
configFormData.validStartLine = curTreeData.value.options.validStartLine
logConfigDialogVisible.value = true
logConfigFormData.delimiter = curTreeData.value.options.delimiter
logConfigFormData.timeFormat = curTreeData.value.options.timeFormat
logConfigFormData.validStartLine = curTreeData.value.options.validStartLine
}
const configFormRules = {
@ -345,12 +345,12 @@ const submitConfig = () => {
})
}
const cancelConfig = () => {
configDialogVisible.value = false
logConfigDialogVisible.value = false
configFormRef.value?.resetFields()
}
const setAirBlowerConfig = () => {
const stringify = JSON.stringify({ plcFormat: configFormData })
const stringify = JSON.stringify({ plcFormat: logConfigFormData })
setConfigReq({
id: curTreeData.value.id,
@ -358,7 +358,7 @@ const setAirBlowerConfig = () => {
})
.then(() => {
ElMessage.success('配置成功')
configDialogVisible.value = false
logConfigDialogVisible.value = false
return
})
.then(() => {
@ -376,13 +376,13 @@ const setAirBlowerConfig = () => {
}
const previewFileDialogVisible = ref(false)
const readFile = (data: tableItemData) => {
const logReadFile = (data: tableItemData) => {
previewFileDialogVisible.value = true
getFileKeyEnum().finally(() => {
getFileData(data.path)
})
}
const downloadFile = (data: tableItemData) => {
const logDownloadFile = (data: tableItemData) => {
downloadFileReq({ url: data.path }).then((res) => {
const url = window.URL.createObjectURL(res.data)
const a = document.createElement('a')

View File

@ -48,7 +48,10 @@
</div>
</el-header>
<el-main class="main">
<el-table :data="tableData">
<el-tabs v-model="activeName" @tab-change="checkTab" class="tabs">
<el-tab-pane label="故障录波" name="malFunction" class="tabPane">
<div class="tableMain">
<el-table :data="tableData" class="tableClass">
<el-table-column type="selection" width="55" />
<el-table-column label="文件名称" prop="name" align="center"></el-table-column>
<el-table-column label="修改时间" prop="lastModified" align="center" width="250"></el-table-column>
@ -62,8 +65,7 @@
</template>
</el-table-column>
</el-table>
</el-main>
<el-footer class="footer">
</div>
<div class="footerPart">
<el-pagination
v-model:current-page="pageSetting.current"
@ -76,7 +78,39 @@
@change="changePageSetting"
></el-pagination>
</div>
</el-footer>
</el-tab-pane>
<el-tab-pane label="日志管理" name="logManage" class="tabPane">
<div class="tableMain">
<el-table :data="logTableData" class="tableClass">
<el-table-column type="selection" width="55" />
<el-table-column label="文件名称" prop="name" align="center"></el-table-column>
<el-table-column label="修改时间" prop="lastModified" align="center" width="250"></el-table-column>
<el-table-column label="文件大小" prop="size" align="center" width="120"></el-table-column>
<el-table-column label="操作" align="center" width="140">
<template #default="scope">
<div class="tableBtnPart">
<el-button text type="primary" @click="readFile(scope.row)">查看</el-button>
<el-button text type="danger" @click="downloadFile(scope.row)">下载</el-button>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="footerPart">
<el-pagination
v-model:current-page="logPageSetting.current"
v-model:page-size="logPageSetting.pageSize"
:total="logPageSetting.total"
:page-sizes="logPageSetting.pageSizes"
background
:pager-count="7"
layout="total,prev, pager, next, jumper,sizes"
@change="changePageSetting"
></el-pagination>
</div>
</el-tab-pane>
</el-tabs>
</el-main>
</el-container>
</el-container>
</div>
@ -140,10 +174,16 @@ 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 { getMalFunctionListReq, setConfigReq, previewFileReq, downloadFileReq, getFileKeyEnumsReq } from '/@/api/backend/malfunction/request'
import {
getLogRecordListReq,
setConfigReq as setLogConfigReq,
previewFileReq as previewLogFileReq,
downloadFileReq as downloadLogFileReq,
getFileKeyEnumsReq as getLogFileKeyEnumsReq,
} from '/@/api/backend/logRecord/request'
import { equipList } from '/@/api/backend/temperature/request'
import * as echarts from 'echarts'
import { tableItemData } from './type'
import { id } from 'element-plus/es/locales.mjs'
const defaultProps = {
children: 'children',
@ -221,7 +261,7 @@ const getTreeDataList = () => {
id: item.id,
model: item.model,
madeinFactory: item.madeinFactory,
options: item.options ? JSON.parse(item.options).fdrFormat : {},
options: item.options ? JSON.parse(item.options) : {},
}
})
originTreeChildData = data
@ -283,18 +323,29 @@ const pageSetting = reactive({
const changePageSetting = () => {}
const getListForAirBlower = () => {
console.log(activeName.value)
const data = {
deviceCode: curTreeData.value.code,
startTime: dayjs(searchData.date[0]).format('YYYY-MM'),
endTime: dayjs(searchData.date[1]).format('YYYY-MM'),
}
if (activeName.value === 'malFunction') {
getMalFunctionListReq(data).then((res) => {
if (res.success) {
pageSetting.total = res.data.length
originTableData.value = res.data
}
})
} else if (activeName.value === 'logManage') {
getLogRecordListReq(data).then((res) => {
if (res.success) {
logPageSetting.total = res.data.length
logOriginTableData.value = res.data
}
})
}
}
const configDialogVisible = ref(false)
@ -305,16 +356,22 @@ const closeConfigDialog = () => {
}
const configFormData = reactive({
timeFormat: 'yyyy-MM-dd-HH:mm:ss.SSS',
delimiter: ';',
validStartLine: 6,
timeFormat: '',
delimiter: '',
validStartLine: 4,
})
const openConfigDialog = () => {
configDialogVisible.value = true
configFormData.delimiter = curTreeData.value.options.delimiter
configFormData.timeFormat = curTreeData.value.options.timeFormat
configFormData.validStartLine = curTreeData.value.options.validStartLine
if (activeName.value === 'malFunction') {
configFormData.delimiter = curTreeData.value.options.fdrFormat.delimiter
configFormData.timeFormat = curTreeData.value.options.fdrFormat.timeFormat
configFormData.validStartLine = curTreeData.value.options.fdrFormat.validStartLine
} else if (activeName.value === 'logManage') {
configFormData.delimiter = curTreeData.value.options.plcFormat.delimiter
configFormData.timeFormat = curTreeData.value.options.plcFormat.timeFormat
configFormData.validStartLine = curTreeData.value.options.plcFormat.validStartLine
}
}
const configFormRules = {
@ -345,21 +402,6 @@ const submitConfig = () => {
configFormRef.value?.validate((valid) => {
if (valid) {
setAirBlowerConfig()
}
})
}
const cancelConfig = () => {
configDialogVisible.value = false
configFormRef.value?.resetFields()
}
const setAirBlowerConfig = () => {
const stringify = JSON.stringify({ fdrFormat: configFormData })
setConfigReq({
id: curTreeData.value.id,
options: stringify,
})
.then(() => {
ElMessage.success('配置成功')
configDialogVisible.value = false
@ -374,7 +416,42 @@ const setAirBlowerConfig = () => {
})
})
.catch((err) => {
ElMessage.error('配置失败')
ElMessage.error(err)
})
}
})
}
const cancelConfig = () => {
configDialogVisible.value = false
configFormRef.value?.resetFields()
}
const setAirBlowerConfig = () => {
return new Promise((resolve) => {
const stringify = JSON.stringify({ fdrFormat: configFormData })
if (activeName.value === 'malFunction') {
setConfigReq({
id: curTreeData.value.id,
options: stringify,
})
.then(() => {
resolve(true)
})
.catch(() => {
throw '配置失败'
})
} else if (activeName.value === 'logManage') {
setLogConfigReq({
id: curTreeData.value.id,
options: stringify,
})
.then(() => {
resolve(true)
})
.catch(() => {
throw '配置失败'
})
}
})
}
@ -382,11 +459,36 @@ const previewFileDialogVisible = ref(false)
const readFile = (data: tableItemData) => {
previewFileDialogVisible.value = true
getFileKeyEnum().finally(() => {
getFileData(data.path)
getFileData(data.path).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 if (item === 'TimeStampUTC') {
previewChartData.TimeStamp = previewChartData.TimeStampUTC.map((item: any) => {
return dayjs(item).format('YYYY-MM-DD HH:mm:ss')
})
} else {
data.push({
label: fileKeyEnums[item],
key: item,
isLeaf: true,
})
}
})
previewTreeData.value = data
originPreviewTreeData = data
previewTreeLoading.value = false
})
})
}
const downloadFile = (data: tableItemData) => {
downloadFileReq({ url: data.path }).then((res) => {
runDownLoad(data)
.then((res) => {
const url = window.URL.createObjectURL(res.data)
const a = document.createElement('a')
a.style.display = 'none'
@ -397,6 +499,18 @@ const downloadFile = (data: tableItemData) => {
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
})
.catch((err) => {
ElMessage.error(err)
})
}
const runDownLoad = (data: tableItemData) => {
if (activeName.value === 'malFunction') {
return downloadFileReq({ url: data.path })
} else if (activeName.value === 'logManage') {
return downloadLogFileReq({ url: data.path })
}
return Promise.reject()
}
const closePreviewFileDialog = () => {
@ -598,31 +712,18 @@ const initPreviewChart = () => {
const getFileData = (url: string) => {
previewTreeLoading.value = true
previewFileReq({
if (activeName.value === 'malFunction') {
return 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: fileKeyEnums[item],
key: item,
isLeaf: true,
} else if (activeName.value === 'logManage') {
return previewLogFileReq({
deviceCode: curTreeData.value.code,
url: url,
})
}
})
previewTreeData.value = data
originPreviewTreeData = data
previewTreeLoading.value = false
})
return Promise.reject()
}
const fileKeyEnums: any = {}
@ -630,6 +731,7 @@ const fileKeyUnit: any = {}
const getFileKeyEnum = () => {
return new Promise((resolve, reject) => {
if (activeName.value === 'malFunction') {
getFileKeyEnumsReq({
madeinfactory: curTreeData.value.madeinFactory,
model: curTreeData.value.model,
@ -646,7 +748,48 @@ const getFileKeyEnum = () => {
.catch(() => {
reject(false)
})
} else if (activeName.value === 'logManage') {
getLogFileKeyEnumsReq({
madeinfactory: curTreeData.value.madeinFactory,
model: curTreeData.value.model,
})
.then((res) => {
if (res.success) {
res.data.forEach((item: any) => {
fileKeyEnums[item.variable] = item?.description ?? item.variable
fileKeyUnit[item.variable] = item?.unit ?? ''
})
resolve(true)
}
})
.catch(() => {
reject(false)
})
}
})
}
let logOriginTableData = ref<tableItemData[]>([])
const logTableData = computed(() => {
let data = logOriginTableData.value
if (searchData.fileName) {
const reg = new RegExp(searchData.fileName, 'i')
data = data.filter((item) => reg.test(item.name))
}
const res = data.slice((logPageSetting.current - 1) * logPageSetting.pageSize, logPageSetting.current * logPageSetting.pageSize)
logPageSetting.total = res.length
return res
})
const logPageSetting = reactive({
current: 1,
pageSize: 20,
total: 0,
pageSizes: [20, 50, 100],
})
const activeName = ref<'malFunction' | 'logManage'>('malFunction')
const checkTab = () => {
getListForAirBlower()
}
onMounted(() => {
@ -739,6 +882,24 @@ onUnmounted(() => {
}
.main {
width: 100%;
height: calc(100% - 80px);
.tabs {
width: 100%;
height: 100%;
:deep(.el-tabs__content) {
width: 100%;
height: calc(100% - 60px);
.tabPane {
width: 100%;
height: 100%;
}
}
.tableMain {
width: 100%;
height: calc(100% - 32px);
.tableClass {
width: 100%;
height: 100%;
.tableBtnPart {
display: flex;
justify-content: center;
@ -748,7 +909,6 @@ onUnmounted(() => {
}
}
}
.footer {
.footerPart {
display: flex;
justify-content: right;
@ -756,6 +916,8 @@ onUnmounted(() => {
}
}
}
}
}
.el-input-number {
width: 100%;
}