联调周期监测

This commit is contained in:
guanj
2026-07-08 14:37:19 +08:00
parent 83a827ba5b
commit 88e9812d5f
3 changed files with 219 additions and 228 deletions

View File

@@ -0,0 +1,174 @@
<template>
<el-dialog
:title="dialogMode === 'detail' ? '定检详情' : '上传周期检测报告'"
:width="dialogMode === 'detail' ? '1000px' : '600px'"
v-model="dialogShow"
v-if="dialogShow"
>
<!-- 详情区域 -->
<div v-if="dialogMode === 'detail'">
</div>
<!-- 上传报告表单区域 -->
<div v-if="dialogMode === 'upload'">
<el-form ref="uploadFormRef" :model="uploadForm" :rules="uploadRules" label-width="120px">
<el-form-item label="定检日期" prop="thisCheckTime">
<el-date-picker
v-model="uploadForm.thisCheckTime"
type="date"
placeholder="请选择定检日期"
@change="calcNextCheckTime"
style="width:100%"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="下次定检日期" prop="nextCheckTime">
<el-date-picker
v-model="uploadForm.nextCheckTime"
type="date"
placeholder="请选择下次定检日期"
style="width:100%"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item class="uploadFile" for="-" label="设备检测报告:" prop="checkUrl">
<el-upload
v-model:file-list="uploadForm.checkUrl"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-change="(file) => choose(file, 'checkUrl')"
:auto-upload="false"
:on-remove="removeFile('checkUrl')"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
</el-form>
</div>
<template #footer>
<el-button v-if="dialogMode === 'upload'" @click="dialogShow = false">取消</el-button>
<el-button
v-if="dialogMode === 'upload'"
type="primary"
:loading="submitLoading"
@click="submitUploadReport"
>
提交
</el-button>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { UploadFile } from 'element-plus'
import { ElMessage } from 'element-plus'
import { uploadFile } from '@/api/system-boot/file'
import { userCheckUpload } from '@/api/device-boot/device'
const emit = defineEmits(['onSubmit'])
const acceptType = '.pdf,.docx'
const detailId = ref('')
const dialogShow = ref(false)
const dialogMode = ref<'detail' | 'upload'>('detail')
const submitLoading = ref(false)
const uploadFormRef = ref()
const uploadForm = reactive({
thisCheckTime: '',
nextCheckTime: '',
checkUrl: [] as any[],
devId: '',
objId: ''
})
const checkUrlFile = ref('')
const calcNextCheckTime = (dateVal: string) => {
if (!dateVal) {
uploadForm.nextCheckTime = ''
return
}
const date = new Date(dateVal)
date.setFullYear(date.getFullYear() + 3)
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const d = String(date.getDate()).padStart(2, '0')
uploadForm.nextCheckTime = `${y}-${m}-${d}`
}
const uploadRules = reactive({
thisCheckTime: [{ required: true, message: '请选择定检日期', trigger: 'change' }],
checkUrl: [{ required: true, message: '请上传设备检测报告', trigger: 'change' }]
})
const submitUploadReport = async () => {
await uploadFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return
if (!uploadForm.checkUrl.length) return ElMessage.warning('请先上传检测报告文件')
submitLoading.value = true
try {
const params = {
devId: uploadForm.devId,
objId: uploadForm.objId,
thisCheckTime: uploadForm.thisCheckTime,
nextCheckTime: uploadForm.nextCheckTime,
checkUrl: checkUrlFile.value
}
const res = await userCheckUpload(params)
if (res.code === 'A0000') {
ElMessage.success('提交成功')
dialogShow.value = false
emit('onSubmit')
}
} catch (err: any) {
ElMessage.error(err.msg || '提交失败')
} finally {
submitLoading.value = false
}
})
}
const openUpload = (row: any) => {
console.log("🚀 ~ openUpload ~ row:", row)
uploadForm.thisCheckTime = ''
uploadForm.nextCheckTime = ''
uploadForm.checkUrl = []
uploadForm.devId = row.devId
uploadForm.objId = row.objId
checkUrlFile.value = ''
uploadFormRef.value?.clearValidate()
dialogMode.value = 'upload'
dialogShow.value = true
}
const openDetail = (id: string) => {
detailId.value = id
dialogMode.value = 'detail'
dialogShow.value = true
}
const removeFile = (val: string) => {
return (_file: UploadFile, fileList: UploadFile[]) => {
if (val === 'checkUrl') {
checkUrlFile.value = ''
}
uploadForm[val] = fileList
}
}
const choose = (e: any, field: string) => {
uploadFile(e.raw, '/supervision/').then(res => {
if (field === 'checkUrl') {
checkUrlFile.value = res.data.name
}
})
}
defineExpose({ openUpload, openDetail })
</script>

