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-12 20:35:12 +08:00
parent 4b5498ad49
commit 6a5c783419
13 changed files with 1070 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

276
frontend/src/views/plan/autoTest/components/ShowDataPopup.vue Normal file
View File

@@ -0,0 +1,276 @@
<template>
<el-dialog class='table-box'
title="数据查询"
v-model='dialogVisible'
v-bind="dialogSmall"
width="1200"
height="600"
draggable
>
<div class='table-box'>
<el-tabs type="border-card">
<el-tab-pane label="检测结果">
<!-- 列表数据 -->
<div class="container_table1">
<ProTable
ref='proTable1'
:columns='columns1'
:data="testResultDatas"
>
</ProTable>
</div>
</el-tab-pane>
<el-tab-pane label="原始数据">
<!-- 列表数据 -->
<div class="container_table2">
<ProTable
ref='proTable2'
:columns='columns2'
:data="testDatas"
>
</ProTable>
</div>
</el-tab-pane>
</el-tabs>
</div>
</el-dialog>
</template>
<script setup lang='tsx' name='useRole'>
import { Role } from '@/api/role/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { useDownload } from '@/hooks/useDownload'
import { useAuthButtons } from '@/hooks/useAuthButtons'
import ProTable from '@/components/ProTable/index.vue'
import rolePopup from './components/rolePopup.vue'
import permissionUnit from './components/permissionUnit.vue'
import ImportExcel from '@/components/ImportExcel/index.vue'
import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
import {dialogSmall} from '@/utils/elementBind'
import { CirclePlus, Delete, EditPen, Share, Download, Upload, View, Refresh } from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import {
getRoleList,
deleteRole,
} from '@/api/role/role'
import { deleteUser } from '@/api/user/user'
const dialogVisible = ref(false)
const open = () => {
dialogVisible.value = true
}
defineExpose({ open })
// ProTable 实例
const proTable1 = ref<ProTableInstance>()
const proTable2 = ref<ProTableInstance>()
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const dataCallback = (data: any) => {
return {
records: data.list,
total: data.total,
current: data.pageNum,
size: data.pageSize,
}
}
// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
// 默认不做操作就直接在 ProTable 组件上绑定 :requestApi="getUserList"
const getTableList = (params: any) => {
let newParams = JSON.parse(JSON.stringify(params))
newParams.createTime && (newParams.startTime = newParams.createTime[0])
newParams.createTime && (newParams.endTime = newParams.createTime[1])
delete newParams.createTime
return getRoleList(newParams)
}
// 页面按钮权限（按钮权限既可以使用 hooks，也可以直接使用 v-auth 指令，指令适合直接绑定在按钮上，hooks 适合根据按钮权限显示不同的内容）
const { BUTTONS } = useAuthButtons()
interface TestResultData {
standardData: number,//标准值
testedData: number,//被检值
errorData: number,//误差值
errorValue: number,//误差允许值
testResult: string,//检测结果（合格、不合格、无法比较）
}
interface TestData {
dataTime: string,//数据时间（合格、不合格、无法比较）
standardData: number,//标准值
testedData: number,//被检值
}
//检测结果数组
const testResultDatas = [
{
standardData: 57.74,//标准值
testedData: 57.73,//被检值
errorData: 0.01,//误差值
errorValue: 0.05774,//误差允许值
testResult: "合格",//检测结果（合格、不合格、无法比较）
}
];
//原始数据数组
const testDatas = [
{
dataTime: "2024-11-11 14:05:00",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:03",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:06",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:09",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:12",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:15",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:18",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:21",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:24",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:27",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:30",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:33",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:36",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:39",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:42",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:45",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:48",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:51",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:54",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
{
dataTime: "2024-11-11 14:05:57",//检测数据时间
standardData: 57.74,//标准值
testedData: 57.73,//被检值
},
];
// 表格配置项
const columns1 = reactive<ColumnProps<TestResultData>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'standardData',
label: '标准值',
minWidth: 150,
},
{
prop: 'testedData',
label: '被检值',
minWidth: 150,
},
{
prop: 'errorData',
label: '误差值',
minWidth: 150,
},
{
prop: 'errorValue',
label: '误差允许值',
minWidth: 150,
},
{
prop: 'testResult',
label: '检测结果',
minWidth: 150,
},
])
// 表格配置项
const columns2 = reactive<ColumnProps<TestData>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'dataTime',
label: '数据时间',
minWidth: 200,
},
{
prop: 'standardData',
label: '标准值',
minWidth: 150,
},
{
prop: 'testedData',
label: '被检值',
minWidth: 150,
},
])
</script>

