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:
caozehui
2024-12-20 10:19:58 +08:00
parent ebc2ac1a41
commit 93b67fe845
8 changed files with 2206 additions and 2172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
frontend/src/api/check/interface/index.ts
View File

@@ -1,4 +1,4 @@
export interface DataCheck{
export interface DataCheck {
testScriptName: string,
errorSysName: string,
dataRule: string,
@@ -32,10 +32,65 @@ export interface RawDataItem {
L3: number
}
/**
* 用于定义 （设备）通道的原始数据
*/
export interface RawData {
chnNum: string,
rawDataItems: RawDataItem[]
// 用来描述检测脚本类型
export interface ScriptItem {
id: string,
scriptItemName: string,
children?: ScriptItem[]
}
// 用来描述 通道检测结果
export enum ChnCheckResultEnum {
UNKNOWN = -1,
FAIL = 0,
SUCCESS = 1,
}
//用来描述 某个脚本测试项对所有通道的检测结果
export interface ScriptChnItem {
scriptID: string
scriptItemName: string
// 设备
devices: Array<{
deviceID: string,
deviceName: string,
chnResult: ChnCheckResultEnum[] //通道检测结果
}>
}
/**
* 用于描述 （设备）通道检测结果展示的按钮类型
*/
export interface ButtonResult {
resultType: 'info' | 'success' | 'danger',
resultValue: '-' | '√' | '×'
}
/**
* 用于描述 脚本检测结果展示的按钮类型
*/
export interface ScriptChnViewItem {
scriptID: string,
scriptItemName: string //脚本项名称
// 设备
devices:Array<{
deviceID: string,
deviceName: string,
chnResult: ButtonResult[],
}>
}
/**
* 定义检测日志类型
*/
export interface LogItem {
type: 'info' | 'error'
log: string
}

36
frontend/src/views/home/components/dataCheckRawDataTable.vue
View File

@@ -1,42 +1,28 @@
<template>
<div class="table-main">
<el-collapse v-model="activeName" accordion style="width: 100%;height:335px">
<el-collapse-item v-for="(item, index) in tableData" :key="index+1" :title="'通道'+ (index+1)" :name="'通道'+ (index+1)">
<el-table :data="item.rawDataItems" stripe border :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }" height="335px" style="width: 100%;max-height: 250px;overflow-y: auto;">
<el-table-column type="index" fixed="left" label="序号" width="70"/>
<el-table-column prop="updateTime" label="数据时间"/>
<el-table-column prop="L1" label="L1（V）"/>
<el-table-column prop="L2" label="L2（V）"/>
<el-table-column prop="L3" label="L3（V）"/>
</el-table>
</el-collapse-item>
</el-collapse>
<el-table :data="tableData" stripe border :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }" height="335px"
style="width: 100%;">
<el-table-column type="index" label="序号" width="70" fixed="left"/>
<el-table-column prop="updateTime" label="数据时间"/>
<el-table-column prop="L1" label="L1（V）"/>
<el-table-column prop="L2" label="L2（V）"/>
<el-table-column prop="L3" label="L3（V）"/>
</el-table>
</div>
</template>
<script lang="tsx" setup>
import type {RawData} from "@/api/check/interface";
import type {RawDataItem} from "@/api/check/interface";
const {tableData} = defineProps<{
tableData:RawData[]
tableData: RawDataItem[]
}>()
const activeName = ref('通道1')
// 清空数据
const clear = () => {
activeName.value = '通道1'
}
defineExpose({
clear
})
</script>
<style scoped>

9
frontend/src/views/home/components/dataCheckResultTable.vue
View File

@@ -3,7 +3,11 @@
<div class="table-main">
<el-table :data="tableData" height="335px" :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }">
<el-table-column prop="chnNum" label="序号" width="70"/>
<el-table-column prop="chnNum" label="通道号" width="80">
<template #default="{row}">
{{ '通道' + row.chnNum }}
</template>
</el-table-column>
<el-table-column prop="standardValue" label="标准值（V）"/>
<el-table-column label="L1（V）">
<el-table-column prop="L1" width="80" label="被检值">
@@ -33,9 +37,6 @@
</el-table-column>
<el-table-column prop="result" label="检测结果">
<!-- <template #default="scope">
<el-tag :type="scope.row.Result === '合格' ? 'success' : 'danger'">{{ scope.row.Result }}</el-tag>
</template> -->
<template #default="scope">
<el-tag type="danger" v-if="scope.row.result === '不合格'">{{ scope.row.result }}</el-tag>
<span v-if="scope.row.result != '不合格'">{{ scope.row.result }}</span>

