添加 终端周期检测 页面

This commit is contained in:
GGJ
2024-06-13 18:41:01 +08:00
parent 2c66e096e7
commit f15f529842
6 changed files with 540 additions and 1 deletions

View File

@@ -0,0 +1,45 @@
import createAxios from '@/utils/request'
/**
* 重新发起
*/
export const reload = (data: any) => {
return createAxios({
url: '/supervision-boot/checkDevice/reload',
method: 'POST',
data: data
})
}
/**
* 提交检测报告
*/
export const submitDevice = (data: any) => {
return createAxios({
url: '/supervision-boot/checkDevice/submit',
method: 'POST',
data: data
})
}
/**
* 根据id查询详情
*/
export const getInfoById = (data: any) => {
return createAxios({
url: '/supervision-boot/checkDevice/getInfoById',
method: 'POST',
params: data
})
}
/**
* 根据id查询详情
*/
export const cancel = (data: any) => {
return createAxios({
url: '/supervision-boot/checkDevice/cancel',
method: 'POST',
data: data
})
}

View File

@@ -28,7 +28,7 @@
<!-- tag -->
<div v-if="field.render == 'tag' && fieldValue !== ''">
<el-tag :type="getTagType(fieldValue, field.custom)" size="small">
<el-tag :type="getTagType(fieldValue, field.custom) || 'primary'" size="small">
{{ field.replaceValue ? field.replaceValue[fieldValue] : fieldValue }}
</el-tag>
</div>

View File

