添加周期
This commit is contained in:
252
src/views/pqs/business/terminal/terminaCkeck/index.vue
Normal file
252
src/views/pqs/business/terminal/terminaCkeck/index.vue
Normal file
@@ -0,0 +1,252 @@
|
||||
<template>
|
||||
<div class="default-main">
|
||||
<TableHeader ref="TableHeaderRef">
|
||||
<template #select>
|
||||
<el-form-item label="地市">
|
||||
<el-select v-model="tableStore.table.params.city" clearable placeholder="请选择地市">
|
||||
<el-option
|
||||
v-for="item in areaOptionList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="变电站">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入变电站"
|
||||
v-model="tableStore.table.params.substation"
|
||||
clearable
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端名称">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
placeholder="请输入终端名称"
|
||||
v-model="tableStore.table.params.terminalName"
|
||||
clearable
|
||||
maxlength="32"
|
||||
show-word-limit
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template #operation>
|
||||
<el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增定检记录</el-button>
|
||||
<el-button icon="el-icon-Delete" type="primary" @click="deleteEven">批量删除</el-button>
|
||||
</template>
|
||||
</TableHeader>
|
||||
<Table ref="tableRef" />
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<el-dialog title="定检详情" width="1000px" v-model="dialogShow" v-if="dialogShow">
|
||||
|
||||
</el-dialog>
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, onMounted, provide, reactive, watch } from 'vue'
|
||||
import TableStore from '@/utils/tableStore'
|
||||
import Table from '@/components/table/index.vue'
|
||||
import TableHeader from '@/components/table/header/index.vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { useDictData } from '@/stores/dictData'
|
||||
import { useAdminInfo } from '@/stores/adminInfo'
|
||||
import { terminalCheckPage } from '@/api/device-boot/device'
|
||||
|
||||
defineOptions({
|
||||
name: 'BusinessAdministrator/PowerQualityCheck'
|
||||
})
|
||||
|
||||
// 公共依赖
|
||||
const TableHeaderRef = ref()
|
||||
const dictData = useDictData()
|
||||
const adminInfo = useAdminInfo()
|
||||
// 地区字典（和你原有地市下拉同源）
|
||||
const areaOptionList = dictData.getBasicData('jibei_area')
|
||||
|
||||
// 详情弹窗
|
||||
const detailId = ref('')
|
||||
const dialogShow = ref(false)
|
||||
|
||||
// TableStore 表格配置（仅修改字段映射，其余不动）
|
||||
const tableStore = new TableStore({
|
||||
url: '/device-boot/alarm/terminalCheckPage',
|
||||
method: 'POST',
|
||||
column: [
|
||||
// 多选框
|
||||
{
|
||||
width: '60',
|
||||
type: 'checkbox'
|
||||
},
|
||||
// 序号（分页自增，和你现有逻辑一致）
|
||||
{
|
||||
title: '序号',
|
||||
width: 70,
|
||||
formatter: (row: any) => {
|
||||
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: 'loginDate', title: '投运时间', minWidth: 120 },
|
||||
{ field: 'thisCheckTime', title: '本次定检时间', minWidth: 120 },
|
||||
{ field: 'nextCheckTime', title: '下次定检时间', minWidth: 120 },
|
||||
{
|
||||
title: '是否逾期',
|
||||
field: 'checkStatus',
|
||||
align: 'center',
|
||||
width: 80,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
console.log(props.renderValue)
|
||||
const val = props.renderValue
|
||||
console.log(val)
|
||||
let text = ''
|
||||
let color = ''
|
||||
if (val === 1) {
|
||||
text = '是'
|
||||
color = '#f53f3f'
|
||||
} else if (val === 0) {
|
||||
text = '否'
|
||||
color = '#00b42a'
|
||||
}
|
||||
return h('span', { style: { color, fontWeight: 'bold' } }, text)
|
||||
}
|
||||
},
|
||||
{
|
||||
field: 'overdueDay',
|
||||
title: '逾期天数',
|
||||
minWidth: 70,
|
||||
render: 'customRender',
|
||||
customRender: props => {
|
||||
const val = props.renderValue
|
||||
let text = ''
|
||||
let color = ''
|
||||
if (val > 0) {
|
||||
text = val
|
||||
color = '#f53f3f'
|
||||
} else if (val > -30) {
|
||||
text = Math.abs(val).toString()+'天后将逾期'
|
||||
color = 'rgba(236,143,21,0.92)'
|
||||
} else {
|
||||
text = '/'
|
||||
}
|
||||
return h('span', { style: { color, fontWeight: 'bold' } }, text)
|
||||
}
|
||||
},
|
||||
{ field: 'nextCheckTime', title: '周期检测报告', minWidth: 120 },
|
||||
|
||||
// 操作列固定右侧
|
||||
{
|
||||
title: '操作',
|
||||
fixed: 'right',
|
||||
minWidth: 160,
|
||||
render: 'buttons',
|
||||
buttons: [
|
||||
{
|
||||
name: 'detail',
|
||||
title: '详情',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-EditPen',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
openDetail(row.devId)
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'edit',
|
||||
title: '上传周期检测报告',
|
||||
type: 'primary',
|
||||
icon: 'el-icon-Open',
|
||||
render: 'basicButton',
|
||||
click: row => {
|
||||
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
beforeSearchFun: () => {
|
||||
// 携带当前登录人部门ID
|
||||
tableStore.table.params.orgId = adminInfo.$state.deptId
|
||||
}
|
||||
})
|
||||
|
||||
// 初始化查询参数
|
||||
tableStore.table.params.areaName = ''
|
||||
tableStore.table.params.bdName = ''
|
||||
tableStore.table.params.devName = ''
|
||||
tableStore.table.params.orgId = adminInfo.$state.deptId
|
||||
|
||||
// 打开详情弹窗
|
||||
const openDetail = (id: string) => {
|
||||
detailId.value = id
|
||||
dialogShow.value = true
|
||||
}
|
||||
|
||||
// 新增按钮
|
||||
const addFormModel = () => {
|
||||
|
||||
}
|
||||
|
||||
// 批量删除
|
||||
const deleteEven = () => {
|
||||
if (tableStore.table.selection.length == 0) {
|
||||
ElMessage({
|
||||
type: 'warning',
|
||||
message: '请选择要删除的定检数据'
|
||||
})
|
||||
return
|
||||
}
|
||||
ElMessageBox.confirm('此操作将永久删除选中记录, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
// 批量传devId数组
|
||||
deletePqCheck(tableStore.table.selection.map(item => item.devId)).then(() => {
|
||||
ElMessage.success('删除成功')
|
||||
tableStore.index()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
// 路由跳转带ID回显编辑（复用你原有路由传参逻辑）
|
||||
const props = defineProps({
|
||||
id: { type: String, default: 'null' }
|
||||
})
|
||||
watch(
|
||||
() => props.id,
|
||||
async (newVal) => {
|
||||
if (newVal === 'null') return
|
||||
const fullId = newVal.split('@')[0]
|
||||
const routeTime = Number(newVal.split('@')[1])
|
||||
if (isNaN(routeTime) || Date.now() - routeTime > import.meta.env.VITE_ROUTE_TIME_OUT) return
|
||||
const res = await getPqCheckById(fullId)
|
||||
if (res.code === 'A0000') {
|
||||
|
||||
}
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
|
||||
provide('tableStore', tableStore)
|
||||
onMounted(() => {
|
||||
tableStore.index()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.default-main {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user