ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

前端优化调整

Browse Source
This commit is contained in:
hongawen
2025-08-06 19:53:22 +08:00
parent b2a6a1de4e
commit d2f92ecde4
1 changed files with 317 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files

532
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -1,13 +1,18 @@
<!-- 真正的首页 --> <!--
首页Dashboard组件 - 主要功能页面
布局：左侧计划树 + 右侧功能区域（功能选择、饼图统计、表格数据）
-->
<template> <template>
<div class='static' ref='popupBaseView'> <div class='static' ref='popupBaseView'>
<el-row :gutter='10'> <el-row :gutter='10'>
<!-- 左侧计划树区域 (20%) -->
<el-col :lg='4' :xl='4' :md='4' :sm='4'> <el-col :lg='4' :xl='4' :md='4' :sm='4'>
<div class='left_tree'> <div class='left_tree'>
<!-- <tree ref='treeRef' :updateSelectedTreeNode='getPieData || (() => {})' /> --> <tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width='viewWidth' :height='viewHeight'
<tree ref='treeRef' :updateSelectedTreeNode='updateData|| (() => {})' :width="viewWidth" :height="viewHeight" :planTable ='planTable'/> :planTable='planTable' />
</div> </div>
</el-col> </el-col>
<!-- 右侧主要内容区域 (80%) -->
<el-col :lg='20' :xl='20' :md='20' :sm='20'> <el-col :lg='20' :xl='20' :md='20' :sm='20'>
<div class='right_container'> <div class='right_container'>
<!-- 功能选择 --> <!-- 功能选择 -->
@@ -29,8 +34,8 @@
</div> </div>
<!--检测计划统计 饼图统计--> <!--检测计划统计 饼图统计-->
<div class='container_pieShow'> <div class='container_pieShow'>
<el-collapse model-value='1' accordion @change='handleCollapseChange' > <el-collapse model-value='1' accordion @change='handleCollapseChange'>
<el-collapse-item name='1' > <el-collapse-item name='1'>
<template #title> <template #title>
<div class='container_pieShow_title'> <div class='container_pieShow_title'>
<span>检测计划统计</span> <span>检测计划统计</span>
@@ -90,12 +95,13 @@
</div> </div>
<!--下方表格数据--> <!--下方表格数据-->
<el-tabs class='tabs-menu' type='border-card' @tab-change='handleTabsChange' v-model='editableTabsValue' <el-tabs class='tabs-menu' type='border-card' v-model='editableTabsValue'
:style='{ height: tabsHeight }'> :style='{ height: tabsHeight }'>
<el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight}'> <el-tab-pane :label='tabLabel1' :style='{ height: tabPaneHeight}'>
<!-- 列表数据 --> <!-- 设备数据表格 -->
<div class='container_table' :style='{ height: tableHeight }'> <div class='container_table' :style='{ height: tableHeight }'>
<Table ref='tableRef1' :id='currentId' :plan ='select_Plan' :planArray = 'planList2?.data' :planTable ='planTable' @batchGenerateClicked="handleBatchGenerate"></Table> <Table ref='tableRef1' :id='currentId' :plan='select_Plan' :planArray='planList2'
:planTable='planTable' @batchGenerateClicked='handleBatchGenerate'></Table>
</div> </div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
@@ -105,19 +111,18 @@
</div> </div>
</template> </template>
<script lang='ts' setup> <script lang='ts' setup>
import pie from '@/components/echarts/pie/default.vue'
import { useRouter } from 'vue-router' import { useRouter } from 'vue-router'
import { type Plan } from '@/api/plan/interface'
import { type CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import { type Device } from '@/api/device/interface/device'
import { type ResultData } from '@/api/interface'
import pie from '@/components/echarts/pie/default.vue'
import tree from '../components/tree.vue' import tree from '../components/tree.vue'
import Table from '../components/table.vue' import Table from '../components/table.vue'
import deviceDataList from '@/api/device/device/deviceData' import { getBoundPqDevList, getPlanListByPattern, getPlanList } from '@/api/plan/plan'
import { getBoundPqDevList, getPlanListByPattern,getPlanList } from '@/api/plan/plan.ts'
import { onBeforeMount, onUnmounted, ref, watch } from 'vue' import { onBeforeMount, onUnmounted, ref, watch } from 'vue'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict' import { useDictStore } from '@/stores/modules/dict'
import { type Plan } from '@/api/plan/interface'
import type { CollapseModelValue } from 'element-plus/es/components/collapse/src/collapse.mjs'
import { type Device } from '@/api/device/interface/device'
import { ResultData } from '@/api/interface'
import { useViewSize } from '@/hooks/useViewSize' import { useViewSize } from '@/hooks/useViewSize'
const planName = ref('') const planName = ref('')
@@ -125,11 +130,9 @@ const dictStore = useDictStore()
const modeStore = useModeStore() const modeStore = useModeStore()
const chartsInfoRef = ref<HTMLElement | null>(null) const chartsInfoRef = ref<HTMLElement | null>(null)
const chartsWidth = ref<number>(0) const chartsWidth = ref<number>(0)
const deviceData = deviceDataList.plan_devicedata
const treeRef = ref() const treeRef = ref()
const form: any = ref({ const form: any = ref({
activeTabs: 0, //功能选择,例如报告生成 activeTabs: 0, //功能选择,例如报告生成
activeChildTabs: 0,//子功能选择,例如未检设备报告生成，或已检设备更换误差体系生成
checkStatus: 0, //检测状态 checkStatus: 0, //检测状态
checkReportStatus: 0, //检测报告状态 checkReportStatus: 0, //检测报告状态
checkResult: 0, //检测结果 checkResult: 0, //检测结果
@@ -146,118 +149,118 @@ const tabsHeight = ref('calc(100vh - 522px)') // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度 const tabPaneHeight = ref('calc(100% - 5px)') // 初始高度
const tableHeight = ref('calc(100% - 50px)') // 初始高度 const tableHeight = ref('calc(100% - 50px)') // 初始高度
const planList = ref<ResultData<Plan.ReqPlan[]>>() // ============================ 计划数据状态 ============================
const planList2 = ref<ResultData<Plan.ReqPlan[]>>()//备份含子计划的结构 const planList = ref<Plan.ReqPlan[]>([]) // 计划列表（过滤后）
const select_Plan = ref<Plan.ReqPlan>() const planList2 = ref<Plan.ReqPlan[]>([]) // 计划列表原始数据（包含子计划）
const isLabelLineShow = ref(true) const select_Plan = ref<Plan.ReqPlan>() // 当前选中的计划
const planTable = ref<any[]>([]) const planTable = ref<any[]>([]) // 比对模式下的计划表格数据
const { popupBaseView,viewWidth, viewHeight } = useViewSize()
const handleCollapseChange = (val: CollapseModelValue) => {
// 计算新的高度 // ============================ 视图状态 ============================
const isLabelLineShow = ref(true) // 饼图是否显示引导线
const { popupBaseView, viewWidth, viewHeight } = useViewSize() // 视口尺寸hook
/**
* 处理折叠面板展开/收起事件
* 根据面板状态动态调整表格高度，优化空间利用
* @param val - 当前展开的面板值
*/
const handleCollapseChange = (val: CollapseModelValue) => {
// 计算新的高度值
let newHeight let newHeight
if (Array.isArray(val)) { if (Array.isArray(val)) {
// 数组情况：有展开项时高度更小，无展开项时高度更大
newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)' newHeight = val.length > 0 ? 'calc(100vh - 522px)' : 'calc(100vh - 333px)'
} else { } else {
// 单个值情况：展开时高度更小，收起时高度更大
newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)' newHeight = val ? 'calc(100vh - 538px)' : 'calc(100vh - 333px)'
} }
// 更新各个容器的高度
tabsHeight.value = newHeight tabsHeight.value = newHeight
tabPaneHeight.value = `calc(100% - 5px)` tabPaneHeight.value = `calc(100% - 5px)`
tableHeight.value = `calc(100% - 5px)` tableHeight.value = `calc(100% - 5px)`
} }
const handleTabsChange = (val: any) => {
form.value.activeTabs = 0
form.value.activeTabs = 3
form.value.activeChildTabs = Number(val)
} // 设置默认主题颜色
localStorage.setItem('color', '#91cc75') localStorage.setItem('color', '#91cc75')
//功能选择数据 // ============================ 功能按钮配置 ============================
/**
* 主功能选项卡配置
* 包含4个主要功能：设备检测、报告生成、设备归档、数据操作
*/
const tabsList = ref([ const tabsList = ref([
{ {
label: '设备检测', label: '设备检测', // 设备检测功能
value: 0, value: 0,
img: new URL('/src/assets/images/plan/static/1.svg', import.meta.url).href, img: new URL('/src/assets/images/plan/static/1.svg', import.meta.url).href,
checked: true, checked: true, // 默认选中
}, },
{ {
label: '报告生成', label: '报告生成', // 检测报告生成功能
value: 3, value: 3,
img: new URL('/src/assets/images/plan/static/3.svg', import.meta.url).href, img: new URL('/src/assets/images/plan/static/3.svg', import.meta.url).href,
checked: false, checked: false,
}, },
{ {
label: '设备归档', label: '设备归档', // 设备归档管理功能
value: 4, value: 4,
img: new URL('/src/assets/images/plan/static/4.svg', import.meta.url).href, img: new URL('/src/assets/images/plan/static/4.svg', import.meta.url).href,
checked: false, checked: false,
}, },
{ {
label: '数据操作', label: '数据操作', // 数据查询和操作功能
value: 5, value: 5,
img: new URL('/src/assets/images/plan/static/5.svg', import.meta.url).href, img: new URL('/src/assets/images/plan/static/5.svg', import.meta.url).href,
checked: false, checked: false,
}, },
]) ])
// 初始化默认选中第一个功能选项卡
form.value.activeTabs = tabsList.value[0].value form.value.activeTabs = tabsList.value[0].value
const tableRef1 = ref()
const tableRef2 = ref()
const currentId = ref('')
watch( // ============================ 组件引用和状态 ============================
() => form.value, const tableRef1 = ref() // 主表格组件引用
(val, oldVal) => { const currentId = ref('') // 当前选中的计划ID
if (val) {
if (form.value.activeTabs === 0)//设备检测 // ============================ 监听器 ============================
{ /**
const tabledata = deviceData.filter((item) => item.document_State === '未归档') * 监听功能切换并通知表格组件更新配置
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata) * 不再传递静态数据，让表格组件通过API获取真实数据
} else if (form.value.activeTabs === 4)//设备归档 */
{
const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
}
}
},
{
immediate: true,
deep: true,
},
)
watch( watch(
() => form.value, () => form.value.activeTabs,
(val, oldVal) => { (newTabs) => {
if (val) { // 只传递功能模式，不传递静态假数据
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs) // 表格组件会根据功能模式通过API获取对应的真实数据
} tableRef1.value && tableRef1.value.changeActiveTabs(newTabs)
}, }
{ // 去掉 immediate: true，避免初始化时重复调用
immediate: true,
deep: true,
},
) )
const pieRef1 = ref(), // ============================ 饼图组件引用和数据 ============================
pieRef2 = ref(), const pieRef1 = ref(), // 设备检测状态饼图引用
pieRef3 = ref() pieRef2 = ref(), // 设备检测结果饼图引用
pieRef3 = ref() // 设备报告状态饼图引用
const chartsData1: any = ref([]), const chartsData1: any = ref([]), // 设备检测状态统计数据
chartsData2: any = ref([]), chartsData2: any = ref([]), // 设备检测结果统计数据
chartsData3: any = ref([]) chartsData3: any = ref([]) // 设备报告状态统计数据
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => { // ============================ 工具函数 ============================
/**
* 递归查找指定 ID 的计划
* @param plans - 计划数组
* @param id - 计划 ID
* @returns 找到的计划对象或 undefined
*/
const findPlanById = (plans: any, id: string): Plan.ReqPlan | undefined => {
if (!plans) return undefined
for (const plan of plans) { for (const plan of plans) {
if (plan.id === id) { if (plan?.id === id) {
return plan return plan
} }
if (plan.children) { // 递归搜索子计划
if (plan?.children) {
const foundPlan = findPlanById(plan.children, id) const foundPlan = findPlanById(plan.children, id)
if (foundPlan) { if (foundPlan) {
return foundPlan return foundPlan
@@ -268,43 +271,56 @@ const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefin
} }
/**
* 处理树节点选中事件的回调函数
* 根据选中的计划节点更新饼图数据并切换相应的功能模式
* @param id - 选中的计划 ID
*/
const updateData = (id: string) => { const updateData = (id: string) => {
getPieData(id);//刷新饼图 // 刷新饼图数据
getPieData(id)
//获取点击树的父节点名字 // 查找当前计划的父节点名称
const parentNodeName = ref('') const parentNodeName = ref('')
for (let i = 0; i < planList.value.data.length; i++) { if (planList.value?.length) {
if (Array.isArray(planList.value.data[i].children) && planList.value.data[i].children.length > 0) { for (let i = 0; i < planList.value.length; i++) {
for (let j = 0; j < planList.value.data[i].children.length; j++) { const children = planList.value[i]?.children
if (planList.value.data[i].children[j].id === id) { if (Array.isArray(children) && children.length > 0) {
parentNodeName.value = planList.value.data[i].name for (let j = 0; j < children.length; j++) {
break; if (children[j]?.id === id) {
} parentNodeName.value = planList.value[i]?.name || ''
break
}
} }
} }
} }
if(parentNodeName.value === '检测完成'){ }
handleCheckFunction(5)
}else{ // 根据父节点名称自动切换功能模式
handleCheckFunction(0) if (parentNodeName.value === '检测完成') {
} handleCheckFunction(5) // 切换到数据操作模式
} else {
handleCheckFunction(0) // 切换到设备检测模式
}
} }
/**
* 获取指定计划的设备统计数据并更新饼图
* 分别统计设备的检测状态、检测结果、报告状态分布情况
* @param id - 计划 ID
*/
const getPieData = async (id: string) => { const getPieData = async (id: string) => {
currentId.value = id // 设置当前ID currentId.value = id // 设置当前选中的计划ID
// 初始化计数对象
const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 } // 初始化各类统计计数器
const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } const checkStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0, 3: 0 } // 检测状态计数：未检(0)、检测中(1)、检测完成(2)、归档(3)
const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } const checkResultCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 检测结果计数：不符合(0)、符合(1)、未检(2)
const reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 } // 报告状态计数：未生成(0)、已生成(1)、未检(2)
if (id) { if (id) {
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const plan = findPlanById(planList.value, id) const plan = findPlanById(planList.value, id)
planName.value = '所选计划:' + (plan?.name || '')
planName.value = '所选计划:' + plan.name
select_Plan.value = plan select_Plan.value = plan
console.log('所选计划:',plan)
const pqDevList_Result2 = await getBoundPqDevList({ 'planIdList': [id], 'checkStateList': [0, 1, 2, 3] }) const pqDevList_Result2 = await getBoundPqDevList({ 'planIdList': [id], 'checkStateList': [0, 1, 2, 3] })
boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[] boundPqDevList.value = pqDevList_Result2.data as Device.ResPqDev[]
// 遍历 boundPqDevList 并更新计数对象 // 遍历 boundPqDevList 并更新计数对象
@@ -325,78 +341,128 @@ const getPieData = async (id: string) => {
}) })
// 检查 checkStateCount 是否全为 0 // 检查 checkStateCount 是否全为 0
if(boundPqDevList.value.length != 0){ if (boundPqDevList.value.length != 0) {
isLabelLineShow.value = true; isLabelLineShow.value = true
const allZero = Object.values(checkStateCount).every(count => count === 0); const allZero = Object.values(checkStateCount).every(count => count === 0)
chartsData1.value = [ chartsData1.value = [
{ value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0], name: '未检', itemStyle: { color: '#fac858' } }, {
{ value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1], name: '检测中', itemStyle: { color: '#ee6666' } }, value: allZero ? 0 : checkStateCount[0] === 0 ? null : checkStateCount[0],
{ value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2], name: '检测完成', itemStyle: { color: '#91cc75' } }, name: '未检',
{ value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3], name: '归档', itemStyle: { color: '#5470c6' } }, itemStyle: { color: '#fac858' },
]; },
// 同样处理 chartsData2 和 chartsData3 {
const allZeroResult = Object.values(checkResultCount).every(count => count === 0); value: allZero ? 0 : checkStateCount[1] === 0 ? null : checkStateCount[1],
name: '检测中',
itemStyle: { color: '#ee6666' },
},
{
value: allZero ? 0 : checkStateCount[2] === 0 ? null : checkStateCount[2],
name: '检测完成',
itemStyle: { color: '#91cc75' },
},
{
value: allZero ? 0 : checkStateCount[3] === 0 ? null : checkStateCount[3],
name: '归档',
itemStyle: { color: '#5470c6' },
},
]
// 同样处理 chartsData2 和 chartsData3
const allZeroResult = Object.values(checkResultCount).every(count => count === 0)
chartsData2.value = [ chartsData2.value = [
{ value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2], name: '未检', itemStyle: { color: '#fac858' } }, {
{ value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0], name: '不符合', itemStyle: { color: '#ee6666' } }, value: allZeroResult ? 0 : checkResultCount[2] === 0 ? null : checkResultCount[2],
{ value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1], name: '符合', itemStyle: { color: '#91cc75' } }, name: '未检',
]; itemStyle: { color: '#fac858' },
},
{
value: allZeroResult ? 0 : checkResultCount[0] === 0 ? null : checkResultCount[0],
name: '不符合',
itemStyle: { color: '#ee6666' },
},
{
value: allZeroResult ? 0 : checkResultCount[1] === 0 ? null : checkResultCount[1],
name: '符合',
itemStyle: { color: '#91cc75' },
},
]
// 检查 reportStateCount 是否全为 0 // 检查 reportStateCount 是否全为 0
const allZeroReport = Object.values(reportStateCount).every(count => count === 0); const allZeroReport = Object.values(reportStateCount).every(count => count === 0)
chartsData3.value = [ chartsData3.value = [
{ value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2], name: '未检', itemStyle: { color: '#fac858' } }, {
{ value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0], name: '未生成', itemStyle: { color: '#ee6666' } }, value: allZeroReport ? 0 : reportStateCount[2] === 0 ? null : reportStateCount[2],
{ value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1], name: '已生成', itemStyle: { color: '#91cc75' } }, name: '未检',
]; itemStyle: { color: '#fac858' },
},
{
value: allZeroReport ? 0 : reportStateCount[0] === 0 ? null : reportStateCount[0],
name: '未生成',
itemStyle: { color: '#ee6666' },
},
{
value: allZeroReport ? 0 : reportStateCount[1] === 0 ? null : reportStateCount[1],
name: '已生成',
itemStyle: { color: '#91cc75' },
},
]
}else{ } else {
isLabelLineShow.value = false;//不展示引导线 isLabelLineShow.value = false//不展示引导线
chartsData1.value = [ chartsData1.value = [
{ value: null , name: '未检', itemStyle: { color: '#fac858' } }, { value: null, name: '未检', itemStyle: { color: '#fac858' } },
{ value: null , name: '检测中', itemStyle: { color: '#ee6666' } }, { value: null, name: '检测中', itemStyle: { color: '#ee6666' } },
{ value: null , name: '检测完成', itemStyle: { color: '#91cc75' } }, { value: null, name: '检测完成', itemStyle: { color: '#91cc75' } },
{ value: null , name: '归档', itemStyle: { color: '#5470c6' } }, { value: null, name: '归档', itemStyle: { color: '#5470c6' } },
{ value: 0 , itemStyle: { color: '#eeeeee' } }, { value: 0, itemStyle: { color: '#eeeeee' } },
]; ]
chartsData2.value = [ chartsData2.value = [
{ value: null, name: '未检', itemStyle: { color: '#fac858' } }, { value: null, name: '未检', itemStyle: { color: '#fac858' } },
{ value: null, name: '不符合', itemStyle: { color: '#ee6666' } }, { value: null, name: '不符合', itemStyle: { color: '#ee6666' } },
{ value: null, name: '符合', itemStyle: { color: '#91cc75' } }, { value: null, name: '符合', itemStyle: { color: '#91cc75' } },
{ value: 0 , itemStyle: { color: '#eeeeee' } }, { value: 0, itemStyle: { color: '#eeeeee' } },
]; ]
chartsData3.value = [ chartsData3.value = [
{ value: null, name: '未检', itemStyle: { color: '#fac858' } }, { value: null, name: '未检', itemStyle: { color: '#fac858' } },
{ value: null, name: '未生成', itemStyle: { color: '#ee6666' } }, { value: null, name: '未生成', itemStyle: { color: '#ee6666' } },
{ value: null, name: '已生成', itemStyle: { color: '#91cc75' } }, { value: null, name: '已生成', itemStyle: { color: '#91cc75' } },
{ value: 0 , itemStyle: { color: '#eeeeee' } }, { value: 0, itemStyle: { color: '#eeeeee' } },
]; ]
} }
}else{ } else {
planName.value = '所选计划:' planName.value = '所选计划:'
} }
pieRef1.value.init() pieRef1.value.init()
pieRef2.value.init() pieRef2.value.init()
pieRef3.value.init() pieRef3.value.init()
} }
/**
* 初始化树组件数据
* @param data - 计划数据
*/
const getTree = (data?: any) => { const getTree = (data?: any) => {
treeRef.value.getTreeData(data) treeRef.value.getTreeData(data)
} }
//前往检测
// ============================ 路由跳转函数 ============================
/**
* 跳转到检测页面
*/
const handleDetection = () => { const handleDetection = () => {
router.push({ router.push({
path: '/detection', path: '/detection',
}) })
} }
//前往计划详情
/**
* 跳转到计划详情页面
*/
const planDetail = () => { const planDetail = () => {
router.push({ router.push({
path: '/plan/planList', path: '/plan/planList',
@@ -404,53 +470,69 @@ const planDetail = () => {
} }
//功能选择css切换 // ============================ 主要业务逻辑函数 ============================
/**
* 处理功能选项卡切换
* 根据选中的功能更新UI状态和表格显示内容
* @param val - 功能选项卡值 (0:设备检测, 3:报告生成, 4:设备归档, 5:数据操作)
*/
const handleCheckFunction = (val: any) => { const handleCheckFunction = (val: any) => {
// 重置tab状态
editableTabsValue.value = '0' editableTabsValue.value = '0'
form.value.activeChildTabs = 0
// 更新功能按钮的选中状态
tabsList.value.map((item: any, index: any) => { tabsList.value.map((item: any, index: any) => {
if (val == item.value) { item.checked = (val == item.value)
item.checked = true
} else {
item.checked = false
}
}) })
tabShow.value = false tabShow.value = false
// 根据选中的功能设置不同的过滤条件和标签
switch (val) { switch (val) {
case 0://自动检测 case 0: // 设备检测模式
checkStateTable.value = [0, 1, 2] checkStateTable.value = [0, 1, 2] // 显示未检、检测中、检测完成的设备
tabLabel1.value = '设备检测' tabLabel1.value = '设备检测'
break break
case 1://手动检测 case 1: // 手动检测模式（预留）
tabLabel1.value = '手动检测' tabLabel1.value = '手动检测'
break break
case 2://设备复检 case 2: // 设备复检模式（预留）
tabLabel1.value = '设备复检' tabLabel1.value = '设备复检'
break break
case 3://报告生成 case 3: // 报告生成模式
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
tabLabel1.value = '报告生成' tabLabel1.value = '报告生成'
//tabShow.value = true;
break break
case 4://设备归档 case 4: // 设备归档模式
checkStateTable.value = [2] checkStateTable.value = [2] // 只显示检测完成的设备
tabLabel1.value = '设备归档' tabLabel1.value = '设备归档'
break break
case 5://数据查询 case 5: // 数据查询模式
checkStateTable.value = [2, 3] checkStateTable.value = [2, 3] // 显示检测完成和已归档的设备
tabLabel1.value = '数据查询' tabLabel1.value = '数据查询'
break break
} }
// 更新当前激活的功能选项卡
form.value.activeTabs = val form.value.activeTabs = val
// 刷新饼图数据以确保统计信息同步
if (currentId.value) {
getPieData(currentId.value)
}
} }
// ============================ 监听器和事件处理 ============================
/**
* 饼图容器尺寸变化监听器
* 当容器大小变化时自动调整饼图尺寸，保持响应式设计
*/
const resizeObserver = new ResizeObserver(entries => { const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) { for (let entry of entries) {
// 更新容器宽度
chartsWidth.value = entry.contentRect.width chartsWidth.value = entry.contentRect.width
// 同步调整三个饼图的尺寸（宽度为容器的95%，高度固定180px）
pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true) pieRef1.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true) pieRef2.value?.reSize(chartsWidth.value * 0.95, 180, true)
pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true) pieRef3.value?.reSize(chartsWidth.value * 0.95, 180, true)
@@ -458,10 +540,18 @@ const resizeObserver = new ResizeObserver(entries => {
}) })
// ============================ 初始化函数 ============================
/**
* 初始化计划数据
* 根据当前模式获取相应的计划列表数据
*/
const initPlan = async () => { const initPlan = async () => {
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id // 获取当前模式对应的数据字典ID
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
// 构建计划查询请求对象
const reqPlan: Plan.ReqPlan = { const reqPlan: Plan.ReqPlan = {
pattern: patternId, pattern: patternId, // 模式ID
datasourceIds: '', datasourceIds: '',
sourceIds: '', sourceIds: '',
planId: '', planId: '',
@@ -485,81 +575,96 @@ const initPlan = async () => {
reportTemplateName: '', reportTemplateName: '',
reportTemplateVersion: '', reportTemplateVersion: '',
dataRule: '', dataRule: '',
testItemNameStr:'', testItemNameStr: '',
testItems: [], testItems: [],
standardDevIds:[], standardDevIds: [],
standardDevMap: new Map<string, number>(), standardDevMap: new Map<string, number>(),
} }
planList2.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>
planList.value = JSON.parse(JSON.stringify(planList2.value)); // 获取计划数据
planList.value = planList.value.data.map((item: any) => { const result = await getPlanListByPattern(reqPlan) as ResultData<Plan.ReqPlan[]>
if (item.children) { planList2.value = result.data || []
item.children = item.children.filter(child => child.pid === '0');
} // 创建计划数据的副本用于过滤处理
return item; planList.value = JSON.parse(JSON.stringify(planList2.value))
});
// 过滤子计划，只保留 pid 为 '0' 的项目
planList.value = planList.value.map((item: any) => {
if (item?.children) {
item.children = item.children.filter((child: any) => child?.pid === '0')
}
return item
})
} }
// ============================ 生命周期函数 ============================
/**
* 组件挂载前的初始化操作
* 1. 初始化计划数据
* 2. 设置默认选中的计划
* 3. 初始化图表和树组件
* 4. 根据模式加载额外数据
*/
onBeforeMount(async () => { onBeforeMount(async () => {
// 初始化计划数据
await initPlan() await initPlan()
console.log(planList.value)
for (let i = 0; i < planList.value.length; i++) { // 找到第一个有子计划的项目，并设置为默认选中
if (Array.isArray(planList.value[i].children) && planList.value[i].children.length > 0) { if (planList.value?.length) {
currentId.value = planList.value[i].children[0].id; // 直接赋值第一个 children 的 id for (let i = 0; i < planList.value.length; i++) {
break; // 确保只执行一次 const children = planList.value[i]?.children
if (Array.isArray(children) && children.length > 0) {
currentId.value = children[0]?.id // 选中第一个子计划
break // 确保只选中一个
}
} }
} }
console.log('planList.valuecurrentId.value', currentId.value)
// if (planList.value.data[0].children[0]) {
// currentId.value = planList.value.data[0].children[0].id
// console.log('currentId.value',planList.value.data[0])
// }
// 初始化图表尺寸监听器
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.observe(chartsInfoRef.value) resizeObserver.observe(chartsInfoRef.value)
} }
getTree(planList.value)
// 初始化树组件和饼图数据
getTree(planList.value || [])
getPieData(currentId.value) getPieData(currentId.value)
if(modeStore.currentMode != '比对式') // 如果不是比对模式，直接返回
return; if (modeStore.currentMode != '比对式')
const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id; return
// 比对模式下加载额外的计划表格数据
const patternId2 = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id
if (patternId2 !== undefined) { if (patternId2 !== undefined) {
planTable.value = await getPlanList({ 'patternId': patternId2 }); planTable.value = await getPlanList({ 'patternId': patternId2 })
} }
}) })
/**
* 组件卸载时的清理操作
* 移除尺寸监听器，防止内存泄漏
*/
onUnmounted(async () => { onUnmounted(async () => {
if (chartsInfoRef.value) { if (chartsInfoRef.value) {
resizeObserver.unobserve(chartsInfoRef.value) resizeObserver.unobserve(chartsInfoRef.value)
} }
}) })
/**
* 处理批量操作完成后的数据更新
* 更新计划数据、树状态和饼图，表格会通过watch自动更新
*/
const handleBatchGenerate = async () => { const handleBatchGenerate = async () => {
// console.log('批量生成按钮被点击了'); // 重新获取计划数据
// 在这里添加其他逻辑，比如显示对话框、更新状态等
await initPlan() await initPlan()
treeRef.value.clickTableToTree(planList.value,currentId.value) // 更新树的选中状态
treeRef.value.clickTableToTree(planList.value || [], currentId.value)
// 重新获取饼图数据，deviceData更新后watch会自动触发表格更新
getPieData(currentId.value) getPieData(currentId.value)
if (form.value.activeTabs === 0)//设备检测
{
const tabledata = deviceData.filter((item) => item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 4)//设备归档
{
const tabledata = deviceData.filter((item) => item.check_State === '检测完成' && item.document_State === '未归档')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
} else if (form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
const tabledata = deviceData.filter((item) => item.check_State === '检测完成')
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs, tabledata)
}
}; // 移除重复的表格渲染调用 - watch监听器已经处理了这部分逻辑
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs)
}
</script> </script>
<style lang='scss' scoped> <style lang='scss' scoped>
@@ -707,7 +812,6 @@ const handleBatchGenerate = async () => {
} }
.tabs-menu { .tabs-menu {
height: 100%; height: 100%;
border: 0; border: 0;
@@ -748,6 +852,4 @@ const handleBatchGenerate = async () => {
} }
</style> </style>