You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.6 KiB
85 lines
2.6 KiB
<template>
|
|
<el-table :data="activedPoint" class="w-full" border>
|
|
<el-table-column label="隔离点名称" align="center" prop="ipName">
|
|
<template #default="scope">
|
|
<el-link type="primary" @click="handleDetail(scope)" :underline="false">
|
|
{{ scope.row.ipName }}
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column
|
|
v-for="point in activePlan"
|
|
align="center"
|
|
:key="point.id"
|
|
:label="point.ipName"
|
|
:prop="'' + point.id"
|
|
>
|
|
<template #default="scope">
|
|
<el-link
|
|
type="primary"
|
|
@click="handleDetail(scope)"
|
|
:underline="false"
|
|
v-if="getDetailStatus(scope).total > 0"
|
|
>
|
|
<span class="text-green-500 pr-1"> {{ getDetailStatus(scope).completed }} </span>
|
|
<span class="text-gray-500">/ {{ getDetailStatus(scope).total }} </span>
|
|
</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<DetailPointModal
|
|
:isolation-point-id="selectedCell.isolationPointId"
|
|
:isolation-plan-id="selectedCell.isolationPlanId"
|
|
ref="detailPointModalRef"
|
|
/>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { nextTick } from 'vue'
|
|
import { useElLockStore } from '@/store/modules/elLock'
|
|
import DetailPointModal from '@/components/Lock/DetailPointModal.vue'
|
|
defineOptions({ name: 'LockChart' })
|
|
const elLockStore = useElLockStore()
|
|
let activedPoint = elLockStore.isolationPoints.filter((item) => item.status == 1)
|
|
let activePlan = elLockStore.isolationPlans.filter((item) => item.status == 0)
|
|
const getDetailStatus = ({ row, column }) =>
|
|
elLockStore.planItemDetails
|
|
.filter((detail) => {
|
|
if (detail.isolationPointId != row.id) {
|
|
return false
|
|
}
|
|
let item = elLockStore.planItems.find((item) => item.id == detail.isolationPlanItemId)
|
|
if (item && item.isolationPlanId == column.property) {
|
|
return true
|
|
}
|
|
})
|
|
.reduce(
|
|
(acc, cur) => {
|
|
acc.total++
|
|
if (cur.lockStatus == 5) {
|
|
acc.completed++
|
|
}
|
|
return acc
|
|
},
|
|
{
|
|
total: 0,
|
|
completed: 0
|
|
}
|
|
)
|
|
const detailPointModalRef = ref()
|
|
const selectedCell = ref<{ isolationPointId?: number; isolationPlanId?: number }>({
|
|
isolationPointId: undefined,
|
|
isolationPlanId: undefined
|
|
})
|
|
const handleDetail = ({ row, column }) => {
|
|
selectedCell.value.isolationPointId = row.id
|
|
if (column.property != 'ipName') {
|
|
selectedCell.value.isolationPlanId = +column.property
|
|
} else {
|
|
selectedCell.value.isolationPlanId = undefined
|
|
}
|
|
// 调用detailPanel的show方法显示弹窗
|
|
nextTick(() => {
|
|
detailPointModalRef.value?.show()
|
|
})
|
|
}
|
|
</script>
|
|
|