@@ -0,0 +1,118 @@
<template>
<div class="default-main">
<!-- <h1>详细信息回显</h1>-->
<el-descriptions :column="2" border>
<el-descriptions-item label="变电站">
{{ detailData?.substation }}
</el-descriptions-item>
<el-descriptions-item label="供电公司">
{{ detailData?.dept }}
</el-descriptions-item>
<el-descriptions-item label="终端名称">
{{ detailData?.deviceName }}
</el-descriptions-item>
<el-descriptions-item label="逾期天数">
<span
:style="{ color: detailData?.overdueDay > 10 ? 'red' : detailData?.overdueDay > 3 ? 'yellow' : '' }"
>
{{ detailData?.overdueDay }}
</span>
</el-descriptions-item>
<el-descriptions-item label="流程状态">
<el-tag :type="getDeviceStatusType(detailData?.status)">
{{ getDeviceStatus(detailData?.status) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="文件">
<el-icon>
<Link />
</el-icon>
<a :href="detailData.reportPaths?.url">
{{ detailData.reportPaths?.fileName }}
</a>
<span @click="detailData.reportPaths?.fileName">预览</span>
</el-descriptions-item>
<el-descriptions-item label="描述">
{{ detailData?.description }}
</el-descriptions-item>
</el-descriptions>
</div>
</template>
<script setup lang="ts">
import { onMounted, ref } from 'vue'
defineOptions({ name: 'QuitRunningDeviceDetail' })
import { propTypes } from '@/utils/propTypes'
// import { querySurveyDetail } from '@/api/process-boot/generalTest'
import { getInfoById } from '@/api/supervision-boot/cycleDetection/index'
import { getFileNameAndFilePath } from '@/api/system-boot/file'
import { useDictData } from '@/stores/dictData'
import { Link } from '@element-plus/icons-vue'
const { query } = useRoute() // 查询参数
const openFile = (name: any) => {
window.open(window.location.origin + '/#/previewFile?' + name)
}
const props = defineProps({
id: propTypes.string.def(undefined)
})
const dictData = useDictData()
const detailLoading = ref(false) // 表单的加载中
const detailData: any = ref({}) // 详情数据
const levelList = dictData.getBasicData('Dev_Voltage_Stand')
const aList: any = ref([]) // 详情数据
const queryId = query.id // 从 URL 传递过来的 id 编号
/** 获得数据 */
const getInfo = async () => {
detailLoading.value = true
try {
await getInfoById({ id: props.id || queryId }).then(res => {
detailData.value = res.data
})
await getFileNameAndFilePath({ filePath: detailData.value.checkFilePath }).then((res: any) => {
detailData.value.reportPaths = res.data
})
} finally {
detailLoading.value = false
}
}
const getDeviceStatus = (status: number) => {
if (status === 1) {
return '审批中'
}
if (status === 2) {
return '审批通过'
}
if (status === 3) {
return '审批不通过'
}
if (status === 4) {
return '已取消'
}
return '审批通过'
}
const getDeviceStatusType = (status: number) => {
if (status === 1) {
return 'primary'
}
if (status === 2) {
return 'success'
}
if (status === 3) {
return 'danger'
}
if (status === 4) {
return 'warning'
}
return 'success'
}
defineExpose({ open: getInfo }) // 提供 open 方法,用于打开弹窗
/** 初始化 **/
onMounted(() => {
getInfo()
})
</script>

View File

@@ -0,0 +1,148 @@
<template>
<el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" :title="title" width="550px" top="20vh">
<el-form :inline="false" :model="form" label-width="120px" :rules="rules" ref="formRef">
<el-form-item for="-" label="报告文件:" class="uploadFile" prop="reportPath">
<el-upload
v-model:file-list="form.reportPath"
ref="uploadRef"
action=""
accept=""
:limit="1"
:on-exceed="handleExceed"
:on-change="choose"
:auto-upload="false"
:on-remove="removeFile"
>
<template #trigger>
<el-button type="primary">上传文件</el-button>
</template>
</el-upload>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input
type="textarea"
clearable
:autosize="{ minRows: 2, maxRows: 4 }"
placeholder="请输入描述"
v-model="form.description"
></el-input>
</el-form-item>
</el-form>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="submit">确认</el-button>
</span>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, inject } from 'vue'
import { genFileId, ElMessage } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
import { uploadFile } from '@/api/system-boot/file'
import { reload, submitDevice } from '@/api/supervision-boot/cycleDetection/index'
const emits = defineEmits(['onSubmit'])
//下拉数据源
const title = ref('')
const formRef = ref()
const reportPath = ref('')
const dialogVisible = ref(false)
// 注意不要和表单ref的命名冲突
const form: any = ref({
id: '',
reportPath: [],
description: ''
})
//form表单校验规则
const rules = {
reportPath: [{ required: true, message: '请上传文件', trigger: 'change' }],
description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
}
const open = async (text: string, tempData?: any) => {
title.value = text
if (tempData) {
form.value.id = tempData.id
form.value.status = tempData.status
if (tempData.status == null) {
form.value.reportPath = []
form.value.description = ''
} else {
form.value.reportPath = [{ name: tempData.checkFilePath.split('/')[2] }]
form.value.description = tempData.description
}
}
dialogVisible.value = true
}
/**
* 提交用户表单数据
*/
const submit = () => {
formRef.value.validate(async (valid: any) => {
if (valid) {
if (form.value.status == null) {
submitDevice({ ...form.value, reportPath: reportPath.value }).then(res => {
ElMessage({
message: '提交成功!',
type: 'success'
})
dialogVisible.value = false
emits('onSubmit')
})
} else {
reload({ ...form.value, reportPath: reportPath.value }).then(res => {
ElMessage({
message: '提交成功!',
type: 'success'
})
dialogVisible.value = false
emits('onSubmit')
})
}
}
})
}
// 上传报告
const uploadRef = ref()
const handleExceed: UploadProps['onExceed'] = files => {
uploadRef.value!.clearFiles()
const file = files[0] as UploadRawFile
file.uid = genFileId()
uploadRef.value!.handleStart(file)
}
const choose = (e: any) => {
uploadFile(e.raw, '/supervision/').then(res => {
reportPath.value = res.data.name
// reportPath.value = '测试aaa'
})
}
//移除文件上传
const removeFile = (file: any, uploadFiles: any) => {
console.log(file, uploadFiles)
}
defineExpose({ open })
</script>
<style scoped lang="scss">
.el-upload-list__item {
transition: none !important;
}
.el-select {
min-width: 180px;
}
::v-deep .el-tree-node__children > div {
display: block !important;
}
</style>

View File

@@ -0,0 +1,224 @@
<!---终端入网检测-->
<template>
<TableHeader area ref="TableHeaderRef">
<template #select>
<el-form-item label="流程状态">
<el-select v-model="tableStore.table.params.status" clearable placeholder="请选择流程状态">
<el-option
v-for="item in statusSelect"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端名称">
<el-input
v-model="tableStore.table.params.searchValue"
placeholder="请输入终端名称"
clearable
></el-input>
</el-form-item>
</template>
</TableHeader>
<Table ref="tableRef" />
<Form ref="FormRef" @onSubmit="tableStore.index()" />
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import TableStore from '@/utils/tableStore'
import { ElMessage, ElMessageBox } from 'element-plus'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useRouter } from 'vue-router'
import { useDictData } from '@/stores/dictData'
import Form from './form.vue'
import { cancel } from '@/api/supervision-boot/cycleDetection/index'
import { cancelMointorPointTempLinedebug } from '@/api/supervision-boot/jointDebugList/index'
import { useAdminInfo } from '@/stores/adminInfo'
//获取登陆用户姓名和部门
const adminInfo = useAdminInfo()
const dictData = useDictData()
const { push, options, currentRoute } = useRouter()
const flag = ref(false)
const TableHeaderRef = ref()
const tableRef = ref()
const FormRef = ref()
const statusSelect = dictData.statusSelect()
//申请联调
const debugForms = ref()
const tableStore = new TableStore({
url: '/supervision-boot/checkDevice/list',
publicHeight: 65,
method: 'POST',
column: [
{ title: '序号', type: 'seq', width: 80 },
{ field: 'substation', title: '变电站' },
{ field: 'dept', title: '供电公司' },
{
field: 'deviceName',
title: '终端名称'
},
{
field: 'overdueDay',
title: '逾期天数',
type: 'html',
formatter: (row: any) => {
return `<span style='color: ${
row.row.overdueDay > 10 ? 'red' : row.row.overdueDay > 3 ? 'yellow' : ''
};text-decoration: none'>${row.row.overdueDay}</span>`
}
},
{
field: 'status',
title: '流程状态',
minWidth: 100,
render: 'tag',
custom: {
1: 'primary',
2: 'success',
3: 'danger',
4: 'warning',
5: 'primary'
},
replaceValue: {
1: '审批中',
2: '审批通过',
3: '审批不通过',
4: '已取消',
5: '同步台账成功',
null: '/'
}
},
{
title: '操作',
fixed: 'right',
render: 'buttons',
buttons: [
{
name: 'productSetting',
title: '流程详情',
type: 'primary',
icon: 'el-icon-EditPen',
render: 'basicButton',
click: row => {
flag.value = true
handleAudit(row.processInstanceId, row.historyInstanceId)
},
disabled: row => {
return !row.processInstanceId
}
},
{
name: 'edit',
title: '报告上传',
type: 'primary',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status != null
},
click: row => {
FormRef.value.open('报告上次', row)
}
},
{
name: 'edit',
title: '重新发起',
type: 'warning',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return !(row.status == 3 || row.status == 4)
},
click: row => {
FormRef.value.open('重新发起', row)
}
},
{
name: 'cancel',
title: '取消',
type: 'danger',
icon: 'el-icon-Open',
render: 'basicButton',
disabled: row => {
return row.status != 1
},
click: async row => {
// cancelLeave(row)
const { value } = await ElMessageBox.prompt('请输入取消原因', '取消流程', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /^[\s\S]*.*\S[\s\S]*$/, // 判断非空,且非空格
inputErrorMessage: '取消原因不能为空'
})
// 发起取消
let data = {
id: row.id,
processInstanceId: row.processInstanceId,
reason: value
}
await cancel(data)
ElMessage.success('取消成功')
// 加载数据
tableStore.index()
}
}
]
}
],
beforeSearchFun: () => {
tableStore.table.params.deptId = tableStore.table.params.deptIndex
tableStore.table.params.statveList = [2]
// tableStore.table.params.relationUserName = tableStore.table.params.userName
}
})
tableStore.table.params.status = ''
tableStore.table.params.searchValue = ''
provide('tableStore', tableStore)
onMounted(() => {
tableStore.index()
})
/** 处理审批按钮 */
const handleAudit = (instanceId: any, historyInstanceId: any) => {
push({
name: 'BpmProcessInstanceDetail',
state: {
id: instanceId,
historyInstanceId
}
})
}
const addFormModel = () => {}
watch(
() => currentRoute.value.path,
() => {
if (flag.value && options.history.state.forward?.split('/')[1] == 'bpm') {
tableStore.index()
flag.value = false
}
},
{
deep: true
}
)
</script>
<style scoped lang="scss">
:deep(.el-upload-list__item) {
width: 400px;
}
::v-deep .el-input__wrapper {
// width: 200px !important;
}
</style>

View File

@@ -10,6 +10,9 @@
<el-tab-pane label="监测点联调列表" name="3">
<jointDebugList v-if="activeName == '3'" />
</el-tab-pane>
<el-tab-pane label="终端周期检测" name="4">
<cycleDetection v-if="activeName == '4'"/>
</el-tab-pane>
</el-tabs>
</div>
</template>
@@ -20,6 +23,7 @@ import { mainHeight } from '@/utils/layout'
import terminal from './components/terminainal/index.vue'
import monitorpoint from './components/monitorpoint/index.vue'
import jointDebugList from './components/jointDebugList/index.vue'
import cycleDetection from './components/cycleDetection/index.vue'
defineOptions({
name: 'terminalNetwotk'
})