276 lines
7.6 KiB
Vue
276 lines
7.6 KiB
Vue
<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/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>
|
||
|