左侧树点击刷新饼图和表格

This commit is contained in:
sjl
2024-12-16 16:33:18 +08:00
parent 5da07d8631
commit a027dc75c3
3 changed files with 49 additions and 97 deletions

View File

@@ -25,10 +25,10 @@ module.exports = (appInfo) => {
*/ */
config.windowsOption = { config.windowsOption = {
title: '自动检测平台', title: '自动检测平台',
width: 1280, width: 1600,
height: 850, height: 950,
minWidth: 1280, minWidth: 1600,
minHeight: 850, minHeight: 950,
webPreferences: { webPreferences: {
//webSecurity: false, //webSecurity: false,
contextIsolation: false, // false -> 可在渲染进程中使用electron的apitrue->需要bridge.js(contextBridge) contextIsolation: false, // false -> 可在渲染进程中使用electron的apitrue->需要bridge.js(contextBridge)

View File

@@ -14,7 +14,7 @@
> >
<!-- :height="tableHeight" --> <!-- :height="tableHeight" -->
<!-- 表格 header 按钮 --> <!-- 表格 header 按钮 -->
<template #tableHeader="scope"> <template #tableHeader="">
<el-form :model="form" :inline="true"> <el-form :model="form" :inline="true">
<el-form-item label="关键字"> <el-form-item label="关键字">
<el-input v-model="form.search" placeholder="请输入设备名称、类型"></el-input> <el-input v-model="form.search" placeholder="请输入设备名称、类型"></el-input>
@@ -239,7 +239,7 @@
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import type { Device } from '@/api/device/interface/device' import type { Device } from '@/api/device/interface/device'
import { useHandleData } from "@/hooks/useHandleData"; import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage, ElMessageBox, ElLoading} from "element-plus"; import { ElMessage, ElMessageBox, ElLoading, Action} from "element-plus";
import ProTable from "@/components/ProTable/index.vue"; import ProTable from "@/components/ProTable/index.vue";
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface' import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import { import {
@@ -300,60 +300,56 @@ id: {
}) })
//下拉框数据 //下拉框数据
interface Dict {
id: string;
label: string;
}
//检测状态数据 //检测状态数据
let checkStatusList = reactive([ const checkStatus: Dict[] = [
{ {
label: "未检", id: "0",
value: 0, label: '未检',
disabled: false,
}, },
{ {
label: "检测中", id: "1",
value: 1, label: '检测中',
disabled: false,
}, },
{ {
label: "检测完成", id: "2",
value: 2, label: '检测完成',
disabled: false,
}, },
{ {
label: "归档", id: "3",
value: 3, label: '归档',
disabled: false,
}, },
]); ]
//检测报告状态数据 //检测报告状态数据
let checkReportStatusList = reactive([ const checkReportStatus: Dict[] = [
{ {
label: "已生成", id: "0",
value: 0, label: '已生成',
disabled: false,
}, },
{ {
label: "未生成", id: "1",
value: 1, label: '未生成',
disabled: false,
}, },
]); ]
//检测结果数组 //检测结果数组
let checkResultList = reactive([ const checkResult: Dict[] = [
{ {
label: "不符合", id: "0",
value: 0, label: '不符合',
disabled: false,
}, },
{ {
label: "符合", id: "1",
value: 1, label: '符合',
disabled: false,
}, },
{ {
label: "未检", id: "2",
value: 2, label: '未检',
disabled: false,
}, },
]); ]
//查询条件 //查询条件
const form: any = ref({ const form: any = ref({
@@ -385,21 +381,12 @@ const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段 // dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行 // 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([]); const tableList = ref([]);
const dataCallback = (data: any) => {
return {
list: data || data.data || data.list,
total: data.length || data.total, //total
};
};
const boundPqDevList=ref<Device.ReqPqDevParams[]>([])//根据检测计划id查询出所有已绑定的设备 const boundPqDevList=ref<Device.ReqPqDevParams[]>([])//根据检测计划id查询出所有已绑定的设备
const getTableList = async (params: any) => { const getTableList = async (params: any) => {
const pqDevList_Result2 = await getBoundPqDevList({'planId': props.id, 'checkStateList':[0,1,2]}); const pqDevList_Result2 = await getBoundPqDevList({'planId': props.id, 'checkStateList':[0,1,2]});
boundPqDevList.value = pqDevList_Result2.data as Device.ReqPqDevParams[]; boundPqDevList.value = pqDevList_Result2.data as Device.ReqPqDevParams[];
console.log('qwe',boundPqDevList.value)
console.log('qwe123',props.id)
return getBoundPqDevList({'planId': props.id, 'checkStateList':[0,1,2]}); return getBoundPqDevList({'planId': props.id, 'checkStateList':[0,1,2]});
}; };
@@ -413,6 +400,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
prop: 'name', prop: 'name',
label: '设备名称', label: '设备名称',
minWidth: 220, minWidth: 220,
//search: { el: 'input' },
}, },
{ {
prop: 'devType', prop: 'devType',
@@ -444,6 +432,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
label: '检测状态', label: '检测状态',
minWidth: 100, minWidth: 100,
sortable:true, sortable:true,
//enum:checkStatus,
isShow:checkStateShow, isShow:checkStateShow,
render: scope => { render: scope => {
return ( return (
@@ -455,6 +444,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
prop: 'checkResult', prop: 'checkResult',
label: '检测结果', label: '检测结果',
minWidth: 100, minWidth: 100,
//enum:checkResult,
sortable:true, sortable:true,
render: (scope) => { render: (scope) => {
if (scope.row.checkResult === 0) if (scope.row.checkResult === 0)
@@ -469,6 +459,7 @@ const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
prop: 'reportState', prop: 'reportState',
label: '报告状态', label: '报告状态',
minWidth: 100, minWidth: 100,
enum:checkReportStatus,
sortable:true, sortable:true,
render: scope => { render: scope => {
return ( return (
@@ -604,21 +595,7 @@ const handleSelectionChange = (selection: any[]) => {
//查询 //查询
const handleSearch = () => { const handleSearch = () => {
proTable.value?.getTableList();
if(form.value.activeTabs === 0)//设备检测、设备归档
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.document_State === "未归档")
}
else if(form.value.activeTabs === 4)
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档");
}
else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成");
}
//matchDialogVisible.value = true;
//proTable.value?.getTableList();
}; };
//重置 //重置
const handleRefresh = () => { const handleRefresh = () => {
@@ -627,18 +604,6 @@ const handleRefresh = () => {
form.value.checkResult = null; form.value.checkResult = null;
form.value.checkReportStatus = null; form.value.checkReportStatus = null;
if(form.value.activeTabs === 0)//设备检测、设备归档
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.document_State === "未归档")
}
else if(form.value.activeTabs === 4)
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成" && item.document_State === "未归档");
}
else if(form.value.activeTabs === 3 || form.value.activeTabs === 5)//报告生成、数据查询
{
deviceData.value = deviceDataList.plan_devicedata.filter((item) => item.check_State === "检测完成");
}
}; };
// 表格拖拽排序 // 表格拖拽排序
const sortTable = ({ const sortTable = ({
@@ -664,8 +629,8 @@ const changeActiveTabs = (val: number,val2: number,tabledata:any[]) => {
//根据当前功能,初始化表头下拉框中的默认值和禁用值 //根据当前功能,初始化表头下拉框中的默认值和禁用值
function tableHeaderInit(val: number) { function tableHeaderInit(val: number) {
console.log("tableHeader",val)
refreshStatusList() refreshStatusList()
switch (val) { switch (val) {
case 0://设备检测 case 0://设备检测
case 1://手动检测 case 1://手动检测
@@ -734,10 +699,8 @@ function tableHeaderInit(val: number) {
break; break;
} }
//console.log("test",columns); //console.log("test",columns);
} }
tableHeaderInit(0)
function refreshStatusList(){ function refreshStatusList(){
// devNum = 0; // devNum = 0;
// devChannelsNum = 0; // devChannelsNum = 0;
@@ -745,17 +708,17 @@ function refreshStatusList(){
devNum = 0; devNum = 0;
devChannelsNum = 0; devChannelsNum = 0;
devTestedNum = 0; devTestedNum = 0;
checkStatusList.map((item: any, index: any) => { checkStatus.map((item: any, index: any) => {
if (item.disabled) { if (item.disabled) {
item.disabled = false; item.disabled = false;
} }
}); });
checkReportStatusList.map((item: any, index: any) => { checkReportStatus.map((item: any, index: any) => {
if (item.disabled) { if (item.disabled) {
item.disabled = false; item.disabled = false;
} }
}); });
checkResultList.map((item: any, index: any) => { checkResult.map((item: any, index: any) => {
if (item.disabled) { if (item.disabled) {
item.disabled = false; item.disabled = false;
} }
@@ -767,21 +730,21 @@ function refreshStatusList(){
} }
function disableCheckStatus(val: string){ function disableCheckStatus(val: string){
checkStatusList.map((item: any, index: any) => { checkStatus.map((item: any, index: any) => {
if (val == item.label) { if (val == item.label) {
item.disabled = true; item.disabled = true;
} }
}); });
} }
function disableCheckReportStatus(val: string){ function disableCheckReportStatus(val: string){
checkReportStatusList.map((item: any, index: any) => { checkReportStatus.map((item: any, index: any) => {
if (val == item.label) { if (val == item.label) {
item.disabled = true; item.disabled = true;
} }
}); });
} }
function disablecheckResultList(val: string){ function disablecheckResultList(val: string){
checkResultList.map((item: any, index: any) => { checkResult.map((item: any, index: any) => {
if (val == item.label) { if (val == item.label) {
item.disabled = true; item.disabled = true;
} }
@@ -945,17 +908,12 @@ const openDrawer = (title: string, row: any) => {
} }
} }
onMounted(() => {
//console.log(proTable.value?.tableData);
});
// 监听 props.id 的变化 // 监听 props.id 的变化
watch( watch(
() => props.id, () => props.id,
(newId) => { (newId) => {
console.log(`props.id changed to ${newId}`);
// 调用获取数据的方法 // 调用获取数据的方法
getTableList({ type: 1, pageNum: 1, pageSize: 10 }); handleSearch();
}, },
{ immediate: true } // 立即执行一次 { immediate: true } // 立即执行一次
); );

View File

@@ -175,7 +175,6 @@ const handleTabsChange = (val: any) => {
form.value.activeTabs = 0; form.value.activeTabs = 0;
form.value.activeTabs = 3; form.value.activeTabs = 3;
form.value.activeChildTabs = Number(val); form.value.activeChildTabs = Number(val);
console.log(val)
} }
localStorage.setItem("color", "red"); localStorage.setItem("color", "red");
@@ -223,8 +222,6 @@ watch(
(val, oldVal) => { (val, oldVal) => {
if (val) { if (val) {
console.log(form.value.activeTabs,111);
if(form.value.activeTabs === 0 )//设备检测 if(form.value.activeTabs === 0 )//设备检测
{ {
const tabledata = deviceData.filter((item) => item.document_State === "未归档") const tabledata = deviceData.filter((item) => item.document_State === "未归档")
@@ -252,7 +249,6 @@ watch(
(val, oldVal) => { (val, oldVal) => {
if (val) { if (val) {
tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs); tableRef2.value && tableRef2.value.changeActiveTabs(form.value.activeTabs,form.value.activeChildTabs);
console.log(form.value.activeTabs,form.value.activeChildTabs);
} }
}, },
{ {
@@ -271,8 +267,8 @@ const chartsData1: any = ref([]),
chartsData2: any = ref([]), chartsData2: any = ref([]),
chartsData3: any = ref([]); chartsData3: any = ref([]);
const getPieData = async (id: string) => { const getPieData = async (id: string) => {
console.log('1qaz')
currentId.value = id; // 设置当前ID currentId.value = id; // 设置当前ID
handleCheckFunction(0)//切换左侧树默认css功能是设备检测
const boundPqDevList=ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备 const boundPqDevList=ref<Device.ResPqDev[]>([])//根据检测计划id查询出所有已绑定的设备
const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList':[0,1,2]}); const pqDevList_Result2 = await getBoundPqDevList({'planId': id, 'checkStateList':[0,1,2]});
@@ -346,7 +342,6 @@ const planDetail = () => {
}; };
//功能选择css切换 //功能选择css切换
const handleCheckFunction = (val: any) => { const handleCheckFunction = (val: any) => {
console.log('点击了css切换');
editableTabsValue.value = '0'; editableTabsValue.value = '0';
form.value.activeChildTabs = 0; form.value.activeChildTabs = 0;
tabsList.value.map((item: any, index: any) => { tabsList.value.map((item: any, index: any) => {
@@ -361,7 +356,6 @@ console.log('点击了css切换');
switch (val) { switch (val) {
case 0://自动检测 case 0://自动检测
getPieData(currentId.value);
tabLabel1.value = "设备检测"; tabLabel1.value = "设备检测";
break; break;
case 1://手动检测 case 1://手动检测