修改检测入口、预检测、正式检测页面
This commit is contained in:
276
frontend/src/views/plan/autoTest/components/ShowDataPopup.vue
Normal file
276
frontend/src/views/plan/autoTest/components/ShowDataPopup.vue
Normal 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>
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,13 +1,20 @@
|
||||
<template>
|
||||
<!-- 权限信息弹出框 -->
|
||||
<el-dialog :model-value="dialogVisible" title="编辑计划所属设备" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
|
||||
<el-dialog :model-value="dialogVisible" title="设备绑定" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
|
||||
<div>
|
||||
<el-transfer v-model="value"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入内容搜索"
|
||||
:data="data"
|
||||
:titles="['未绑定设备', '计划所属设备']"/>
|
||||
:titles="['未绑定设备', '已绑定设备']">
|
||||
<template #default="{ option }">
|
||||
<el-tooltip :content="option.tips" placement="top" :show-after=1000>
|
||||
<span>{{ option.label }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-transfer>
|
||||
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
@@ -34,6 +41,7 @@
|
||||
key: number
|
||||
label: string
|
||||
initial: string
|
||||
tips: string
|
||||
}
|
||||
|
||||
const generateData = () => {
|
||||
@@ -47,14 +55,21 @@
|
||||
'易司拓测试装置',
|
||||
'山大电力测试装置1',
|
||||
'山大电力测试装置2',
|
||||
'滚动条测试1',
|
||||
'滚动条测试2',
|
||||
'滚动条测试3',
|
||||
'滚动条测试4',
|
||||
'滚动条测试5',
|
||||
'滚动条测试6',
|
||||
]
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'GT']
|
||||
const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'GT', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT', 'GT']
|
||||
states.forEach((city, index) => {
|
||||
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
initial: initials[index],
|
||||
tips:"PQS882A 192.16.1.136",
|
||||
})
|
||||
})
|
||||
return data
|
||||
|
||||
119
frontend/src/views/plan/planList/components/sourceTransfer.vue
Normal file
119
frontend/src/views/plan/planList/components/sourceTransfer.vue
Normal file
@@ -0,0 +1,119 @@
|
||||
<template>
|
||||
<!-- 权限信息弹出框 -->
|
||||
<el-dialog :model-value="dialogVisible" title="检测源绑定" v-bind="dialogBig" @close="handleCancel" width="600" draggable>
|
||||
<div>
|
||||
<el-transfer v-model="value"
|
||||
class="custom-transfer"
|
||||
filterable
|
||||
:filter-method="filterMethod"
|
||||
filter-placeholder="请输入内容搜索"
|
||||
:data="data"
|
||||
:titles="['未绑定检测源', '已绑定检测源']">
|
||||
<template #default="{ option }">
|
||||
<el-tooltip :content="option.tips" placement="top" :show-after=1000>
|
||||
<span>{{ option.label }}</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-transfer>
|
||||
</div>
|
||||
<template #footer>
|
||||
<div class="dialog-footer">
|
||||
<el-button @click="handleCancel">取消</el-button>
|
||||
<el-button type="primary" @click="handleCancel">
|
||||
保存
|
||||
</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue'
|
||||
import type { Device } from '@/api/device/interface'
|
||||
import deviceDataList from '@/api/device/deviceData'
|
||||
import { dialogBig } from '@/utils/elementBind'
|
||||
|
||||
const {dialogVisible} = defineProps<{
|
||||
dialogVisible: boolean;
|
||||
}>()
|
||||
|
||||
interface Option {
|
||||
key: number
|
||||
label: string
|
||||
initial: string
|
||||
tips: string
|
||||
}
|
||||
|
||||
const generateData = () => {
|
||||
const data: Option[] = []
|
||||
const states = [
|
||||
'标准源-福禄克-6100A',
|
||||
'标准源-昂立-PF2',
|
||||
'标准源-丹迪克-DKLN1',
|
||||
'标准源-博电源-PQC600A',
|
||||
'高精度设备-PQV520-1',
|
||||
'高精度设备-PQV520-2',
|
||||
]
|
||||
const initials = ['FLUKE.6100A', 'ANGLI-FP2', 'DKLN-1', 'PQC600A', 'PQV520-1', 'PQV520-2']
|
||||
states.forEach((city, index) => {
|
||||
|
||||
data.push({
|
||||
label: city,
|
||||
key: index,
|
||||
initial: initials[index],
|
||||
tips:"IP:192.16.1.124",
|
||||
})
|
||||
})
|
||||
return data
|
||||
}
|
||||
const generateValue = () => {
|
||||
const data: number[] = []
|
||||
const states = [
|
||||
'高精度设备-PQV520-1',
|
||||
'高精度设备-PQV520-2',
|
||||
]
|
||||
const initials = ['PQV520-1', 'PQV520-2']
|
||||
states.forEach((city, index) => {
|
||||
const key = states.indexOf(city)
|
||||
if (key !== -1) {
|
||||
data.push(key)
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
// const generateValue = () => {
|
||||
// const data: Option[] = []
|
||||
// const states = [
|
||||
// '山大电力测试装置1',
|
||||
// '山大电力测试装置2',
|
||||
// ]
|
||||
// const initials = ['AB', 'CD']
|
||||
// states.forEach((city, index) => {
|
||||
|
||||
// data.push({
|
||||
// label: city,
|
||||
// key: index,
|
||||
// initial: initials[index],
|
||||
// })
|
||||
// })
|
||||
// return data
|
||||
// }
|
||||
const data = ref<Option[]>(generateData())
|
||||
const value = ref<number[]>(generateValue())
|
||||
const emit = defineEmits<{
|
||||
(e:'update:visible',value:boolean):void;
|
||||
}>();
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('update:visible',false)
|
||||
}
|
||||
const filterMethod = (query, item) => {
|
||||
return item.label.toLowerCase().includes(query.toLowerCase())
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.custom-transfer .el-transfer-panel{
|
||||
overflow-x: auto !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
31
frontend/src/views/plan/planList/components/temp.vue
Normal file
31
frontend/src/views/plan/planList/components/temp.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<el-dropdown @command="handleCommand">
|
||||
<span class="el-dropdown-link">
|
||||
更多<el-icon class="el-icon--right"><arrow-down /></el-icon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item command="a">高精度设备-PQV520-2</el-dropdown-item>
|
||||
<el-dropdown-item command="b">高精度设备-PQV520-3</el-dropdown-item>
|
||||
<el-dropdown-item command="c">高精度设备-PQV520-4</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { ArrowDown } from '@element-plus/icons-vue'
|
||||
|
||||
const handleCommand = (command: string | number | object) => {
|
||||
ElMessage(`click on item ${command}`)
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.example-showcase .el-dropdown-link {
|
||||
cursor: pointer;
|
||||
color: var(--el-button-text-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
@@ -21,11 +21,12 @@
|
||||
<el-button type='primary' link :icon='Upload' @click="exportClick">导出</el-button>
|
||||
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
|
||||
<el-button type='primary' link :icon='Delete' >删除</el-button>
|
||||
<el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">所属设备</el-button>
|
||||
<el-button type='primary' link :icon='List' @click="showtestSourceOpen(scope.row)">所属检测源</el-button>
|
||||
<el-button type='primary' link :icon='List' @click="showDeviceOpen(scope.row)">设备绑定</el-button>
|
||||
<el-button type='primary' link :icon='Tools' @click="showtestSourceOpen(scope.row)">检测源绑定</el-button>
|
||||
</template>
|
||||
</ProTable>
|
||||
|
||||
<temp></temp>
|
||||
<!-- 向计划导入/导出设备对话框 -->
|
||||
<planPopup
|
||||
:visible="dialogFormVisible"
|
||||
@@ -35,32 +36,47 @@
|
||||
@update:visible="dialogFormVisible = $event"
|
||||
/>
|
||||
|
||||
<!-- 查看误差体系详细信息 -->
|
||||
<ErrorStandardDialog
|
||||
:visible="detail_dialogFormVisible"
|
||||
:formData="detail_dialogForm"
|
||||
:dialogTitle="detail_dialogTitle"
|
||||
@update:visible="detail_dialogFormVisible = $event"
|
||||
/>
|
||||
</div>
|
||||
<devTransfer
|
||||
:dialogVisible=devTransferVisible
|
||||
@update:visible='devTransferVisible = $event'
|
||||
/>
|
||||
<sourceTransfer
|
||||
:dialogVisible=sourceTransferVisible
|
||||
@update:visible='sourceTransferVisible = $event'
|
||||
/>
|
||||
<DeviceOpen :width='viewWidth' :height='viewHeight' ref='openDeviceView' />
|
||||
<SourceOpen :width='viewWidth' :height='viewHeight' ref='openSourceView' />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name='useProTable'>
|
||||
<script setup lang="tsx" name='useProTable'>
|
||||
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 { CirclePlus, Delete,EditPen,View,Upload,Download,List,Tools} from '@element-plus/icons-vue'
|
||||
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"; // 导入子组件
|
||||
import DeviceOpen from '@/views/plan/planList/components/devPopup.vue'
|
||||
import SourceOpen from '@/views/plan/planList/components/sourcePopup.vue'
|
||||
import temp from './components/temp.vue'
|
||||
import devTransfer from './components/devTransfer.vue'
|
||||
import sourceTransfer from './components/sourceTransfer.vue'
|
||||
import { useViewSize } from '@/hooks/useViewSize'
|
||||
import { useRouter } from "vue-router";
|
||||
import { useDictStore } from '@/stores/modules/dict'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import type { Action } from 'element-plus'
|
||||
import type { ErrorSystem } from '@/api/error/interface'
|
||||
import ErrorStandardDialog from "@/views/machine/errorSystem/components/ErrorStandardDialog.vue"; // 导入子组件
|
||||
|
||||
const dictStore = useDictStore()
|
||||
// 定义包含和排除的单位
|
||||
@@ -71,7 +87,7 @@ const { popupBaseView, viewWidth, viewHeight } = useViewSize()
|
||||
const openDeviceView = ref()
|
||||
const openSourceView = ref()
|
||||
const devTransferVisible = ref(false)
|
||||
|
||||
const sourceTransferVisible = ref(false)
|
||||
// ProTable 实例
|
||||
const proTable = ref<ProTableInstance>()
|
||||
// const planData = planData
|
||||
@@ -94,9 +110,18 @@ const dialogForm = ref<Plan.PlanBO>({
|
||||
|
||||
});
|
||||
|
||||
const detail_dialogFormVisible = ref(false)
|
||||
const detail_dialogTitle = ref('Q/GDW 10650.2-2021 误差体系')
|
||||
const detail_dialogForm = ref<ErrorSystem.Error_detail>({
|
||||
measured: '',//被测量
|
||||
deviceLevel: '',//检测装置级别
|
||||
measurementType:'',
|
||||
condition: '',//测量条件
|
||||
maxErrorValue: '',//最大误差
|
||||
});
|
||||
|
||||
// 表格配置项
|
||||
const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
|
||||
const columns = reactive<ColumnProps<Plan.PlanAndSourceBO>[]>([
|
||||
{ type: 'selection', fixed: 'left', width: 70 },
|
||||
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
|
||||
{
|
||||
@@ -109,6 +134,24 @@ const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
|
||||
prop: 'testSourceName',
|
||||
label: '检测源名称',
|
||||
width: 200,
|
||||
render: scope => {
|
||||
return (
|
||||
// <el-button
|
||||
// v-for="(button, index) in scope.row.testSourceList"
|
||||
// :key="index"
|
||||
// @click="handleClick(button)"
|
||||
// >
|
||||
// {{ button.text }}
|
||||
// </el-button>
|
||||
<div class='flx-flex-start'>
|
||||
<el-button type = "primary" link onClick = {() => showData(scope.row.testSourceName)}>
|
||||
{scope.row.testSourceName}
|
||||
</el-button>
|
||||
<temp></temp>
|
||||
</div>
|
||||
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'script_Id',
|
||||
@@ -116,6 +159,13 @@ const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
|
||||
width: 300,
|
||||
enum: testScriptDataList,
|
||||
fieldNames: { label: 'label', value: 'id' },
|
||||
render: scope => {
|
||||
return (
|
||||
<el-button type = "primary" link onClick = {() => showData(scope.row.script_Id)}>
|
||||
{getScriptName(scope.row.script_Id)}
|
||||
</el-button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'error_Sys_Id',
|
||||
@@ -123,6 +173,14 @@ const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
|
||||
width: 200,
|
||||
enum: testErrSystDataList,
|
||||
fieldNames: { label: 'label', value: 'id' },
|
||||
render: scope => {
|
||||
const errSysName = getErrSysName(scope.row.error_Sys_Id);
|
||||
return (
|
||||
<el-button type = "primary" link onClick = {() => showData(errSysName || '')}>
|
||||
{errSysName}
|
||||
</el-button>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
prop: 'dataSource_Id',
|
||||
@@ -182,6 +240,12 @@ const columns = reactive<ColumnProps<Plan.PlanBO>[]>([
|
||||
{ prop: 'operation', label: '操作', fixed: 'right' ,width: 450, },
|
||||
])
|
||||
|
||||
function getScriptName(id:string){
|
||||
return testScriptDataList.find(item=>item.id==id)?.label
|
||||
}
|
||||
function getErrSysName(id:string){
|
||||
return testErrSystDataList.find(item=>item.id==id)?.label
|
||||
}
|
||||
|
||||
const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput
|
||||
function openFileDialog() {
|
||||
@@ -190,6 +254,17 @@ const fileInput = ref<HTMLInputElement | null>(null); // 声明 fileInput
|
||||
}
|
||||
}
|
||||
|
||||
function showData(row: string) {
|
||||
|
||||
detail_dialogTitle.value = row;
|
||||
detail_dialogFormVisible.value = true; // 显示对话框
|
||||
|
||||
// router.push({
|
||||
// path: "/machine/device",
|
||||
// query: { id: row }
|
||||
// });
|
||||
}
|
||||
|
||||
function handleFiles(event: Event) {
|
||||
const target = event.target as HTMLInputElement;
|
||||
const files = target.files;
|
||||
@@ -289,7 +364,8 @@ const showDeviceOpen = (planSystem: Plan.PlanBO) => {
|
||||
}
|
||||
|
||||
const showtestSourceOpen=(planSystem: Plan.PlanBO)=>{
|
||||
openSourceView.value.open('计划检测源列表')
|
||||
sourceTransferVisible.value = true;
|
||||
// openSourceView.value.open('计划检测源列表')
|
||||
// router.push({
|
||||
// path: "/machine/testSource",
|
||||
// });
|
||||
|
||||
@@ -13,10 +13,10 @@
|
||||
>{{ item.name }}</el-checkbox
|
||||
>
|
||||
<el-button type="primary" @click="handlePreTest">启动预检测</el-button>
|
||||
<el-button type="primary" @click="handleBackDeviceList"
|
||||
>返回设备列表</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="bot_left">
|
||||
@@ -158,7 +158,7 @@ const handlePreTest = () => {
|
||||
} else {
|
||||
timer = setInterval(async () => {
|
||||
count++;
|
||||
if (count > 5) return;
|
||||
if (count > 15) return;
|
||||
await nextTick(() => {
|
||||
leftDeviceData.value.push({
|
||||
id: count,
|
||||
@@ -178,7 +178,7 @@ const handleAutoTest = () => {
|
||||
//返回设备列表
|
||||
const handleBackDeviceList = () => {
|
||||
router.push({
|
||||
path: "/plan/singlePlanList",
|
||||
path: "/plan/home/index",
|
||||
});
|
||||
};
|
||||
//左侧数据
|
||||
|
||||
Reference in New Issue
Block a user