533
frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue
View File

@@ -17,7 +17,7 @@
<el-input v-model='formContent.deviceName' :disabled="true"/>
</el-form-item>
<el-form-item label='通道号'>
<el-select v-model="formContent.monitorIdx">
<el-select v-model="formContent.monitorIdx" @change="handleChnNumChange">
<el-option v-for="item in monitorIdxList" :key="item.value" :label="item.value"
:value="item.value"/>
</el-select>
@@ -28,9 +28,9 @@
<div class="data-check-body">
<div class="content-left-tree">
<div>
<el-radio-group v-model="scriptSwitch">
<el-radio-button label="不合格测试项" value="0"/>
<el-radio-button label="全部测试项" value="1"/>
<el-radio-group v-model="checkItemSwitch" @change="handleCheckItemSwitch">
<el-radio-button label="不合格测试项" :value="0"/>
<el-radio-button label="全部测试项" :value="1"/>
</el-radio-group>
</div>
<div class="content-tree">
@@ -65,12 +65,12 @@ import {dialogBig} from '@/utils/elementBind'
import {reactive, ref} from 'vue'
import DataCheckResultTable from './dataCheckResultTable.vue'
import DataCheckRawDataTable from './dataCheckRawDataTable.vue'
import type {CheckResult, DataCheck, RawData} from "@/api/check/interface";
import type {CheckResult, DataCheck, RawDataItem} from "@/api/check/interface";
import {data as treeData} from "@/api/plan/autoTest.json";
const {appendToBody} = defineProps<{
appendToBody:boolean
}>()
const {appendToBody} = withDefaults(defineProps<{
appendToBody: boolean
}>(), {appendToBody: false})
const formContent = reactive<DataCheck>({
@@ -83,7 +83,7 @@ const formContent = reactive<DataCheck>({
const activeName = ref('resultTab')
const scriptSwitch = ref('0');
const checkItemSwitch = ref(0)
const currentScriptDsc = ref('电压准确度检测：频率：42.5Hz Ua=46.192V 0° Ub=46.192V -120° Uc=46.192V 120° Ia=1A 0° Ib=1A -120° Ic=1A 120°');
@@ -108,6 +108,20 @@ const monitorIdxList = [
},
]
// 改变通道号下拉框触发事件
const handleChnNumChange = (data: any) => {
console.log(data);
}
// 切换不合格测试项、全部测试项 触发事件
const handleCheckItemSwitch = (data: any) => {
// 0 不合格测试项、1 全部测试项
if (data === 0) {
} else {
}
}
// 点击左侧树节点触发事件
const handleNodeClick = (data: any) => {
@@ -126,396 +140,129 @@ const checkResultTableData = reactive<CheckResult[]>([
L3_errValue: 0.01,
maxErrVaule: 0.05774,
result: '合格',
},
{
chnNum: '2',
standardValue: 57.74,
L1: 57.73,
L1_errValue: 0.01,
L2: 57.73,
L2_errValue: 0.01,
L3: 57.73,
L3_errValue: 0.01,
maxErrVaule: 0.05774,
result: '合格',
}
])
const rawTableData = reactive<RawData[]>([
const rawTableData = reactive<RawDataItem[]>([
{
chnNum: '1',
rawDataItems: [
{
updateTime: "2024-10-10 09:30:00",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:03",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:06",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:09",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:12",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:15",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:18",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:21",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:24",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:27",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:30",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:33",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:36",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:39",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:42",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:45",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:48",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:51",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:54",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:57",
L1: 57.73,
L2: 57.73,
L3: 57.73,
}
]
updateTime: "2024-10-10 09:30:00",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
chnNum: '2',
rawDataItems: [
{
updateTime: "2024-10-10 09:30:00",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:03",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:06",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:09",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:12",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:15",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:18",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:21",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:24",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:27",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:30",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:33",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:36",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:39",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:42",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:45",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:48",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:51",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:54",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:57",
L1: 57.73,
L2: 57.73,
L3: 57.73,
}
]
updateTime: "2024-10-10 09:30:03",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
chnNum: '3',
rawDataItems: [
{
updateTime: "2024-10-10 09:30:00",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:03",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:06",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:09",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:12",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:15",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:18",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:21",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:24",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:27",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:30",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:33",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:36",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:39",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:42",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:45",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:48",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:51",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:54",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:57",
L1: 57.73,
L2: 57.73,
L3: 57.73,
}
]
updateTime: "2024-10-10 09:30:06",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:09",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:12",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:15",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:18",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:21",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:24",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:27",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:30",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:33",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:36",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:39",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:42",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:45",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:48",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:51",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:54",
L1: 57.73,
L2: 57.73,
L3: 57.73,
},
{
updateTime: "2024-10-10 09:30:57",
L1: 57.73,
L2: 57.73,
L3: 57.73,
}
])
@@ -528,12 +275,11 @@ const close = () => {
//数据清空
activeName.value = 'rawDataTab'
rawDataTableRef.value?.clear()
visible.value = false;
};
const open = (deviceItem: any, chnNum: number) => {
const open = (deviceItem: any, chnNum?: number) => {
// 发起后端请求，查询详细信息
// const deviceItem = await getDetail(planId,checkItemId,deviceItem.id, chnNum)
@@ -610,7 +356,6 @@ defineExpose({
margin-bottom: 10px;
max-height: 400px;
}
}
}
}

40
frontend/src/views/home/components/table.vue
View File

@@ -114,8 +114,7 @@
:icon="View"
@click="openDrawer('查看', scope.row)"
v-if="form.activeTabs === 3 && form.activeChildTabs === 1"
>查看</el-button
>
>查看</el-button>
<el-button
type="primary"
@@ -123,8 +122,7 @@
:icon="Download"
@click="openDrawer('报告下载', scope.row)"
v-if="form.activeTabs === 3 && form.activeChildTabs === 0 && scope.row.reportState === 1"
>报告下载</el-button
>
>报告下载</el-button>
<!-- <div class='cn-render-buttons' v-if="form.activeTabs === 3 && form.activeChildTabs === 0">
<el-dropdown trigger='click'>
@@ -147,8 +145,7 @@
:icon="Postcard"
@click="openDrawer('生成', scope.row)"
v-if="form.activeTabs === 3"
>报告生成</el-button
>
>报告生成</el-button>
<!-- <el-button
type="primary"
link
@@ -164,24 +161,23 @@
@click="openDrawer('归档', scope.row)"
v-if="form.activeTabs === 4"
:disabled = "scope.row.checkState != 2"
>归档</el-button
>
>归档</el-button>
<el-button
type="primary"
link
:icon="PieChart"
@click="openDrawer('检测数据查询', scope.row)"
v-if="form.activeTabs === 5"
>检测数据查询</el-button
>
>检测数据查询</el-button>
<el-button
type="primary"
link
:icon="Switch"
@click="openDrawer('误差体系更换', scope.row)"
v-if="form.activeTabs === 5 && scope.row.documentState === 1"
>误差体系更换</el-button
>
>误差体系更换</el-button>
<div class='cn-render-buttons' v-if="form.activeTabs === 5 && scope.row.documentState === 1">
<el-dropdown trigger='click'>
@@ -214,17 +210,14 @@
:dialogTitle="dialogTitle"
@update:visible="dialogFormVisible = $event"
/> -->
<TestPopup ref="testPopup"></TestPopup>
<TestPopup ref="testPopup"></TestPopup>
<reportPopup
:visible="reportDialogVisible"
@update:visible="reportDialogVisible = $event"
></reportPopup>
<dataCheckPopup
:visible="dataCheckDialogVisible"
@update:visible="dataCheckDialogVisible = $event"
></dataCheckPopup>
<dataCheckPopup ref="dataCheckPopupRef"/>
<dataCheckChangeErrSysPopup
:visible="dataCheckChangeErrSysDialogVisible"
@@ -236,7 +229,7 @@
@update:visible="matchDialogVisible = $event"
></matchPopup>
<!--系数校准-->>
<!--系数校准-->
<ChannelsTest ref="channelsTest"></ChannelsTest>
</div>
</template>
@@ -255,7 +248,7 @@ import { getPlanList } from "@/api/plan/planList";
import deviceDataList from '@/api/device/device/deviceData'
import TestPopup from "./testPopup.vue";
import reportPopup from "./reportPopup.vue";
import dataCheckPopup from "./dataCheckPopup.vue";
import dataCheckPopup from "./dataCheckSingleChannelSingleTestPopup.vue";
import dataCheckChangeErrSysPopup from "./dataCheckChangeErrSysPopup.vue";
import { getBoundPqDevList } from '@/api/plan/plan.ts'
import { onMounted, reactive, ref, watch } from "vue";
@@ -273,7 +266,9 @@ const value1 = ref("");
const value2 = ref("");
const tableHeight = ref(0);
const reportDialogVisible = ref(false)
const dataCheckDialogVisible = ref(false)
const dataCheckPopupRef=ref<InstanceType<typeof dataCheckPopup>>()
const dataCheckChangeErrSysDialogVisible = ref(false)
const matchDialogVisible = ref(false)
const dialogTitle = ref('手动检测')
@@ -404,7 +399,7 @@ const getTableList = async (params: any) => {
}else{
checkStateList.value = checkStateTable.value
}
return getBoundPqDevList({'planId': props.id, 
return getBoundPqDevList({'planId': props.id,
'checkStateList': checkStateList.value,
'checkResult': form.value.checkResult,
'reportState': form.value.checkReportStatus,
@@ -866,7 +861,8 @@ const openDrawer = (title: string, row: any) => {
if(title === '检测数据查询')
{
dataCheckDialogVisible.value = true;
let device={}
dataCheckPopupRef.value?.open(device)
}
if (title === '误差体系更换')
{

3308
frontend/src/views/home/components/test.vue
View File

File diff suppressed because it is too large Load Diff

4
frontend/src/views/home/components/timeTest.vue
View File

@@ -10,12 +10,12 @@
<div class="error-dsc">
<div class="green-div"></div>
<span style=" color: #606266; font-size: 16px;font-weight: 600;">
守时误差≤1000ms
符合≤1000ms
</span>
<div class="red-div"></div>
<span style=" color: #F56C6c; font-size: 16px;font-weight: 600;">
守时误差>1000ms
不符合>1000ms
</span>
</div>
</div>

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

@@ -2,23 +2,23 @@
<template>
<div class="static">
<div class="left_tree">
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})" />
<tree ref="treeRef" :updateSelectedTreeNode="getPieData || (() => {})"/>
</div>
<!-- <span class="new_span">测试scss颜色</span> -->
<div class="right_container">
<!-- 功能选择 -->
<div class="container_function">
<div
class="function_item"
:class="
class="function_item"
:class="
item.checked ? 'function_item checked_function' : 'function_item'
"
v-for="(item, index) in tabsList"
:key="index"
@click="handleCheckFunction(item.value)"
v-for="(item, index) in tabsList"
:key="index"
@click="handleCheckFunction(item.value)"
>
<div class="item_img">
<img :src="item.img" alt="" />
<img :src="item.img" alt=""/>
</div>
<div class="item_text">
<p>{{ item.label }}</p>
@@ -26,46 +26,46 @@
</div>
</div>
<!-- <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1"> -->
<div class="container_pieShow">
<!-- <el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="检测进度展示" name="1"> -->
<div class="container_pieShow">
<el-collapse model-value="1" accordion @change="handleCollapseChange">
<el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
<!-- 饼图 -->
<div class="container_charts">
<div class="charts_info" ref="chartsInfoRef">
<pie
:customData="{
<el-collapse-item title="&nbsp&nbsp&nbsp&nbsp&nbsp检测计划统计" name="1">
<!-- 饼图 -->
<div class="container_charts">
<div class="charts_info" ref="chartsInfoRef">
<pie
:customData="{
title: '设备检测状态',
textAlign: 'left',
}"
:legendData="{
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData1"
ref="pieRef1"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
:chartsData="chartsData1"
ref="pieRef1"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '设备检测结果',
textAlign: 'left',
}"
:legendData="{
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData2"
ref="pieRef2"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
:chartsData="chartsData2"
ref="pieRef2"
></pie>
</div>
<div class="charts_info">
<pie
:customData="{
title: '设备报告状态',
textAlign: 'left',
label: {
@@ -74,56 +74,52 @@
},
},
}"
:legendData="{
:legendData="{
icon: 'circle',
left: 'left',
top: 'bottom',
}"
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
</el-collapse-item>
:chartsData="chartsData3"
ref="pieRef3"
></pie>
</div>
</div>
</el-collapse-item>
</el-collapse>
</div>
<el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }">
<el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }">
<!-- 列表数据 -->
<div class="container_table" :style="{ height: tableHeight }">
<Table ref="tableRef1" :id='currentId' :isTimeCheck = 'isTimeCheck'></Table>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="已检设备" v-if="tabShow" :style="{ height: tabPaneHeight }">-->
<!-- &lt;!&ndash; 列表数据 &ndash;&gt;-->
<!-- <div class="container_table" :style="{ height: tableHeight }">-->
<!-- <Table ref="tableRef2" :id='currentId'></Table>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
</el-tabs>
</div>
<el-tabs class="tabs-menu" type="border-card" @tab-change="handleTabsChange" v-model="editableTabsValue" :style="{ height: tabsHeight }">
<el-tab-pane :label="tabLabel1" :style="{ height: tabPaneHeight }">
<!-- 列表数据 -->
<div class="container_table" :style="{ height: tableHeight }">
<Table ref="tableRef1" :id='currentId' :isTimeCheck='isTimeCheck'></Table>
</div>
</el-tab-pane>
<!-- <el-tab-pane label="已检设备" v-if="tabShow" :style="{ height: tabPaneHeight }">-->
<!-- &lt;!&ndash; 列表数据 &ndash;&gt;-->
<!-- <div class="container_table" :style="{ height: tableHeight }">-->
<!-- <Table ref="tableRef2" :id='currentId'></Table>-->
<!-- </div>-->
<!-- </el-tab-pane>-->
</el-tabs>
</div>
</div>
</template>
<script lang="ts" setup>
import { getStaticTreeData } from "@/api/plan/static";
import pie from "@/components/echarts/pie/default.vue";
import { useRouter } from "vue-router";
import {useRouter} from "vue-router";
import tree from "../components/tree.vue";
import Table from "../components/table.vue";
//import { data } from "@/api/plan/static.json";
import deviceDataList from '@/api/device/device/deviceData'
import {getPlanListByPattern } from '@/api/plan/plan.ts'
import { onBeforeMount, onMounted, onUnmounted, ref, watch } from "vue";
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
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 { getBoundPqDevList } from '@/api/plan/plan.ts'
import { CENTERED_ALIGNMENT } from "element-plus/es/components/virtual-list/src/defaults";
import { ResultData } from "@/api/interface";
import {getBoundPqDevList, getPlanListByPattern} from '@/api/plan/plan.ts'
import {onBeforeMount, onUnmounted, ref, watch} from "vue";
import {useModeStore} from '@/stores/modules/mode'; // 引入模式 store
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";
const dictStore = useDictStore()
const modeStore = useModeStore();
@@ -143,10 +139,10 @@ const form: any = ref({
});
const router = useRouter();
const activeNames = ref(['2'])
const tabShow= ref(false);
const tabShow = ref(false);
const tabLabel1 = ref('设备检测')
const editableTabsValue = ref('0')
const checkStateTable = ref<number[]>([0,1,2])
const checkStateTable = ref<number[]>([0, 1, 2])
const tabsHeight = ref('calc(100vh - 538px)'); // 初始高度
const tabPaneHeight = ref('calc(100% - 5px)'); // 初始高度
@@ -220,53 +216,51 @@ const tableRef2 = ref();
const currentId = ref('');
watch(
() => form.value,
(val, oldVal) => {
if (val) {
() => form.value,
(val, oldVal) => {
if (val) {
if(form.value.activeTabs === 0 )//设备检测
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);
}
}
},
{
const tabledata = deviceData.filter((item) => item.document_State === "未归档")
tableRef1.value && tableRef1.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs,tabledata);
immediate: true,
deep: true,
}
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(
() => form.value,
(val, oldVal) => {
if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
() => form.value,
(val, oldVal) => {
if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs, form.value.activeChildTabs);
}
},
{
immediate: true,
deep: true,
}
},
{
immediate: true,
deep: true,
}
);
const pieRef1 = ref(),
pieRef2 = ref(),
pieRef3 = ref();
pieRef2 = ref(),
pieRef3 = ref();
const chartsData1: any = ref([]),
chartsData2: any = ref([]),
chartsData3: any = ref([]);
chartsData2: any = ref([]),
chartsData3: any = ref([]);
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
const findPlanById = (plans: Plan.ReqPlan[], id: string): Plan.ReqPlan | undefined => {
for (const plan of plans) {
if (plan.id === id) {
return plan;
@@ -287,14 +281,14 @@ const getPieData = async (id: string) => {
//handleCheckFunction(0)//切换左侧树，默认css功能是设备检测
// 初始化计数对象
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 reportStateCount: { [key: number]: number } = { 0: 0, 1: 0, 2: 0 };
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 reportStateCount: { [key: number]: number } = {0: 0, 1: 0, 2: 0};
if (id) {
const boundPqDevList = ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const plan = findPlanById(planList.value?.data || [], id);
if (plan) {
isTimeCheck.value = plan.timeCheck ===1; // 将 1 转换为 true，0 转换为 false
isTimeCheck.value = plan.timeCheck === 1; // 将 1 转换为 true，0 转换为 false
} else {
// 处理未找到计划的情况
isTimeCheck.value = false; // 或者其他默认值
@@ -320,20 +314,20 @@ const getPieData = async (id: string) => {
}
chartsData1.value = [
{ value: checkStateCount[0], name: "未检", itemStyle: { color: '#fac858' } },
{ value: checkStateCount[1], name: "检测中", itemStyle: { color: '#ee6666' } },
{ value: checkStateCount[2], name: "检测完成", itemStyle: { color: '#91cc75' } },
{ value: checkStateCount[3], name: "归档", itemStyle: { color: '#5470c6' } },
{value: checkStateCount[0], name: "未检", itemStyle: {color: '#fac858'}},
{value: checkStateCount[1], name: "检测中", itemStyle: {color: '#ee6666'}},
{value: checkStateCount[2], name: "检测完成", itemStyle: {color: '#91cc75'}},
{value: checkStateCount[3], name: "归档", itemStyle: {color: '#5470c6'}},
];
chartsData2.value = [
{ value: checkResultCount[2], name: "未检" , itemStyle: { color: '#fac858' } },
{ value: checkResultCount[0], name: "不符合" , itemStyle: { color: '#ee6666' } },
{ value: checkResultCount[1], name: "符合", itemStyle: { color: '#91cc75' } },
{value: checkResultCount[2], name: "未检", itemStyle: {color: '#fac858'}},
{value: checkResultCount[0], name: "不符合", itemStyle: {color: '#ee6666'}},
{value: checkResultCount[1], name: "符合", itemStyle: {color: '#91cc75'}},
];
chartsData3.value = [
{ value: reportStateCount[2], name: "未检" , itemStyle: { color: '#fac858' } },
{ value: reportStateCount[0], name: "未生成" , itemStyle: { color: '#ee6666' } },
{ value: reportStateCount[1], name: "已生成", itemStyle: { color: '#91cc75' } },
{value: reportStateCount[2], name: "未检", itemStyle: {color: '#fac858'}},
{value: reportStateCount[0], name: "未生成", itemStyle: {color: '#ee6666'}},
{value: reportStateCount[1], name: "已生成", itemStyle: {color: '#91cc75'}},
];
pieRef1.value.init();
@@ -344,7 +338,7 @@ const getPieData = async (id: string) => {
// pieRef3.value.reSize(470,145,true);
};
const getTree = (data?: any) => {
treeRef.value.getTreeData(data);
treeRef.value.getTreeData(data);
};
//前往检测
const handleDetection = () => {
@@ -374,76 +368,75 @@ const handleCheckFunction = (val: any) => {
switch (val) {
case 0://自动检测
checkStateTable.value = [0,1,2]
tabLabel1.value = "设备检测";
break;
checkStateTable.value = [0, 1, 2]
tabLabel1.value = "设备检测";
break;
case 1://手动检测
tabLabel1.value = "手动检测";
break;
tabLabel1.value = "手动检测";
break;
case 2://设备复检
tabLabel1.value = "设备复检";
break;
tabLabel1.value = "设备复检";
break;
case 3://报告生成
checkStateTable.value = [2,3]
tabLabel1.value = "报告生成";
//tabShow.value = true;
break;
checkStateTable.value = [2, 3]
tabLabel1.value = "报告生成";
//tabShow.value = true;
break;
case 4://设备归档
checkStateTable.value = [2]
tabLabel1.value = "设备归档";
break;
checkStateTable.value = [2]
tabLabel1.value = "设备归档";
break;
case 5://数据查询
checkStateTable.value = [2,3]
tabLabel1.value = "数据查询";
break;
checkStateTable.value = [2, 3]
tabLabel1.value = "数据查询";
break;
}
form.value.activeTabs = val;
};
const resizeObserver = new ResizeObserver(entries => {
for (let entry of entries) {
chartsWidth.value = entry.contentRect.width;
//console.log('Charts Info Width:', chartsWidth.value);
pieRef1.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);
pieRef1.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);
}
});
onBeforeMount(async () => {
const patternId = dictStore.getDictData('Pattern').find(item=>item.name=== modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
const reqPlan: Plan.ReqPlan = {
pattern: patternId,
datasourceIds: "",
sourceIds: "",
planId: "",
scriptName: "",
errorSysName: "",
sourceName: "",
devIds: [],
id: "",
name: "",
dataSourceId: "",
scriptId: "",
errorSysId: "",
timeCheck: 0,
testState: 0,
reportState: 0,
result: 0,
code: 0,
state: 0
};
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>;
const patternId = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
const reqPlan: Plan.ReqPlan = {
pattern: patternId,
datasourceIds: "",
sourceIds: "",
planId: "",
scriptName: "",
errorSysName: "",
sourceName: "",
devIds: [],
id: "",
name: "",
dataSourceId: "",
scriptId: "",
errorSysId: "",
timeCheck: 0,
testState: 0,
reportState: 0,
result: 0,
code: 0,
state: 0
};
planList.value = (await getPlanListByPattern(reqPlan)) as ResultData<Plan.ReqPlan[]>;
console.log('qqq',planList.value)
console.log('qqq', planList.value)
if (planList.value.data[0].children[0]) {
currentId.value = planList.value.data[0].children[0].id;
}
if (chartsInfoRef.value) {
if (chartsInfoRef.value) {
resizeObserver.observe(chartsInfoRef.value);
}
getTree(planList.value.data);
@@ -458,7 +451,6 @@ onUnmounted(() => {
});
</script>
<style lang="scss" scoped>
.static {
@@ -467,7 +459,7 @@ onUnmounted(() => {
height: 100%;
display: flex;
justify-content: space-between;
//background-color: #eee;
//background-color: #eee;
.left_tree {
width: 14% !important;
@@ -513,6 +505,7 @@ onUnmounted(() => {
border-radius: 8px;
padding: 0px 30px;
margin-right: 50px;;
.item_img {
width: 60px;
height: 60px;
@@ -542,7 +535,7 @@ onUnmounted(() => {
p {
margin: 0;
font-weight: 800;
color:#fff;
color: #fff;
font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}
@@ -565,6 +558,7 @@ onUnmounted(() => {
}
}
}
// .container_function {
// width: 100%;
// height: auto;
@@ -646,20 +640,21 @@ onUnmounted(() => {
// }
// }
.container_pieShow{
.container_pieShow {
width: 100% !important;
//min-height: 200px !important;
height:auto;
height: auto;
background-color: #eee;
// display: flex;
// justify-content: space-between;
// padding-left: 2ch;
margin-bottom: 10px;
}
.el-collapse {
width: 100% !important;
// min-height: 200px !important;
height:100% !important;
height: 100% !important;
background-color: #eee;
// display: flex;
// justify-content: space-between;
@@ -667,10 +662,10 @@ onUnmounted(() => {
// margin-bottom: 10px;
}
.el-collapse-item{
.el-collapse-item {
width: 100% !important;
// min-height: 200px !important;
height:100% !important;
height: 100% !important;
background-color: #eee;
// display: flex !important;
}
@@ -678,7 +673,7 @@ onUnmounted(() => {
.container_charts {
width: 100%;
//min-height: 180px !important;
height:100%;
height: 100%;
background-color: #eee;
display: flex;
justify-content: space-between;
@@ -695,14 +690,15 @@ onUnmounted(() => {
}
}
.el-tabs{
.el-tabs {
width: 100% !important;
border-radius: 4px;
}
.tabs-menu{
.tabs-menu {
height: 100%;
}
.container_table {
// width: 100%;
flex: 1 !important;
@@ -718,16 +714,19 @@ onUnmounted(() => {
}
}
}
:deep(.el-collapse-item__header){
:deep(.el-collapse-item__header) {
color: var(--el-color-primary);
font-size: 14px;
font-family: "Microsoft YaHei", "微软雅黑", "Arial", sans-serif;
}
:deep(.el-collapse-item__conten){
:deep(.el-collapse-item__conten) {
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}
:deep(.el-collapse-item__content ){
:deep(.el-collapse-item__content ) {
// background-color:#f6f6f6;
padding-bottom: 0px !important;
}