View File

@@ -34,223 +34,37 @@
</el-form-item>
</template>
<template #operation>
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>-->
<!-- <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>-->
</template>
</TableHeader>
<Table ref="tableRef" />
<Table ref="tableRef" @cell-click="cellClickEvent" />
<!-- 共用dialogShow弹窗区分详情/上传报告 -->
<el-dialog
:title="dialogMode === 'detail' ? '定检详情' : '上传周期检测报告'"
:width="dialogMode === 'detail' ? '1000px' : '600px'"
v-model="dialogShow"
v-if="dialogShow"
>
<!-- 详情区域 -->
<div v-if="dialogMode === 'detail'">
</div>
<!-- 上传报告表单区域 -->
<div v-if="dialogMode === 'upload'">
<el-form ref="uploadFormRef" :model="uploadForm" label-width="120px">
<el-form-item label="定检日期" prop="thisCheckTime" rules="[{ required: true, message: '请选择定检日期', trigger: 'change' }]">
<el-date-picker
v-model="uploadForm.thisCheckTime"
type="date"
placeholder="请选择定检日期"
@change="calcNextCheckTime"
style="width:100%"
value-format="YYYY-MM-DD"
/>
</el-form-item>
<el-form-item label="下次定检日期" prop="nextCheckTime">
<el-date-picker v-model="uploadForm.nextCheckTime" type="date" style="width:100%" value-format="YYYY-MM-DD" />
</el-form-item>
<el-form-item
class="uploadFile"
for="-"
label="设备检测报告:"
prop="checkUrl"
>
<el-upload
v-model:file-list="uploadForm.checkUrl"
ref="uploadRef"
action=""
:accept="acceptType"
:limit="1"
:on-change="(file) => choose(file, 'checkUrl')"
:auto-upload="false"
:on-remove="removeFile('checkUrl')"
>
<template #trigger>
<el-button type="primary" >上传文件</el-button>
</template>
</el-upload>
</el-form-item>
</el-form>
</div>
<!-- footer 放到所有v-if外层解决编译报错 -->
<template #footer>
<el-button v-if="dialogMode === 'upload'" @click="dialogShow = false">取消</el-button>
<el-button v-if="dialogMode === 'upload'" type="primary" @click="submitUploadReport">提交</el-button>
</template>
</el-dialog>
<checkForm ref="checkFormRef" @onSubmit="tableStore.index()" />
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, reactive, watch } from 'vue'
import { ref, onMounted, provide, watch } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import type { UploadFile, UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import TableHeader from '@/components/table/header/index.vue'
import { genFileId, ElMessage } from 'element-plus'
import checkForm from './components/form.vue'
import { useDictData } from '@/stores/dictData'
import { useAdminInfo } from '@/stores/adminInfo'
import { uploadFile } from '@/api/system-boot/file'
import { userCheckUpload } from '@/api/device-boot/device'
const acceptType = '.pdf,.docx'
import { download } from '@/utils/fileDownLoad'
defineOptions({
name: 'terminal/terminaCkeck'
})
// 公共依赖
const TableHeaderRef = ref()
const checkFormRef = ref()
const dictData = useDictData()
const adminInfo = useAdminInfo()
// 地区字典(和你原有地市下拉同源)
const areaOptionList = dictData.getBasicData('jibei_area')
// 详情弹窗
const detailId = ref('')
const dialogShow = ref(false)
// 弹窗模式detail=详情 upload=上传报告
const dialogMode = ref<'detail' | 'upload'>('detail')
const submitLoading = ref()
// ========== 上传报告表单补充变量 ==========
const uploadFormRef = ref()
const fileList = ref<any[]>([])
const uploadForm = reactive({
thisCheckTime: '',
nextCheckTime: '',
checkUrl: [],
devId:'',
objId:''
})
// 电能质量检测报告
const checkUrlFile = ref('')
// 选择定检日期自动往后推3年
const calcNextCheckTime = (dateVal: string) => {
if (!dateVal) {
uploadForm.nextCheckTime = ''
return
}
const date = new Date(dateVal)
date.setFullYear(date.getFullYear() + 3)
// 格式化为 YYYY-MM-DD 字符串
const y = date.getFullYear()
const m = String(date.getMonth() + 1).padStart(2, '0')
const d = String(date.getDate()).padStart(2, '0')
uploadForm.nextCheckTime = `${y}-${m}-${d}`
}
// 表单校验
const uploadRules = reactive({
thisCheckTime: [{ required: true, message: '请选择定检日期', trigger: 'change' }],
checkUrl: [{ required: true, message: '请上传设备检测报告', trigger: 'change' }]
})
const resetForm = () => {
uploadForm.thisCheckTime = ''
uploadForm.nextCheckTime = ''
uploadForm.checkUrl = []
}
const submitUploadReport = async () => {
await uploadFormRef.value?.validate(async (valid: boolean) => {
if (!valid) return
if (!uploadForm.checkUrl) return ElMessage.warning('请先上传检测报告文件')
submitLoading.value = true
try {
const params = {
devId: uploadForm.devId,
objId: uploadForm.objId,
thisCheckTime: uploadForm.thisCheckTime,
nextCheckTime: uploadForm.nextCheckTime,
checkUrl: checkUrlFile.value
}
const res = await userCheckUpload(params)
if (res.code === 'A0000') {
ElMessage.success('提交成功')
dialogShow.value = false
// 刷新表格
tableStore.index()
}
} catch (err: any) {
ElMessage.error(err.msg || '提交失败')
} finally {
submitLoading.value = false
}
})
}
// 打开上传弹窗,重置表单
const openUploadDialog = (row: any) => {
uploadForm.thisCheckTime = ''
uploadForm.nextCheckTime = ''
uploadForm.checkUrl = []
uploadForm.devId = row.devId
uploadForm.objId = row.objId
fileList.value = []
uploadFormRef.value?.clearValidate()
dialogMode.value = 'upload'
dialogShow.value = true
}
// 处理上传文件回显
const fileRaw = (row: any, key: string) => {
const fileFields = ['checkUrl', 'assessUrl']
for (const field of fileFields) {
const filePath = row[key]?.[field] ?? row[field]
if (filePath != null && filePath.length > 0) {
uploadForm[field] = [{ name: filePath.split('/')[2] }]
} else {
uploadForm[field] = []
}
}
uploadFormRef.value = row[key]?.checkUrl ?? row.checkUrl ?? ''
}
//移除文件上传
const removeFile = (val: string) => {
return (_file: UploadFile, fileList: UploadFile[]) => {
if (val === 'checkUrl') {
checkUrlFile.value = ''
}
uploadForm[val] = fileList
}
}
const choose = (e: any, field: string) => {
uploadFile(e.raw, '/supervision/').then(res => {
if (field === 'checkUrl') {
checkUrlFile.value = res.data.name
}
})
}
// ==========================================
// TableStore 表格配置(仅修改字段映射,其余不动)
const tableStore = new TableStore({
url: '/device-boot/alarm/terminalCheckPage',
@@ -269,10 +83,10 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'areaName', title: '地市', minWidth: 80 },
{ field: 'bdName', title: '变电站', minWidth: 110 },
{ field: 'objName', title: '监测对象', minWidth: 140 },
{ field: 'devName', title: '终端名称', minWidth: 150 },
{ field: 'areaName', title: '所在地市', minWidth: 100 },
{ field: 'bdName', title: '变电站', minWidth: 150 },
{ field: 'objName', title: '监测对象', minWidth: 180 },
{ field: 'devName', title: '终端名称', minWidth: 180 },
{ field: 'loginDate', title: '投运时间', minWidth: 120 },
{ field: 'thisCheckTime', title: '本次定检时间', minWidth: 120 },
{ field: 'nextCheckTime', title: '下次定检时间', minWidth: 120 },
@@ -299,7 +113,7 @@ const tableStore = new TableStore({
{
field: 'overdueDay',
title: '逾期天数',
minWidth: 70,
minWidth: 80,
render: 'customRender',
customRender: props => {
const val = props.renderValue
@@ -317,8 +131,16 @@ const tableStore = new TableStore({
return h('span', { style: { color, fontWeight: 'bold' } }, text)
}
},
{ field: 'checkUrl', title: '周期检测报告', minWidth: 120 },
{
field: 'checkUrl',
title: '周期检测报告',
minWidth: 160,
render: 'customRender',
customRender: props => {
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
return val ? h('span', { style: { color: 'var(--el-color-primary)', cursor: 'pointer' } }, val) : '/'
}
},
// 操作列固定右侧
{
title: '操作',
@@ -326,16 +148,16 @@ const tableStore = new TableStore({
minWidth: 160,
render: 'buttons',
buttons: [
{
name: 'detail',
title: '详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
openDetail(row.devId)
}
},
// {
// name: 'detail',
// title: '详情',
// type: 'primary',
// icon: 'el-icon-EditPen',
// render: 'basicButton',
// click: row => {
// checkFormRef.value.openDetail(row.devId)
// }
// },
{
name: 'edit',
title: '上传周期检测报告',
@@ -343,7 +165,7 @@ const tableStore = new TableStore({
icon: 'el-icon-Open',
render: 'basicButton',
click: row => {
openUploadDialog(row)
checkFormRef.value.openUpload(row)
}
}
]
@@ -361,14 +183,6 @@ tableStore.table.params.substation = ''
tableStore.table.params.terminalName = ''
tableStore.table.params.orgId = adminInfo.$state.deptId
// 打开详情弹窗
const openDetail = (id: string) => {
detailId.value = id
dialogShow.value = true
}
// 路由跳转带ID回显编辑复用你原有路由传参逻辑
const props = defineProps({
id: { type: String, default: 'null' }
@@ -386,13 +200,16 @@ watch(
},
{ immediate: true }
)
// 点击行
const cellClickEvent = ({ row, column }: any) => {
if (column.field == 'checkUrl') {
row.checkUrl ? download(row.checkUrl) : ''
}
}
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
</script>
<style scoped>
</style>
<style scoped></style>

View File

@@ -89,13 +89,13 @@ const tableStore = new TableStore({
return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
}
},
{ field: 'city', title: '所在地市', minWidth: 80 },
{ field: 'city', title: '所在地市', minWidth: 100 },
/* { field: 'substation', title: '厂站名称', minWidth: 100 },*/
{ field: 'projectName', title: '项目名称', minWidth: 150 },
{
field: 'userType',
title: '用户性质',
minWidth: 120,
minWidth: 180,
formatter: (obj: any) => {
const userType = obj.row.userType
return getUserTypeName(userType)
@@ -104,11 +104,11 @@ const tableStore = new TableStore({
// { field: 'responsibleDepartment', title: '归口管理部门', minWidth: 130 },
{ field: 'ratePower', title: '装机容量(MW)', minWidth: 80 },
{ field: 'stationId', title: '所属电站', minWidth: 100 },
{ field: 'stationId', title: '所属电站', minWidth: 150 },
{
field: 'checkUrl',
title: '电能质量设备检测报告',
minWidth: 170,
minWidth: 160,
render: 'customRender',
customRender: props => {
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''
@@ -118,7 +118,7 @@ const tableStore = new TableStore({
{
field: 'assessUrl',
title: '电能质量评估报告',
minWidth: 170,
minWidth: 160,
render: 'customRender',
customRender: props => {
const val = props.renderValue?.replace(/^.*?\/(.*?)\//, '') || ''