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:
GYYM
2024-11-07 20:41:32 +08:00
parent 4695a82b38
commit 9804baf8a3
11 changed files with 425 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,6 +3,7 @@
<ProTable
ref="proTable"
:columns="columns"
:data='deviceData'
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
@@ -13,62 +14,35 @@
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-form :model="form" label-width="80px" :inline="true">
<el-form-item label="检测状态" v-if="form.activeTabs != 5">
<el-select v-model="form.checkStatus">
<el-form-item label="检测状态">
<el-select v-model="form.checkStatus" clearable>
<el-option
v-for="(item, index) in checkStatusList"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="报告状态" v-if="form.activeTabs != 5">
<el-select v-model="form.checkReportStatus">
<el-form-item label="报告状态">
<el-select v-model="form.checkReportStatus" clearable>
<el-option
v-for="(item, index) in checkReportStatusList"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测结果" v-if="form.activeTabs != 5">
<el-select v-model="form.checkResult">
<el-form-item label="检测结果">
<el-select v-model="form.checkResult" clearable>
<el-option
v-for="(item, index) in checkResultList"
:label="item.label"
:value="item.value"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="绑定状态" v-if="form.activeTabs == 5">
<el-select v-model="form.deviceBindStatus">
<el-option
v-for="(item, index) in deviceBindStatusList"
:label="item.label"
:value="item.value"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备类型" v-if="form.activeTabs == 5">
<el-select v-model="form.deviceType">
<el-option
v-for="(item, index) in deviceTypeList"
:label="item.label"
:value="item.value"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="制造厂商" v-if="form.activeTabs == 5">
<el-select v-model="form.manufacturer">
<el-option
v-for="(item, index) in manufacturerList"
:label="item.label"
:value="item.value"
:disabled="item.disabled"
:key="index"
></el-option>
</el-select>
@@ -90,10 +64,18 @@
>启动手动检测</el-button
>
<el-button type="primary" v-if="form.activeTabs === 2"
>报告生成</el-button
>不合格项复检</el-button
>
<el-button type="primary" v-if="form.activeTabs === 5"
>设备导入</el-button
<el-button type="primary" v-if="form.activeTabs === 2"
>全部复检</el-button
>
<el-button type="primary" v-if="form.activeTabs === 3"
>批量生成报告</el-button
>
<el-button type="primary" v-if="form.activeTabs === 4"
>设备批量归档</el-button
>
</el-form-item>
</el-form>
@@ -128,120 +110,136 @@
<script setup lang="tsx" name="useProTable">
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import type { Device } from '@/api/device/interface'
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import { type ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import {
Search,
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
import deviceDataList from '@/api/device/deviceData'
import { log } from "console";
import { isVisible } from "element-plus/es/utils";
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
const tableHeight = ref(0);
console.log(window.innerHeight, "+++++++++");
tableHeight.value = window.innerHeight - 630;
const deviceData = deviceDataList.plan_devicedata
//下拉框数据
//检测状态数据
const checkStatusList = [
let checkStatusList = reactive([
{
label: "未检测",
value: 0,
disabled: false,
},
{
label: "检测中",
value: 1,
disabled: false,
},
{
label: "检测完成",
value: 2,
disabled: false,
},
{
label: "归档",
value: 3,
disabled: false,
},
];
]);
//检测报告状态数据
const checkReportStatusList = [
let checkReportStatusList = reactive([
{
label: "未生成报告",
value: 0,
disabled: false,
},
{
label: "已生成报告",
value: 1,
disabled: false,
},
];
]);
//检测结果数组
const checkResultList = [
let checkResultList = reactive([
{
label: "/",
value: null,
label: "未出结果",
value: 0,
disabled: false,
},
{
label: "不合格",
value: 0,
value: 1,
disabled: false,
},
{
label: "合格",
value: 1,
value: 2,
disabled: false,
},
];
]);
//绑定状态数组
const deviceBindStatusList = [
{
label: "未绑定",
value: 0,
},
{
label: "已绑定",
value: 1,
},
];
//设备类型数组
const deviceTypeList = [
{
label: "PQS882A",
value: 0,
},
{
label: "PQS882B4",
value: 1,
},
{
label: "PQS882B5",
value: 2,
},
{
label: "PQS882B6",
value: 3,
},
{
label: "PQS882B7",
value: 4,
},
{
label: "PQS882B8",
value: 5,
},
];
//制造厂商数组
const manufacturerList = [
{
label: "南京灿能电力",
value: 0,
},
{
label: "南瑞继保",
value: 1,
},
{
label: "中电",
value: 2,
},
];
// const deviceBindStatusList = [
// {
// label: "未绑定",
// value: 0,
// disabled: true,
// },
// {
// label: "已绑定",
// value: 1,
// disabled: true,
// },
// ];
// //设备类型数组
// const deviceTypeList = [
// {
// label: "PQS882A",
// value: 0,
// },
// {
// label: "PQS882B4",
// value: 1,
// },
// {
// label: "PQS882B5",
// value: 2,
// },
// {
// label: "PQS882B6",
// value: 3,
// },
// {
// label: "PQS882B7",
// value: 4,
// },
// {
// label: "PQS882B8",
// value: 5,
// },
// ];
// //制造厂商数组
// const manufacturerList = [
// {
// label: "南京灿能电力",
// value: 0,
// },
// {
// label: "南瑞继保",
// value: 1,
// },
// {
// label: "中电",
// value: 2,
// },
// ];
//查询条件
const form: any = ref({
activeTabs: 0, //功能选择
@@ -285,64 +283,111 @@ const getTableList = (params: any) => {
delete newParams.createTime;
return getPlanList(newParams);
};
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: "selection", fixed: "left", width: 70 },
{
prop: "checkMode",
label: "设备序列号",
width: 140,
render: (scope) => {
return scope.row.checkMode == 0
? "设备1"
: scope.row.checkMode == 1
? "设备2"
: scope.row.checkMode == 2
? "设备3"
: scope.row.checkMode;
const columns = reactive<ColumnProps<Device.ResPqDev>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{
prop: 'name',
label: '名称',
minWidth: 120,
},
},
{
prop: "checkMode",
label: "设备类型",
width: 140,
render: (scope) => {
return scope.row.checkMode == 0
? "PQS991"
: scope.row.checkMode == 1
? "PQS882"
: scope.row.checkMode == 2
? "PQS6666"
: scope.row.checkMode;
{
prop: 'dev_Type',
label: '类型',
minWidth: 100,
},
},
{
prop: "checkFrom",
label: "制造厂商",
width: 140,
render: (scope) => {
return scope.row.checkFrom == 0
? "南京灿能"
: scope.row.checkFrom == 1
? "南瑞继保"
: scope.row.checkFrom == 2
? "/"
: scope.row.checkFrom;
{
prop: 'dev_Chns',
label: '通道数',
minWidth: 100,
},
},
{
prop: "numberFromName",
label: "MAC/IP",
render: (scope) => {
return scope.row.numberFromName == 0
? "192.168.0.1"
: scope.row.numberFromName == 1
? "192.168.0.2"
: scope.row.numberFromName == 2
? "192.168.0.3"
: scope.row.numberFromName;
{
prop: 'reCheck_Num',
label: '复检次数',
minWidth: 70,
},
},
{
prop: 'report_State',
label: '报告状态',
minWidth: 130,
},
{
prop: 'check_Result',
label: '检测结果',
minWidth: 130,
},
{
prop: 'check_State',
label: '检测状态',
minWidth: 130,
},
{
prop: 'document_State',
label: '归档状态',
minWidth: 130,
},
// { prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 },
])
// 表格配置项
// const columns = reactive<ColumnProps<User.ResUserList>[]>([
// { type: "selection", fixed: "left", width: 70 },
// {
// prop: "checkMode",
// label: "设备序列号",
// width: 140,
// render: (scope) => {
// return scope.row.checkMode == 0
// ? "设备1"
// : scope.row.checkMode == 1
// ? "设备2"
// : scope.row.checkMode == 2
// ? "设备3"
// : scope.row.checkMode;
// },
// },
// {
// prop: "checkMode",
// label: "设备类型",
// width: 140,
// render: (scope) => {
// return scope.row.checkMode == 0
// ? "PQS991"
// : scope.row.checkMode == 1
// ? "PQS882"
// : scope.row.checkMode == 2
// ? "PQS6666"
// : scope.row.checkMode;
// },
// },
// {
// prop: "checkFrom",
// label: "制造厂商",
// width: 140,
// render: (scope) => {
// return scope.row.checkFrom == 0
// ? "南京灿能"
// : scope.row.checkFrom == 1
// ? "南瑞继保"
// : scope.row.checkFrom == 2
// ? "/"
// : scope.row.checkFrom;
// },
// },
// {
// prop: "numberFromName",
// label: "MAC/IP",
// render: (scope) => {
// return scope.row.numberFromName == 0
// ? "192.168.0.1"
// : scope.row.numberFromName == 1
// ? "192.168.0.2"
// : scope.row.numberFromName == 2
// ? "192.168.0.3"
// : scope.row.numberFromName;
// },
// },
// {
// prop: "checkExe",
// label: "检测脚本",
@@ -428,7 +473,7 @@ const columns = reactive<ColumnProps<User.ResUserList>[]>([
// },
// },
// { prop: "operation", label: "操作", fixed: "right", width: 250 },
]);
// ]);
// 跳转详情页
const toDetail = () => {
router.push(
@@ -507,7 +552,94 @@ const changeStatus = async (row: User.ResUserList) => {
//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number) => {
form.value.activeTabs = val;
tableHeaderInit(val)
console.log(form,val,666)
};
//根据当前功能，初始化表头下拉框中的默认值和禁用值
function tableHeaderInit(val: number) {
refreshStatusList()
switch (val) {
case 0://自动检测
case 1://手动检测
form.value.checkStatus = 0;//检测状态默认为未检
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 0;//检测结果默认为未出结果
disableCheckStatus("检测中")
disableCheckStatus("归档")
break;
case 2://设备复检
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 1;//检测结果默认为不合格
disableCheckStatus("未检")
disableCheckStatus("检测中")
disableCheckStatus("归档")
disablecheckResultList("未出结果")
break;
case 3://报告生成
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 0;//检测报告状态默认为未生成报告
form.value.checkResult = 2;//检测结果默认为合格
disableCheckStatus("未检")
disableCheckStatus("检测中")
disableCheckStatus("归档")
disablecheckResultList("未出结果")
break;
case 4://设备归档
form.value.checkStatus = 2;//检测状态默认为检测完成
form.value.checkReportStatus = 1;//检测报告状态默认为已生成报告
form.value.checkResult = 2;//检测结果默认为合格
disableCheckStatus("未检")
disableCheckStatus("检测中")
disableCheckStatus("归档")
disableCheckReportStatus("未生成报告")
disablecheckResultList("未出结果")
break;
case 5://报告浏览
break;
}
}
function refreshStatusList(){
checkStatusList.map((item: any, index: any) => {
if (item.disabled) {
item.disabled = false;
}
});
checkReportStatusList.map((item: any, index: any) => {
if (item.disabled) {
item.disabled = false;
}
});
checkResultList.map((item: any, index: any) => {
if (item.disabled) {
item.disabled = false;
}
});
}
function disableCheckStatus(val: string){
checkStatusList.map((item: any, index: any) => {
if (val == item.label) {
item.disabled = true;
}
});
}
function disableCheckReportStatus(val: string){
checkReportStatusList.map((item: any, index: any) => {
if (val == item.label) {
item.disabled = true;
}
});
}
function disablecheckResultList(val: string){
checkResultList.map((item: any, index: any) => {
if (val == item.label) {
item.disabled = true;
}
});
}
//启动自动检测/手动检测
const handleTest = () => {
//自动检测
@@ -523,6 +655,7 @@ const handleTest = () => {
});
}
};
onMounted(() => {
console.log(proTable.value?.tableData);
});

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

@@ -116,27 +116,27 @@ const tabsList = ref([
checked: false,
},
{
label: "报告生成",
label: "设备复检",
value: 2,
img: "/src/assets/images/plan/static/6.svg",
checked: false,
},
{
label: "报告生成",
value: 3,
img: "/src/assets/images/plan/static/3.svg",
checked: false,
},
{
label: "设备归档",
value: 3,
value: 4,
img: "/src/assets/images/plan/static/4.svg",
checked: false,
},
{
label: "设备浏览",
value: 4,
img: "/src/assets/images/plan/static/5.svg",
checked: false,
},
{
label: "设备导入",
value: 5,
img: "/src/assets/images/plan/static/6.svg",
img: "/src/assets/images/plan/static/5.svg",
checked: false,
},
]);
@@ -187,11 +187,12 @@ const getPieData = () => {
pieRef1.value.init();
};
const getTree = () => {
getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
console.log(res, "99999999");
// treeRef.value.getTreeData(res.data);
treeRef.value.getTreeData(data);
});
treeRef.value.getTreeData(data);
// getStaticTreeData({ userName: "zhangsan", planName: "111" }).then((res) => {
// console.log(res, "99999999");
// // treeRef.value.getTreeData(res.data);
// treeRef.value.getTreeData(data);
// });
};
//前往检测
const handleDetection = () => {
@@ -207,6 +208,8 @@ const planDetail = () => {
};
//功能选择css切换
const handleCheckFunction = (val: any) => {
console.log("test1",val);
tabsList.value.map((item: any, index: any) => {
if (val == index) {
item.checked = true;

4
frontend/src/views/plan/planList/components/devPopup.vue
View File

@@ -33,7 +33,7 @@
<!-- <el-button type='primary' :icon='Download' >下载报告</el-button> -->
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' >查看</el-button>
<!-- <el-button type='primary' link :icon='View' >查看</el-button> -->
<el-button type='primary' link :icon='Delete' >移除</el-button>
</template>
</ProTable>
@@ -100,7 +100,7 @@
label: '归档状态',
minWidth: 130,
},
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 200 },
{ prop: 'operation', label: '操作', fixed: 'right', minWidth: 150 },
])
const open = (textTitle: string) => {

2
frontend/src/views/plan/planList/components/devSelectPopup.vue
View File

@@ -96,7 +96,7 @@
minWidth: 120,
},
{
prop: 'PlanName',
prop: 'planName',
label: '所属计划',
search: { el: 'input' },
minWidth: 280,

8
frontend/src/views/plan/planList/components/planPopup.vue
View File

@@ -9,10 +9,10 @@
<el-form-item label="父计划" prop="father_Plan_Id" :label-width="100">
<el-select v-model="formData.father_Plan_Id" placeholder="请选择父计划" autocomplete="off" :disabled="isReadOnly" @change="fatherPlanChange">
<el-option
v-for="plan in fatherPlanList"
:key="plan.value"
v-for="plan in testFatherPlanList"
:key="plan.id"
:label="plan.label"
:value="plan.value">
:value="plan.id">
</el-option>
</el-select>
</el-form-item>
@@ -62,7 +62,7 @@
import{ElMessage, FormInstance,FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogSmall} from '@/utils/elementBind'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData} from '@/api/plan/planData'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
const props = defineProps<{
visible: boolean;

4
frontend/src/views/plan/planList/components/sourcePopup.vue
View File

@@ -26,7 +26,7 @@
<!-- <el-button type='primary' :icon='Download' >下载报告</el-button> -->
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' >查看</el-button>
<!-- <el-button type='primary' link :icon='View' >查看</el-button> -->
<el-button type='primary' link :icon='Delete' >移除</el-button>
</template>
</ProTable>
@@ -77,7 +77,7 @@
search: { el: 'select' },
minWidth: 150,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 330 },
{ prop: 'operation', label: '操作', fixed: 'right', width: 150 },
])
const open = (textTitle: string) => {

21
frontend/src/views/plan/planList/index.vue
View File

@@ -45,7 +45,7 @@ import ProTable from '@/components/ProTable/index.vue'
import TimeControl from '@/components/TimeControl/index.vue'
import type { ProTableInstance,ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View,Upload,Download,List} from '@element-plus/icons-vue'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData} from '@/api/plan/planData'
import {dictPattern,dictTestState,dictReportState,dictResult,testPlanDataList,testSoureDataList,testScriptDataList,testErrSystDataList,planData,testFatherPlanList} from '@/api/plan/planData'
import { reactive,ref } from 'vue'
import type { Plan } from '@/api/plan/interface'
import planPopup from "@/views/plan/planList/components/planPopup.vue"; // 导入子组件
@@ -121,37 +121,40 @@ const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
prop: 'test_State',
label: '检测状态',
width: 100,
enum: dictStore.getDictData('planTestState'),
enum: dictTestState,
// enum: dictStore.getDictData('planTestState'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'label', value: 'code' },
fieldNames: { label: 'label', value: 'id' },
},
{
prop: 'report_State',
label: '检测报告状态',
width: 150,
enum: dictStore.getDictData('planReportState'),
enum: dictReportState,
// enum: dictStore.getDictData('planReportState'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'label', value: 'code' },
fieldNames: { label: 'label', value: 'id' },
},
{
prop: 'result',
label: '检测结果',
width: 100,
enum: dictStore.getDictData('planResult'),
enum: dictResult,
// enum: dictStore.getDictData('planResult'),
search: { el: 'select', props: { filterable: true } },
fieldNames: { label: 'label', value: 'code' },
fieldNames: { label: 'label', value: 'id' },
},
{
prop: 'father_Plan_Id',
label: '父节点',
width: 200,
enum: testFatherPlanList,
fieldNames: { label: 'label', value: 'id' },
},
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 500, },
])
const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput
function openFileDialog() {
if (fileInput.value) {