移除文件

This commit is contained in:
caozehui
2026-06-11 09:57:01 +08:00
parent 654c997607
commit 52a8095334
4 changed files with 0 additions and 1652 deletions

View File

@@ -1,276 +0,0 @@
<template>
<el-dialog
title="数据查询"
v-model='dialogVisible'
v-bind="dialogBig"
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"
:toolButton="false"
>
</ProTable>
</div>
</el-tab-pane>
<el-tab-pane label="原始数据">
<!-- 列表数据 -->
<div class="container_table2">
<ProTable
ref='proTable2'
:columns='columns2'
:data="testDatas"
:toolButton="false"
>
</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 {dialogBig,dialogMiddle,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/user/role/index'
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>

View File

@@ -1,526 +0,0 @@
<template>
<div class="table_info">
<ProTable
ref="proTable"
:columns="columns"
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
@drag-sort="sortTable"
:height="tableHeight"
:stripe="true"
>
<!-- 表格 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-option
v-for="(item, index) in checkStatusList"
: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.checkReportStatus">
<el-option
v-for="(item, index) in checkReportStatusList"
: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.checkResult">
<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"
:key="index"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button type="primary" @click="handleTest" v-if="form.activeTabs === 0">
启动自动检测
</el-button>
<el-button type="primary" @click="handleTest" v-if="form.activeTabs === 1">
启动手动检测
</el-button>
<el-button type="primary" v-if="form.activeTabs === 2">报告生成</el-button>
<el-button type="primary" v-if="form.activeTabs === 5">设备导入</el-button>
</el-form-item>
</el-form>
</template>
<!-- 表格操作 -->
<!-- <template #operation="scope">
<el-button
dictType="primary"
link
:icon="View"
@click="openDrawer('查看', scope.row)"
>查看</el-button
>
<el-button
dictType="primary"
link
:icon="EditPen"
@click="openDrawer('编辑', scope.row)"
>导出</el-button
>
<el-button
dictType="primary"
link
:icon="Delete"
@click="deleteAccount(scope.row)"
>删除</el-button
>
</template> -->
</ProTable>
</div>
</template>
<script setup lang="tsx" name="useProTable">
import { onMounted, reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import { User } from '@/api/interface'
import { useHandleData } from '@/hooks/useHandleData'
import { ElMessage } from 'element-plus'
import ProTable from '@/components/ProTable/index.vue'
import { Search } from '@element-plus/icons-vue'
import { getPlanList } from '@/api/plan/planList'
const router = useRouter()
const value1 = ref('')
const value2 = ref('')
const tableHeight = ref(0)
tableHeight.value = window.innerHeight - 630
//下拉框数据
//检测状态数据
const checkStatusList = [
{
label: '未检',
value: 0
},
{
label: '检测中',
value: 1
},
{
label: '检测完成',
value: 2
},
{
label: '归档',
value: 3
}
]
//检测报告状态数据
const checkReportStatusList = [
{
label: '未生成报告',
value: 0
},
{
label: '已生成报告',
value: 1
}
]
//检测结果数组
const checkResultList = [
{
label: '/',
value: null
},
{
label: '不合格',
value: 0
},
{
label: '合格',
value: 1
}
]
//绑定状态数组
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 form: any = ref({
activeTabs: 0, //功能选择
checkStatus: 0, //检测状态
checkReportStatus: 0, //检测报告状态
checkResult: 0, //检测结果
deviceBindStatus: 0, //绑定状态
deviceType: 0, //设备类型
manufacturer: 0 //制造厂商
})
const searchForm = ref({
intervalType: 0,
time: ['2024-08-20', '2024-08-27'],
searchBeginTime: '',
searchEndTime: '',
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0
})
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数,直接定义传给 ProTable (之后每次请求都会自动带上该参数,此参数更改之后也会一直带上,改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 })
// dataCallback 是对于返回的表格数据做处理,如果你后台返回的数据不是 list && total 这些字段,可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([])
const dataCallback = (data: any) => {
return {
list: data || data.data || data.list,
total: data.length || data.total //total
}
}
// 如果你想在请求之前对当前请求参数做一些操作可以自定义如下函数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 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
}
},
{
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: "检测脚本",
// render: (scope) => {
// return scope.row.checkExe == 0
// ? "国网入网检测脚本(单影响量-模拟式)"
// : scope.row.checkExe == 1
// ? "国网入网检测脚本"
// : scope.row.checkExe == 2
// ? "/"
// : scope.row.checkExe;
// },
// },
// {
// prop: "wctx",
// label: "误差体系",
// render: (scope) => {
// return scope.row.wctx == 0
// ? "Q/GDW 1650.2- 2016"
// : scope.row.wctx == 1
// ? "Q/GDW 10650.2 - 2021"
// : scope.row.wctx == 2
// ? "/"
// : scope.row.wctx;
// },
// },
// {
// prop: "checkStatus",
// label: "检测状态",
// width: 120,
// render: (scope) => {
// return scope.row.checkStatus == 1
// ? "未检"
// : scope.row.checkStatus == 2
// ? "检测中"
// : scope.row.checkStatus == 3
// ? "检测完成"
// : scope.row.checkStatus;
// },
// },
// {
// prop: "checkReport",
// label: "检测报告",
// width: 120,
// render: (scope) => {
// return scope.row.checkReport == 1
// ? "未生成"
// : scope.row.checkReport == 2
// ? "部分生成"
// : scope.row.checkReport == 3
// ? "全部生成"
// : scope.row.checkReport;
// },
// },
// {
// prop: "checkResult",
// label: "检测结果",
// width: 120,
// render: (scope) => {
// return scope.row.checkReport == 1
// ? "/"
// : scope.row.checkReport == 2
// ? "符合"
// : scope.row.checkReport == 3
// ? "不符合"
// : scope.row.checkReport;
// },
// },
// {
// prop: "parentNode",
// label: "父节点",
// width: 90,
// render: (scope) => {
// return scope.row.checkReport == 0
// ? "/"
// : scope.row.checkReport == 1
// ? "检测计划1"
// : scope.row.checkReport == 2
// ? "检测计划2"
// : scope.row.checkReport == 3
// ? "检测计划3"
// : scope.row.checkReport;
// },
// },
// { prop: "operation", label: "操作", fixed: "right", width: 250 },
])
// 跳转详情页
const toDetail = () => {
router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`)
}
//重置查询条件
const resetSearchForm = () => {
searchForm.value = {
intervalType: 0,
time: ['2024-08-20', '2024-08-27'],
searchBeginTime: '',
searchEndTime: '',
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0
}
}
//查询
const handleSearch = () => {
proTable.value?.getTableList()
}
//重置
const handleRefresh = () => {
proTable.value?.getTableList()
}
// 表格拖拽排序
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
ElMessage.success('修改列表排序成功')
}
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(deleteUser, { id: [params.id] }, `删除【${params.username}`)
proTable.value?.getTableList()
}
// 批量删除用户信息
const batchDelete = async (id: string[]) => {
await useHandleData(deleteUser, { id }, '删除所选用户信息')
proTable.value?.clearSelection()
proTable.value?.getTableList()
}
// 重置用户密码
const resetPass = async (params: User.ResUserList) => {
await useHandleData(resetUserPassWord, { id: params.id }, `重置【${params.username}】用户密码`)
proTable.value?.getTableList()
}
// 切换用户状态
const changeStatus = async (row: User.ResUserList) => {
await useHandleData(
changeUserStatus,
{ id: row.id, status: row.status == 1 ? 0 : 1 },
`切换【${row.username}】用户状态`
)
proTable.value?.getTableList()
}
//顶部功能切换时修改activeTabs
const changeActiveTabs = (val: number) => {
form.value.activeTabs = val
}
//启动自动检测/手动检测
const handleTest = () => {
//自动检测
if (form.value.activeTabs === 0) {
ElMessage.success('自动检测')
router.push({
path: '/plan/autoTest'
})
} else {
ElMessage.warning('手动检测')
}
}
onMounted(() => {
})
defineExpose({ changeActiveTabs })
</script>
<style lang="scss" scoped>
/* 当屏幕宽度小于或等于1300像素时 */
@media screen and (max-width: 1300px) {
.el-select {
width: 130px !important;
}
}
@media screen and (min-width: 1300px) {
.el-select {
width: 150px !important;
}
}
.el-form {
width: 100%;
display: flex;
flex-wrap: wrap;
.el-form-item {
display: flex;
align-items: center;
justify-content: space-between;
.el-button {
margin: 0 !important;
margin-right: 10px !important;
}
}
}
</style>

View File

@@ -1,149 +0,0 @@
<template>
<div class="plan_tree">
<!-- <div class="search_view">
<el-input
placeholder="请输入计划名称"
v-model="searchForm.planName"
></el-input>
</div> -->
<div class="tree_container">
<el-tree
:data="data"
ref="treeRef"
:filter-node-method="filterNode"
:props="defaultProps"
node-key="id"
default-expand-all
:default-checked-keys="defaultChecked"
@node-click="handleNodeClick"
@check-change="changeSelect"
>
<!-- scriptIdx -->
<template #default="{ node, data }">
<span
class="custom-tree-node"
style="display: flex; align-items: center"
>
<CircleCheck v-if="data.isChildNode && data.scriptIdx < currentIndex" style="width:18px;height: 18px;margin-right:8px;color:#91cc75;"/>
<svg-icon v-if="data.isChildNode && data.scriptIdx === currentIndex" name="loading" spin ></svg-icon>
<span>{{ node.label }}</span>
</span>
</template>
</el-tree>
</div>
</div>
</template>
<script lang="ts" setup>
import { ref, onMounted, defineExpose, watch } from "vue";
import { Menu, Platform, CircleCheck,Loading } from "@element-plus/icons-vue";
const emit = defineEmits(["jump"]);
const data: any = ref([]);
const defaultProps = {
children: "children",
label: "name",
pid: "pid",
};
const searchForm = ref({
planName: "",
});
const defaultChecked: any = ref([]);
const treeList: any = ref([]);
const getTreeData = (val: any) => {
defaultChecked.value = [];
data.value = val;
if(data.value[0].children[0].hasOwnProperty("children"))
{
defaultChecked.value.push(data.value[0].children[0].children[0].id);
}
else
{
defaultChecked.value.push(data.value[0].children[0].id);
}
treeRef.value.setCurrentKey(defaultChecked.value);
};
const getCurrentIndex = (val: number) => {
currentIndex.value = val;
};
const filterText = ref("");
const treeRef = ref();
const currentIndex = ref(0);
// const timer = setInterval(() => {
// currentIndex.value++;
// if (currentIndex.value > 14)
// currentIndex.value = 0;
// console.log(currentIndex.value);
// }, 2000);
watch(
() => searchForm.value.planName,
(val) => {
treeRef.value!.filter(val);
},
{
deep: true,
}
);
const changeSelect=()=>{
//console.log(treeRef.value.getCheckedKeys());
}
const handleNodeClick = (data) => {
};
const filterNode = (value: string, data) => {
if (!value) return true;
return data.name.includes(value);
};
// 点击详情
const detail = (e: any) => {
emit("jump", e);
};
onMounted(() => {
});
defineExpose({ getTreeData,getCurrentIndex });
</script>
<style lang="scss" scoped>
.plan_tree {
// width: 200px;
height: 100%;
display: flex;
flex-direction: column;
padding: 5px;
// height: calc(100% - 70px);
background-color: #fff;
box-sizing: border-box;
.search_view {
width: 100%;
height: auto;
display: flex;
justify-content: space-between;
padding: 0 5px;
box-sizing: border-box;
align-items: center;
.el-input {
margin-top: 6px;
}
}
.el-input {
width: 100%;
// margin: 0 10px 10px 0;
}
.tree_container {
flex: 1;
height: 100%;
overflow-y: auto;
.el-tree {
height: 100%;
}
}
}
</style>

View File

@@ -1,701 +0,0 @@
<template>
<!-- 自动检测页面 -->
<div class="test">
<!-- 顶部筛选条件&返回按钮 -->
<!-- {{ printText }} -->
<div class="test_top">
<!-- style="pointer-events: none" -->
<svg-icon name="wind" spin></svg-icon>
<el-checkbox
v-for="(item, index) in detectionOptions"
v-model="item.selected"
:key="index"
:label="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>
<!-- <el-select v-model="currentErrSysID" placeholder="请选择误差体系" autocomplete="off">
<el-option
v-for="plan in testErrSystDataList"
:key="plan.id"
:label="plan.label"
:value="plan.id">
</el-option>
</el-select>
<el-button type="primary" @click="handlePreTest">重新计算</el-button> -->
</div>
<div class="test_bot">
<div class="test_left">
<AutoTestTree ref="treeRef"></AutoTestTree>
</div>
<div class="test_right">
<el-descriptions
style="width: 100%; border-radius: 6px; margin-bottom: 10px; background-color: #fff; padding: 10px"
:column="3"
border
>
<template #extra>
<el-progress style="width: 80%" :percentage="percentage" :color="customColors" />
<div class="test_button">
<el-button type="primary" v-if="!isPause" :icon="VideoPause" @click="handlePauseTest">
暂停检测
</el-button>
<el-button type="warning" v-if="isPause" :icon="Refresh" @click="handlePauseTest">
继续检测
</el-button>
<el-button type="danger" :icon="Close" @click="handleFinishTest">停止检测</el-button>
<!-- <el-button
type="danger"
v-if="!isPause"
:icon="Close"
@click="handlePauseTest"
>暂停检测</el-button
>
<el-button
type="warning"
v-if="isPause"
:icon="Refresh"
@click="handlePauseTest"
>继续检测</el-button
>
<el-button type="primary" :icon="Check" @click="handleFinishTest"
>完成检测</el-button
> -->
</div>
</template>
<!-- <el-descriptions-item width="0px" label="上送数据总数">
{{ num }}
</el-descriptions-item>
<el-descriptions-item width="0px" label="已上送数据数">
{{ num1 }}
</el-descriptions-item>
<el-descriptions-item width="0px" label="待上送数据数">
{{ num2 }}
</el-descriptions-item> -->
</el-descriptions>
<!-- 右侧列表 -->
<div class="right_table">
<!-- 模拟列表样式 -->
<!-- 表头设备 -->
<div class="table_left" v-if="false">
<p>测试项目</p>
<div v-for="(item, index) in deviceTestList" :key="index">
{{ item.name }}
</div>
</div>
<div class="table_right">
<div class="right_device_title">
<p v-for="(item, index) in deviceData" :key="index">
{{ item.name }}
</p>
</div>
<div class="right_device_status">
<div v-if="beforeTest">
<span class="empty__div">暂无数据</span>
</div>
<div
class="status_info"
v-if="!beforeTest"
v-for="(item, index) in deviceTestList"
:key="index"
>
<!-- <p v-for="(vv, vvs) in item.children" :key="vvs">
{{ vv.status }}
</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>
</div>
<!-- 右侧状态加载 -->
<div class="right_status" v-if="beforeTest">
<span class="empty__div">暂无数据</span>
</div>
<div class="right_status" ref="statusRef" v-if="!beforeTest">
<!-- ,fontSize:index%5===0?'16px':'14px' -->
<p
v-for="(item, index) in statusList"
:key="index"
:style="{ color: index % 5 === 0 ? '#F56C6C' : 'var(--el-text-color-regular)' }"
>
输入{{ item.remark }} -{{ item.status == 0 ? '输出完毕' : '输入中,请稍后!' }}
<br />
<span v-if="index == statusList.length - 1">...</span>
</p>
</div>
</div>
</div>
</div>
<ShowDataPopup ref="showDataPopup" />
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref } from 'vue'
import AutoTestTree from './components/autoTestTree.vue'
import { data } from '@/api/plan/autoTest.json'
import { ElMessage, ElMessageBox } from 'element-plus'
import ShowDataPopup from './components/ShowDataPopup.vue'
import { Close, Refresh, VideoPause } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const currentErrSysID = ref('2')
const treeRef = ref<any>()
const PopupVisible = ref(false)
const showDataPopup = ref()
const beforeTest = ref(true)
const testModel = ref('')
//定义与预检测配置数组
const detectionOptions = ref([
{
id: 0,
name: '标准源通讯检测', //判断源通讯是否正常
selected: true
},
{
id: 1,
name: '设备通讯检测', //判断设备的IP、Port、识别码、秘钥是否正常
selected: true
},
{
id: 2,
name: '协议校验', //ICD报告触发测试
selected: true
},
{
id: 3,
name: '相序校验', //判断装置的接线是否正确
selected: true
},
{
id: 4,
name: '守时校验', //判断装置24小时内的守时误差是否小于1s
selected: true
},
{
id: 5,
name: '通道系数校准', //通过私有协议与装置进行通讯,校准三相电压电流的通道系数
selected: true
}
// {
// id: 6,
// name: "实时数据比对",
// },
// {
// id: 7,
// 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 preTestData = [
{
id: 0,
name: '预检测项目',
children: [
{
scriptIdx: 1,
isChildNode: true,
pid: '0-2',
id: '0-2-2',
name: '标准源通讯检测'
},
{
scriptIdx: 2,
isChildNode: true,
pid: '0-3',
id: '0-3-1',
name: '设备通讯检测'
},
{
scriptIdx: 3,
isChildNode: true,
pid: '0-3',
id: '0-3-1',
name: '协议校验'
},
{
scriptIdx: 4,
isChildNode: true,
pid: '0-3',
id: '0-3-1',
name: '相序校验'
},
{
scriptIdx: 5,
isChildNode: true,
pid: '0-3',
id: '0-3-1',
name: '守时校验'
},
{
scriptIdx: 6,
isChildNode: true,
pid: '0-3',
id: '0-3-1',
name: '通道系数校准'
}
]
}
]
// 弹出数据查询页面
const handleClick = (item, index, vvs) => {
//const data = "检测脚本为:"+item.name+";被检设备为:"+item.children.value.devID+";被检通道序号为:"+ item.children.monitorIndex;
PopupVisible.value = true
showDataPopup.value.open()
}
let currentIndex = 0
let totalNum = 0
//启动预检测
const handlePreTest = () => {
ElMessage.success('启动预检测')
currentIndex = 0
percentage.value = 0
statusList.value = []
deviceTestList.value = []
statusId.value = 0
testModel.value = 'preTest'
beforeTest.value = false
getTreeData(preTestData)
totalNum = preTestData[0].children.length
interValTest()
// 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 = () => {
ElMessage.success('启动正式检测')
currentIndex = 0
percentage.value = 0
statusList.value = []
deviceTestList.value = []
statusId.value = 0
testModel.value = 'Test'
beforeTest.value = false
getTreeData(data)
// totalNum = data.length;
totalNum = 10
interValTest()
}
//返回设备列表
const handleBackDeviceList = () => {
router.push({
path: '/home/index'
})
}
const getTreeData = val => {
treeRef.value && treeRef.value.getTreeData(val)
}
const tableList = ref([])
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: '#5cb87a', percentage: 100 } //绿
]
//加载进度条
const refreshProgress = () => {
if (percentage.value < 100) {
percentage.value = Math.trunc((currentIndex / totalNum) * 100)
} else {
clearInterval(timer.value)
clearInterval(statusTimer.value)
let strTemp = ''
if (testModel.value === 'preTest') strTemp = '预检测过程全部结束'
else if (testModel.value === 'Test') strTemp = '正式检测全部结束'
statusId.value++
statusList.value.push({
id: statusId.value,
remark: strTemp,
status: 0
})
if (testModel.value === 'preTest') ElMessage.success('预检测过程全部结束')
else if (testModel.value === 'Test')
//ElMessage.success("正式检测全部结束,你可以停留在此页面查看检测结果,或返回首页进行复检、报告生成和归档等操作")
ElMessageBox.confirm(
'检测全部结束,你可以停留在此页面查看检测结果,或返回首页进行复检、报告生成和归档等操作',
'检测完成',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'success'
}
).then()
// percentage.value = 0;
// statusList.value = [];
// deviceTestList.value = [];
// statusId.value = 0;
}
}
let timer: any = ref('')
const statusTimer: any = ref('')
//检测列表数据
const deviceTestList = ref<any>([])
//检测结果数据
const deviceList = ref<any>([])
//前一个页面带过来的设备数据
// const deviceData = ref<any>([]);
const deviceData = ref([
{
id: 0,
name: '设备1通道1',
status: Math.floor(Math.random() * 4),
type: 'info',
label: '/',
devID: 'dev1',
monitorIndex: 1
},
{
id: 1,
name: '设备1通道2',
status: Math.floor(Math.random() * 4),
type: 'success',
label: '√',
devID: 'dev1',
monitorIndex: 2
},
{
id: 2,
name: '设备2通道1',
status: Math.floor(Math.random() * 4),
type: 'danger',
label: '×',
devID: 'dev2',
monitorIndex: 1
},
{
id: 3,
name: '设备3通道1',
status: Math.floor(Math.random() * 4),
type: 'success',
label: '√',
devID: 'dev3',
monitorIndex: 1
}
])
const interValTest = () => {
timer.value = setInterval(() => {
deviceTestList.value.push({
id: 0,
name: `频率 ${statusId.value}Hz`,
children: deviceData.value
// status: Math.floor(Math.random() * 4),
})
currentIndex++
treeRef.value && treeRef.value.getCurrentIndex(currentIndex)
refreshProgress()
}, 2000)
statusTimer.value = setInterval(() => {
getStatusList()
statusList.value.map((item: any, index: any) => {
if (index == statusList.value.length - 1) {
item.status = 1
} else {
item.status = 0
}
})
}, 2000)
}
//暂停检测
const isPause = ref<boolean>(false)
const handlePauseTest = () => {
if (!isPause.value) {
clearInterval(timer.value)
clearInterval(statusTimer.value)
} else {
interValTest()
}
isPause.value = !isPause.value
}
//完成检测
const handleFinishTest = () => {
ElMessage.success('完成检测')
}
// 表格拖拽排序
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
ElMessage.success('修改列表排序成功')
}
const statusList: any = ref([])
let statusId = ref(0)
const statusRef = ref()
const getStatusList = () => {
statusId.value++
statusList.value.push({
id: statusId.value,
remark: `频率 ${statusId.value}Hz`,
status: 0
})
// console.log(statusRef.value.offsetHeight);
nextTick(() => {
if (statusRef.value) statusRef.value.scrollTop = statusRef.value.scrollHeight
})
}
onMounted(() => {})
</script>
<style lang="scss" scoped>
.empty__div {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: var(--el-text-color-secondary);
font-size: var(--el-font-size-base);
}
.test {
width: 100%;
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;
}
.el-select {
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;
width: 15%;
height: 100%;
overflow: auto;
padding-bottom: 20px;
box-sizing: border-box;
background-color: #fff;
border-radius: 6px;
padding: 5px !important;
box-sizing: border-box;
}
.test_right {
flex: 1;
height: 100%;
margin-left: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
.right_table {
flex: 1;
// width: 100%;
// height: calc(100vh - 330px);
height: 100%;
flex: 1 !important;
height: calc(100vh - 560px);
border-radius: 4px;
background-color: #fff;
width: 100% !important;
display: flex;
padding: 10px;
box-sizing: border-box;
.table_left {
width: 150px;
height: 100%;
overflow: auto;
p {
line-height: 40px;
margin: 0;
width: 100px;
}
}
.table_right {
flex: 1;
display: flex;
overflow: auto;
flex-direction: column;
.right_device_title {
width: 100%;
display: flex;
justify-content: center;
// overflow-x: auto !important;
p {
flex: 1;
// max-width: 150px;
text-align: center;
width: auto;
padding: 0 10px;
margin: 0;
line-height: 40px;
}
}
.right_device_status {
position: relative;
width: 100%;
flex: 1;
.status_info {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.el-button {
flex: 1;
// max-width: 150px;
min-width: auto;
margin: 0;
padding: 0 10px;
text-align: left;
}
}
}
}
}
.right_status {
position: relative;
width: 100%;
height: 150px;
overflow: auto;
background-color: #fff;
border-radius: 4px;
margin-top: 10px;
padding: 10px 0 20px 10px;
box-sizing: border-box;
p {
height: 20px;
font-size: 14px;
margin: 0 !important;
}
:nth-last-child(1) {
margin-bottom: 40px;
}
}
}
}
}
:deep(.header-button-lf) {
clear: both !important;
}
:deep(.el-descriptions__extra) {
width: 100%;
display: flex;
justify-content: space-between;
.test_button {
width: auto;
display: flex;
align-items: center;
}
}
</style>