225
frontend/src/views/plan/autoTest/index.vue
View File

@@ -1,7 +1,25 @@
<template>
<!-- 自动检测页面 -->
<div class="test">
<div class="test_left">
<!-- 顶部筛选条件&返回按钮 -->
<!-- {{ printText }} -->
<div class="test_top">
<el-checkbox
v-for="(item, index) in detectionOptions"
:model-value="item.id"
:true-value="item.id"
:key="index"
style="pointer-events: none"
>{{ item.name }}</el-checkbox
>
<el-button type="primary" @click="handlePreTest">启动预检测</el-button>
<el-button type="primary" @click="handleAutoTest">进入检测流程</el-button>
<el-button type="primary" @click="handleBackDeviceList"
>返回检测首页</el-button
>
</div>
<div class="test_bot">
<div class="test_left">
<Tree ref="treeRef"></Tree>
</div>
<div class="test_right">
@@ -42,7 +60,7 @@
>
</div>
</template>
<el-descriptions-item width="0px" label="上送数据总数">
<!-- <el-descriptions-item width="0px" label="上送数据总数">
{{ num }}
</el-descriptions-item>
<el-descriptions-item width="0px" label="已上送数据数">
@@ -50,7 +68,7 @@
</el-descriptions-item>
<el-descriptions-item width="0px" label="待上送数据数">
{{ num2 }}
</el-descriptions-item>
</el-descriptions-item> -->
</el-descriptions>
<!-- 右侧列表 -->
<div class="right_table">
@@ -74,9 +92,18 @@
v-for="(item, index) in deviceTestList"
:key="index"
>
<p v-for="(vv, vvs) in item.children" :key="vvs">
<!-- <p v-for="(vv, vvs) in item.children" :key="vvs">
{{ vv.status }}
</p>
</p> -->
<el-button
v-for="(vv, vvs) in item.children"
:key="vvs"
:type="vv.type"
text
@click="handleClick(item,index,vvs)"
>
{{ vv.label }}
</el-button>
</div>
</div>
</div>
@@ -106,7 +133,10 @@
</p>
</div>
</div>
</div>
</div>
</div>
<ShowDataPopup ref='showDataPopup'/>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive, nextTick } from "vue";
@@ -116,6 +146,7 @@ import ProTable from "@/components/ProTable/index.vue";
import { useTransition } from "@vueuse/core";
import { getPlanList } from "@/api/plan/planList";
import { ElMessage, ElMessageBox } from "element-plus";
import ShowDataPopup from './components/ShowDataPopup.vue'
import {
CirclePlus,
Delete,
@@ -130,6 +161,111 @@ import {
Close,
} from "@element-plus/icons-vue";
const treeRef = ref<any>();
const PopupVisible = ref(false)
const showDataPopup = ref()
//定义与预检测配置数组
const detectionOptions = [
{
id: 0,
name: "标准源通讯检测",
},
{
id: 1,
name: "设备通讯检测",
},
{
id: 2,
name: "协议校验",
},
{
id: 3,
name: "数据校对",
},
];
const leftDeviceData = ref<any>([
// {
// id: 0,
// name: "设备1-预检测",
// status: 0,
// },
// {
// id: 1,
// name: "设备2-预检测",
// status: 1,
// },
// {
// id: 2,
// name: "设备3-预检测",
// status: 1,
// },
// {
// id: 3,
// name: "设备4-预检测",
// status: 0,
// },
// {
// id: 4,
// name: "设备5-预检测",
// status: 1,
// },
// {
// id: 5,
// name: "设备6-预检测",
// status: 0,
// },
]);
const initLeftDeviceData = () => {
leftDeviceData.value.map((item, index) => {
// handlePrintText(item.name, index);
});
};
// 点击数据结果
const handleClick = (item,index,vvs) => {
//const data = "检测脚本为："+item.name+";被检设备为："+item.children.value.devID+";被检通道序号为："+ item.children.monitorIndex;
console.log(vvs,index,item.name,item.children)
PopupVisible.value = true
showDataPopup.value.open()
};
//启动预检测
const handlePreTest = () => {
ElMessage.success("启动预检测");
let count = 0;
if (timer) {
clearInterval(timer);
count = 0;
leftDeviceData.value = [];
}
if (count == 5) {
count = 0;
} else {
timer = setInterval(async () => {
count++;
if (count > 15) return;
await nextTick(() => {
leftDeviceData.value.push({
id: count,
name: "设备" + count + "预检测",
status: count % 2 == 0 ? 0 : 1,
});
});
}, 2000);
}
};
//进入检测流程
const handleAutoTest = () => {
router.push({
path: "/plan/autoTest",
});
};
//返回设备列表
const handleBackDeviceList = () => {
router.push({
path: "/plan/home/index",
});
};
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: "selection", fixed: "left", width: 70 },
@@ -283,22 +419,22 @@ const getTableList = (params: any) => {
const percentage = ref(0);
const customColors = [
{ color: "red", percentage: 0 },
{ color: "red", percentage: 10 },
{ color: "red", percentage: 20 },
{ color: "red", percentage: 30 }, //红
{ color: "red", percentage: 40 },
{ color: "#e6a23c", percentage: 50 },
{ color: "#e6a23c", percentage: 60 },
{ color: "#e6a23c", percentage: 70 }, //黄
{ color: "#e6a23c", percentage: 80 }, //1989fa
{ color: "#e6a23c", percentage: 90 }, //1989fa
// { color: "red", percentage: 0 },
// { color: "red", percentage: 10 },
// { color: "red", percentage: 20 },
// { color: "red", percentage: 30 }, //红
// { color: "red", percentage: 40 },
// { color: "#e6a23c", percentage: 50 },
// { color: "#e6a23c", percentage: 60 },
// { color: "#e6a23c", percentage: 70 }, //黄
// { color: "#e6a23c", percentage: 80 }, //1989fa
// { color: "#e6a23c", percentage: 90 }, //1989fa
{ color: "#5cb87a", percentage: 100 }, //绿
];
//加载进度条
const refreshProgress = () => {
if (percentage.value < 100) {
percentage.value += 10;
percentage.value += 1;
num1.value += 1001;
num2.value -= 1001;
} else {
@@ -323,21 +459,37 @@ const deviceData = ref([
id: 0,
name: "设备1通道1",
status: Math.floor(Math.random() * 4),
type:"info",
label:"/",
devID:"dev1",
monitorIndex:1,
},
{
id: 1,
name: "设备2通道2",
name: "设备1通道2",
status: Math.floor(Math.random() * 4),
type:"success",
label:"√",
devID:"dev1",
monitorIndex:2,
},
{
id: 2,
name: "设备3通道3",
name: "设备2通道1",
status: Math.floor(Math.random() * 4),
type:"danger",
label:"×",
devID:"dev2",
monitorIndex:1,
},
{
id: 3,
name: "设备4通道4",
name: "设备3通道1",
status: Math.floor(Math.random() * 4),
type:"success",
label:"√",
devID:"dev3",
monitorIndex:1,
},
]);
const interValTest = () => {
@@ -348,6 +500,8 @@ const interValTest = () => {
children: deviceData.value,
// status: Math.floor(Math.random() * 4),
});
// console.log(deviceTestList.value,11111);
refreshProgress();
}, 2000);
statusTimer.value = setInterval(() => {
@@ -431,7 +585,31 @@ onMounted(() => {
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
.test_top {
width: 100%;
height: 50px;
display: flex;
background-color: #fff;
justify-content: flex-start;
align-items: center;
border-radius: 4px;
padding: 0 10px;
box-sizing: border-box;
.el-button {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
}
}
.test_bot {
flex: 1;
margin-top: 10px;
display: flex;
height: calc(100vh - 240px);
.test_left {
max-width: 300px;
min-width: 200px;
@@ -484,11 +662,13 @@ onMounted(() => {
.right_device_title {
width: 100%;
display: flex;
justify-content: space-between;
justify-content: center;
// overflow-x: auto !important;
p {
flex: 1;
// max-width: 150px;
text-align: center;
width: auto;
padding: 0 10px;
margin: 0;
@@ -503,7 +683,7 @@ onMounted(() => {
display: flex;
justify-content: space-between;
align-items: center;
p {
.el-button {
flex: 1;
// max-width: 150px;
min-width: auto;
@@ -534,6 +714,7 @@ onMounted(() => {
}
}
}
}
}
::v-deep .header-button-lf {