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:
sjl
2024-10-23 19:30:11 +08:00
parent 0d25e477d7
commit 7c5103ebb4
11 changed files with 791 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.vscode/settings.json vendored
View File

@@ -1,6 +1,7 @@
{
"cSpell.words": [
"daterange",
"errordata",
"logdata",
"resourcedata",
"resourcename",

36
frontend/src/api/error/errorData.ts Normal file
View File

@@ -0,0 +1,36 @@
import type {ErrorSystem} from "./interface"
const errordata = ref<ErrorSystem.ErrorSystemList[]>([
{
'id': '1',
'name': 'Q/GDW 1650.2- 2016',
'year':'2016',
'level':'A级',
'details': [
{ measured: '详细1-1', deviceLevel: '详细1-2', condition: '详细1-3', maxErrorValue: '详细1-4' },
{ measured: '详细1-5', deviceLevel: '详细1-6', condition: '详细1-7', maxErrorValue: '详细1-8' },
],
},
{
'id': '2',
'name': 'Q/GDW 10650.2 - 2021',
'year':'2021',
'level':'A级',
'details': [
{ measured: '详细1-1', deviceLevel: '详细1-2', condition: '详细1-3', maxErrorValue: '详细1-4' },
{ measured: '详细1-5', deviceLevel: '详细1-6', condition: '详细1-7', maxErrorValue: '详细1-8' },
],
},
{
'id': '3',
'name': 'GBT 19862 - 2016',
'year':'2016',
'level':'A级',
'details': [
{ measured: '详细1-1', deviceLevel: '详细1-2', condition: '详细1-3', maxErrorValue: '详细1-4' },
{ measured: '详细1-5', deviceLevel: '详细1-6', condition: '详细1-7', maxErrorValue: '详细1-8' },
],
},
])
export default errordata

17
frontend/src/api/error/interface/index.ts Normal file
View File

@@ -0,0 +1,17 @@
// 误差体系模块
export namespace ErrorSystem {
// 误差体系列表
export interface ErrorSystemList {
id: string;//误差体系表Id
name: string;//误差体系名称
year:string;//标准实施年份
level:string;//使用设备等级
details?: Array<{
measured: string;//被测量
deviceLevel: string;//检测装置级别
condition: string;//测量条件
maxErrorValue: string;//最大误差
}>; // 详细信息
}
}

205
frontend/src/components/TimeControl/index.vue
View File

@@ -6,14 +6,13 @@
placeholder='选择时间单位'
@change='handleChange'
>
<!--采用 v-for 去动态渲染-->
<el-option label='按日' value='日'></el-option>
<el-option label='按周' value='周'></el-option>
<el-option label='按月' value='月'></el-option>
<el-option label='按季度' value='季度'></el-option>
<el-option label='按年' value='年'></el-option>
<el-option label='自定义' value='自定义'></el-option>
<!-- 采用 v-for 动态渲染 -->
<el-option
v-for="unit in timeUnits"
:key="unit.value"
:label="unit.label"
:value="unit.value"
></el-option>
</el-select>
<!-- 禁用时间选择器 -->
@@ -23,6 +22,7 @@
v-model='startDate'
type='date'
placeholder='起始时间'
:disabled-date="disableStartDate"
:readonly="timeUnit != '自定义'"
></el-date-picker>
<el-text>~</el-text>
@@ -31,6 +31,7 @@
v-model='endDate'
type='date'
placeholder='结束时间'
:disabled-date="disableEndDate"
:readonly="timeUnit !== '自定义'"
></el-date-picker>
</div>
@@ -59,133 +60,159 @@
</div>
</template>
<script>
export default {
data() {
return {
timeUnit: '周', // 默认选择按周
startDate: null, // 起始日期
endDate: null, // 结束日期
isNextDisabled: false, // 控制下一周期按钮的禁用状态
today: new Date(), // 当前日期
}
},
created() {
// 组件创建时更新日期范围
this.updateDateRange()
},
methods: {
handleChange(value) {
<script setup lang="ts">
import { watch,computed, ref,reactive ,onMounted, defineProps, defineEmits } from 'vue';
const timeUnit = ref<string>('日'); // 默认选择按周
const startDate = ref<Date>(new Date()); // 起始日期
const endDate = ref<Date>(new Date()); // 结束日期
const isNextDisabled = ref<boolean>(false); // 控制下一周期按钮的禁用状态
const today = ref<Date>(new Date()); // 当前日期
const timeUnits = [
{ label: '日', value: '日' },
{ label: '周', value: '周' },
{ label: '月', value: '月' },
{ label: '季度', value: '季度' },
{ label: '年', value: '年' },
{ label: '自定义', value: '自定义' },
];
// 在组件挂载时更新日期范围
onMounted(() => {
updateDateRange();
});
const handleChange = (unit: string)=> {
// 根据选择的时间单位处理日期变化
if (value !== '自定义') {
this.updateDateRange()
if (unit !== '自定义') {
updateDateRange()
} else {
// 自定义选项逻辑
this.startDate = new Date()
this.endDate = new Date()
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
endDate.value = new Date()
}
this.updateNextButtonStatus()
},
updateDateRange() {
const today = this.today
updateNextButtonStatus()
}
const updateDateRange = () => {
// 根据选择的时间单位计算起始和结束日期
if (this.timeUnit === '日') {
this.startDate = today
this.endDate = today
} else if (this.timeUnit === '周') {
this.startDate = this.getStartOfWeek(today)
this.endDate = this.getEndOfWeek(today)
} else if (this.timeUnit === '月') {
this.startDate = new Date(today.getFullYear(), today.getMonth(), 1)
this.endDate = new Date(today.getFullYear(), today.getMonth() + 1, 0)
} else if (this.timeUnit === '季度') {
const quarter = Math.floor(today.getMonth() / 3)
this.startDate = new Date(today.getFullYear(), quarter * 3, 1)
this.endDate = new Date(today.getFullYear(), quarter * 3 + 3, 0)
} else if (this.timeUnit === '年') {
this.startDate = new Date(today.getFullYear(), 0, 1)
this.endDate = new Date(today.getFullYear(), 11, 31)
if (timeUnit.value === '日') {
startDate.value = today.value
endDate.value = today.value
} else if (timeUnit.value === '周') {
startDate.value = getStartOfWeek(today.value)
endDate.value = getEndOfWeek(today.value)
} else if (timeUnit.value === '月') {
startDate.value = new Date(today.value.getFullYear(), today.value.getMonth(), 1)
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0)
} else if (timeUnit.value === '季度') {
const quarter = Math.floor(today.value.getMonth() / 3)
startDate.value = new Date(today.value.getFullYear(), quarter * 3, 1)
endDate.value = new Date(today.value.getFullYear(), quarter * 3 + 3, 0)
} else if (timeUnit.value === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1)
endDate.value = new Date(today.value.getFullYear(), 11, 31)
}
this.updateNextButtonStatus()
},
getStartOfWeek(date) {
updateNextButtonStatus()
}
const getStartOfWeek =(date:Date)=> {
const startOfWeek = new Date(date)
const day = startOfWeek.getDay()
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
startOfWeek.setDate(startOfWeek.getDate() + diff)
return startOfWeek
},
getEndOfWeek(date) {
}
const getEndOfWeek =(date:Date) =>{
const endOfWeek = new Date(date)
const day = endOfWeek.getDay()
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
endOfWeek.setDate(endOfWeek.getDate() + diff)
return endOfWeek
},
prevPeriod() {
const prevStartDate = new Date(this.startDate)
const prevEndDate = new Date(this.endDate)
}
const prevPeriod =()=> {
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
if (this.timeUnit === '日') {
if (timeUnit.value === '日') {
prevStartDate.setDate(prevStartDate.getDate() - 1)
prevEndDate.setDate(prevEndDate.getDate() - 1)
} else if (this.timeUnit === '周') {
} else if (timeUnit.value === '周') {
prevStartDate.setDate(prevStartDate.getDate() - 7)
prevEndDate.setDate(prevEndDate.getDate() - 7)
} else if (this.timeUnit === '月') {
} else if (timeUnit.value === '月') {
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
} else if (this.timeUnit === '季度') {
} else if (timeUnit.value === '季度') {
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
} else if (this.timeUnit === '年') {
} else if (timeUnit.value === '年') {
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
}
this.startDate = prevStartDate
this.endDate = prevEndDate
this.updateNextButtonStatus()
},
goToCurrent() {
if (this.timeUnit !== '自定义') {
this.updateDateRange() // 更新为当前选择时间单位的时间范围
startDate.value = prevStartDate
endDate.value = prevEndDate
updateNextButtonStatus()
}
const goToCurrent =()=> {
if (timeUnit.value !== '自定义') {
updateDateRange() // 更新为当前选择时间单位的时间范围
}
},
nextPeriod() {
const nextStartDate = new Date(this.startDate)
const nextEndDate = new Date(this.endDate)
}
const nextPeriod = ()=> {
const nextStartDate = new Date(startDate.value)
const nextEndDate = new Date(endDate.value)
if (this.timeUnit === '日') {
if (timeUnit.value === '日') {
nextStartDate.setDate(nextStartDate.getDate() + 1)
nextEndDate.setDate(nextEndDate.getDate() + 1)
} else if (this.timeUnit === '周') {
} else if (timeUnit.value === '周') {
nextStartDate.setDate(nextStartDate.getDate() + 7)
nextEndDate.setDate(nextEndDate.getDate() + 7)
} else if (this.timeUnit === '月') {
} else if (timeUnit.value === '月') {
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
} else if (this.timeUnit === '季度') {
} else if (timeUnit.value === '季度') {
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
} else if (this.timeUnit === '年') {
} else if (timeUnit.value === '年') {
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
}
this.startDate = nextStartDate
this.endDate = nextEndDate
this.updateNextButtonStatus()
},
updateNextButtonStatus() {
startDate.value = nextStartDate
endDate.value = nextEndDate
updateNextButtonStatus()
}
const updateNextButtonStatus =()=> {
// 更新下一个按钮的禁用状态
const maxDate = new Date() // 假设最新日期为今天
this.isNextDisabled = this.endDate > maxDate
},
},
}
// 将 maxDate 设置为当天的开始时间
maxDate.setHours(0, 0, 0, 0);
// 将 endDate 设置为当天的开始时间并进行比较
const endDateAdjusted = new Date(endDate.value);
endDateAdjusted.setHours(0, 0, 0, 0);
// 仅比较日期部分
isNextDisabled.value = endDateAdjusted >= maxDate;
}
// 限制开始日期不能选择超过当前日期
const disableStartDate = (date:Date)=> {
return date > today.value;
}
// 限制结束日期不能超过当前日期且必须大于开始日期
const disableEndDate = (date:Date)=> {
if (timeUnit.value !== '自定义') return false; // 如果不是自定义时间单位，则不限制
const start = new Date(startDate.value);
return date > today.value || (start && date <= start);
}
defineExpose({
startDate,
endDate,
})
// defineProps('include','exclude','default')
</script>
<style scoped lang='scss'>

6
frontend/src/components/ResourceDialog/index.vue → frontend/src/views/authority/resource/components/ResourceDialog.vue
View File

@@ -1,5 +1,5 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" width="500">
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall">
<el-form :model="formData" :rules="rules">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="formData.name" />
@@ -33,9 +33,9 @@
</el-dialog>
</template>
<script lang="ts" setup>
<script lang="ts" setup name="ResourceDialog">
import { defineProps, defineEmits, reactive,watch } from 'vue';
import { type Resource } from '@/api/resource/interface'
import { dialogSmall } from '@/utils/elementBind'
const props = defineProps<{
visible: boolean;
dialogTitle: string;

43
frontend/src/views/authority/resource/index.vue
View File

@@ -39,13 +39,12 @@
import { defineComponent,ref ,reactive} from 'vue'
import { type Resource } from '@/api/resource/interface'
import ProTable from '@/components/ProTable/index.vue'
import ResourceDialog from '@/components/ResourceDialog/index.vue'; // 导入子组件
import {Operation, CirclePlus, Delete, EditPen, Download, Upload, View, Refresh} from '@element-plus/icons-vue'
import ResourceDialog from "@/views/authority/resource/components/ResourceDialog.vue"; // 导入子组件
import {CirclePlus, Delete, EditPen} from '@element-plus/icons-vue'
import resourceDataList from '@/api/resource/resourceData'
import { useDictStore } from '@/stores/modules/dict'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
let multipleSelection = ref<string[]>([]);
import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
let multipleSelection = ref<string[]>([]);
const resourceData = resourceDataList
const dialogFormVisible = ref(false)
const isEditMode = ref(false);
@@ -70,17 +69,18 @@ import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
{
prop: 'name',
label: '名称',
width: 120,
width: 150,
search: { el: 'input', tooltip: '我是搜索提示' },
},
{
prop: 'path',
label: '路径',
width: 180,
width: 300,
},
{
prop: 'sort',
label: '排序',
width: 100,
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
@@ -90,6 +90,7 @@ import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
<span class='mr10 ml10'>-</span>
<el-input vModel_trim={searchParam.maxAge} placeholder='最大排序' />
</div>
)
},
},
@@ -97,13 +98,31 @@ import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
{
prop: 'type',
label: '资源类型',
width: 150,
// 字典数据（本地数据）
//enum: dictStore.getDictData('type'),
search: { el: 'select', props: { filterable: true } },
//search: { el: 'select', props: { filterable: true } },
//fieldNames: { label: 'label', value: 'resourceType' },
search: {
// 自定义 search 显示内容
render: ({ searchParam }) => {
return (
<div class='flx-center'>
<el-select >
<el-option ></el-option>
<el-option label="未检测"></el-option>
<el-option label="检测中"></el-option>
<el-option label="检测完成"></el-option>
</el-select>
</div>
)
},
},
},
{
prop: 'route_Name',
width: 200,
label: '路由名称',
search: { el: 'input' },
},
@@ -121,11 +140,7 @@ import { ElMessage, ElMessageBox, inputEmits } from 'element-plus';
prop: 'update_Time',
label: '更新时间',
width: 180,
search: {
el: 'date-picker',
span: 1,
props: { type: 'daterange', valueFormat: 'YYYY-MM-DD'},
defaultValue: ['2024-11-12', '2024-12-12'],}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
])
@@ -166,7 +181,7 @@ const submitForm = () => {
const openEditDialog = (resource: Resource.ResResourceList) => {
dialogForm.value = { ...resource }; // 复制资源数据以便编辑
isEditMode.value = true; // 设置为编辑模式
dialogTitle.value = '编辑资源';
dialogTitle.value = '编辑菜单';
dialogFormVisible.value = true; // 显示对话框
};
//选中

13
frontend/src/views/log/index.vue
View File

@@ -9,6 +9,7 @@
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-button type='primary' :icon='DataAnalysis'>分析</el-button>
<el-button type='primary' :icon='Upload'>导出csv</el-button>
</template>
</ProTable>
@@ -20,13 +21,15 @@
import TimeControl from '@/components/TimeControl/index.vue'
import { type Log } from '@/api/log/interface'
import ProTable from '@/components/ProTable/index.vue'
import { Upload } from '@element-plus/icons-vue'
import { Upload ,DataAnalysis} from '@element-plus/icons-vue'
import logDataList from '@/api/log/logData'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { reactive,ref } from 'vue'
let multipleSelection = ref<string[]>([])
const logData = logDataList
// 定义包含和排除的单位
const includedUnits = ['日', '周', '月', '季度']; // 可以根据需要包含的单位
const excludedUnits = ['年']; // 要排除的单位
// ProTable 实例
const proTable = ref<ProTableInstance>()
// 表格配置项
@@ -67,7 +70,7 @@ const columns = reactive<ColumnProps<Log.LogList>[]>([
render: ({ searchParam }) => {
return (
<div class='flx-flex-start'>
<TimeControl />
<TimeControl/>
</div>
)
},
@@ -81,6 +84,8 @@ const handleSelectionChange = (selection: Log.LogList[]) => {
multipleSelection.value = selection.map(row => row.id) // 更新选中的行
}
</script>
<style scoped>

91
frontend/src/views/machine/errorSystem/components/Error standardDialog.vue Normal file
View File

@@ -0,0 +1,91 @@
<template >
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall" >
<el-form-item label="指标类型" prop="type">
<el-select
class='select'
placeholder='选择时间单位'
>
<!-- 采用 v-for 动态渲染 -->
<el-option
v-for="unit in typeList"
:key="unit.value"
:label="unit.label"
:value="unit.value"
></el-option>
</el-select>
</el-form-item>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">新增</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="IndicatorTypeDialog">
import { defineProps, defineEmits, reactive,watch } from 'vue';
import { dialogSmall} from '@/utils/elementBind'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id:string;
name: string;
path: string;
sort: number;
type: string;
remark: string;
route_Name: string;
};
}>();
const typeList = [
{ label: '电压', value: '电压' },
{ label: '频率', value: '频率' },
{ label: '电压三相不平衡度', value: '电压三相不平衡度' },
{ label: '电流三相不平衡度', value: '电流三相不平衡度' },
{ label: '电压波动', value: '电压波动' },
{ label: '短时闪变', value: '短时闪变' },
{ label: '谐波电压', value: '谐波电压' },
{ label: '谐波电流', value: '谐波电流' },
{ label: '谐波相角', value: '谐波相角' },
{ label: '谐波功率', value: '谐波功率' },
{ label: '间谐波电压', value: '间谐波电压' },
{ label: '间谐波电流', value: '间谐波电流' },
{ label: '功率', value: '功率' },
{ label: '电流', value: '电流' },
{ label: '暂态电压幅值', value: '暂态电压幅值' },
{ label: '暂态持续时间', value: '暂态持续时间' },
];
const rules = {
name :[
{require:true,trigger:"blur",message:"请填写菜单名称"}
]
}
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
</script>

294
frontend/src/views/machine/errorSystem/components/ErrorSystemDialog.vue Normal file
View File

@@ -0,0 +1,294 @@
<template>
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogBig">
<el-tabs type="border-card">
<el-tab-pane label="基础信息">
<div class="form-grid">
<el-form :model="formData" >
<el-row :gutter="20" >
<el-col :span="10">
<el-form-item label="误差体系名称" prop="name">
<el-input placeholder="标准号+年份+设备等级"/>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="发布时间" prop="publishTime">
<el-input />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="上传误差体系截图" prop="screenshot">
<el-button :icon="FolderOpened" type="primary"></el-button>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="20" >
<el-col :span="10">
<el-form-item label="适用设备等级" prop="type">
<el-select placeholder="请选择设备等级">
<el-option label="A级" value="A级" />
<el-option label="S级" value="S级" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="实施时间" prop="publishTime">
<el-input />
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="状态" prop="type">
<el-select placeholder="请选择状态">
<el-option label="启用" value="启用" />
<el-option label="停用" value="停用" />
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
</el-tab-pane>
</el-tabs>
<div class="dialog-footer">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon='Delete' type="danger" >批量删除</el-button>
</div>
<el-table :data="tableData" style="width: 100%;text-align: center" >
<el-table-column type="selection" width="55" />
<el-table-column prop="id" label="序号" width="60" />
<el-table-column prop="type" label="电能质量检测指标类型" width="200"/>
<el-table-column label="起止范围">
<el-table-column label="起始">
<template #default="{ row }">
<el-row type="flex" align="middle">
<el-col :span="16">
<el-select v-model="row.startSelect" placeholder="选择起始值" style="width: 70px;">
<el-option
v-for="option in errorStartOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-col>
<el-col :span="8">
<span>{{ row.startRange }}</span>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束">
<template #default="{ row }">
<el-row type="flex" align="middle">
<el-col :span="16">
<el-select v-model="row.endSelect" placeholder="选择结束值" style="width: 70px;">
<el-option
v-for="option in errorEndOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</el-col>
<el-col :span="8">
<span>{{ row.endRange }}</span>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="120">
<template #default="{ row }">
<el-select v-model="row.unit" placeholder="选择单位">
<el-option
v-for="option in errorUnitOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100"/>
<el-table-column label="误差类型">
<template #default="{ row }">
<el-select v-model="row.errorType" placeholder="选择误差类型">
<el-option
v-for="option in errorTypeOptions"
:key="option.value"
:label="option.label"
:value="option.value"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" width="150">
<template #default>
<el-button type="primary" link :icon='CopyDocument'>复制</el-button>
<el-button type='primary' link :icon='Delete' >删除</el-button>
</template>
</el-table-column>
</el-table>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">保存</el-button>
</div>
</template>
</el-dialog>
<!-- 新增/编辑资源对话框 -->
<IndicatorTypeDialog
:visible="dialogFormVisible"
:formData="dialogForm"
:dialogTitle="dialogTitle"
@update:visible="dialogFormVisible = $event"
/>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import { defineProps, defineEmits, reactive,watch,ref } from 'vue';
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id:string;
name: string;
path: string;
sort: number;
type: string;
remark: string;
route_Name: string;
};
}>();
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增检测指标误差项')
const errorTypeOptions = [
{ label: '绝对值-标称值', value: 'type1' },
{ label: '相对值-I类', value: 'type2' },
{ label: '相对值-II类', value: 'type3' },
{ label: '绝对值-值类型', value: 'type4' },
];
const errorUnitOptions = [
{ label: '标称值', value: 'type1' },
{ label: '值', value: 'type2' },
{ label: '无', value: 'type3' },
];
const errorStartOptions = [
{ label: '>', value: 'type1' },
{ label: '>=', value: 'type2' },
{ label: '无', value: 'type3' },
];
const errorEndOptions = [
{ label: '<', value: 'type1' },
{ label: '<=', value: 'type2' },
{ label: '无', value: 'type3' },
];
const tableData = [
{
id: '1',
type: '电压',
startSelect: 'type1',
startRange: '0.1',
endSelect: 'type2',
endRange: '1.5',
unit:'type1',
maxErrorValue:'0.001',
errorType:'type1'
},
{
id: '2',
type: '电流',
startSelect: 'type2',
startRange: '0.01',
endSelect: 'type1',
endRange: '0.05',
unit:'type1',
maxErrorValue:'0.005',
errorType:'type1'
},
{
id: '3',
type: '频率',
startSelect: 'type2',
startRange: '42.5',
endSelect: 'type2',
endRange: '57.5',
unit:'type1',
maxErrorValue:'0.01',
errorType:'type4'
},
]
const rules = {
name :[
{require:true,trigger:"blur",message:"请填写菜单名称"}
]
}
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
const openAddDialog = () => {
dialogFormVisible.value = true; // 打开对话框
};
</script>
<style scoped>
.form-grid {
display: flex;
flex-direction: row; /* 横向排列 */
flex-wrap: wrap; /* 允许换行 */
}
.form-grid .el-form-item {
flex: 1 1 30%; /* 控件宽度 */
margin-right: 20px; /* 控件间距 */
}
.form-grid .el-form-item:last-child {
margin-right: 0; /* 最后一个控件不需要右边距 */
}
.dialog-footer {
display: flex;
justify-content: flex-end;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
}
.el-tabs {
margin-bottom: 20px; /* 添加底部边距 */
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
}
</style>

91
frontend/src/views/machine/errorSystem/components/IndicatorTypeDialog.vue Normal file
View File

@@ -0,0 +1,91 @@
<template >
<el-dialog :title="dialogTitle" :model-value="visible" @close="handleCancel" v-bind="dialogSmall" >
<el-form-item label="指标类型" prop="type">
<el-select
class='select'
placeholder='选择时间单位'
>
<!-- 采用 v-for 动态渲染 -->
<el-option
v-for="unit in typeList"
:key="unit.value"
:label="unit.label"
:value="unit.value"
></el-option>
</el-select>
</el-form-item>
<template #footer>
<div class="dialog-footer">
<el-button @click="handleCancel">取 消</el-button>
<el-button type="primary" @click="handleSubmit">新增</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="IndicatorTypeDialog">
import { defineProps, defineEmits, reactive,watch } from 'vue';
import { dialogSmall} from '@/utils/elementBind'
const props = defineProps<{
visible: boolean;
dialogTitle: string;
formData: {
id:string;
name: string;
path: string;
sort: number;
type: string;
remark: string;
route_Name: string;
};
}>();
const typeList = [
{ label: '电压', value: '电压' },
{ label: '频率', value: '频率' },
{ label: '电压三相不平衡度', value: '电压三相不平衡度' },
{ label: '电流三相不平衡度', value: '电流三相不平衡度' },
{ label: '电压波动', value: '电压波动' },
{ label: '短时闪变', value: '短时闪变' },
{ label: '谐波电压', value: '谐波电压' },
{ label: '谐波电流', value: '谐波电流' },
{ label: '谐波相角', value: '谐波相角' },
{ label: '谐波功率', value: '谐波功率' },
{ label: '间谐波电压', value: '间谐波电压' },
{ label: '间谐波电流', value: '间谐波电流' },
{ label: '功率', value: '功率' },
{ label: '电流', value: '电流' },
{ label: '暂态电压幅值', value: '暂态电压幅值' },
{ label: '暂态持续时间', value: '暂态持续时间' },
];
const rules = {
name :[
{require:true,trigger:"blur",message:"请填写菜单名称"}
]
}
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleSubmit = () => {
emit('submit', props.formData); // 提交表单数据
emit('update:visible', false); // 提交后关闭对话框
};
// 当 props.visible 改变时，更新 formData
watch(() => props.visible, (newVal) => {
if (!newVal) {
// 这里可以重置表单数据，如果需要的话
}
});
</script>

104
frontend/src/views/machine/errorSystem/index.vue Normal file
View File

@@ -0,0 +1,104 @@
<template>
<div class='table-box'>
<ProTable
ref='proTable'
:columns='columns'
:data='errorData'
type='selection'
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-button type='primary' :icon='CirclePlus' @click="openAddDialog">新增误差体系</el-button>
<el-button type='danger' :icon='Delete' plain
>
批量删除误差体系
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<el-button type='primary' link :icon='View' @row-click="handleRowClick">查看</el-button>
<el-button type='primary' link :icon='EditPen' @click="openEditDialog(scope.row)">编辑</el-button>
<el-button type='primary' link :icon='Delete' >删除</el-button>
</template>
</ProTable>
<!-- 新增/编辑资源对话框 -->
<ResourceDialog
:visible="dialogFormVisible"
:formData="dialogForm"
:dialogTitle="dialogTitle"
@update:visible="dialogFormVisible = $event"
/>
</div>
</template>
<script setup lang="ts" name='useProTable'>
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps } from '@/components/ProTable/interface'
import { CirclePlus, Delete,EditPen,View} from '@element-plus/icons-vue'
import errorDataList from '@/api/error/errorData'
import { reactive,ref } from 'vue'
import type { ErrorSystem } from '@/api/error/interface'
import ResourceDialog from "@/views/machine/errorSystem/components/ErrorSystemDialog.vue"; // 导入子组件
let multipleSelection = ref<string[]>([])
const errorData = errorDataList
const dialogFormVisible = ref(false)
const dialogTitle = ref('新增误差体系')
const dialogForm = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
year:'',
level:'',
});
// 表格配置项
const columns = reactive<ColumnProps<ErrorSystem.ErrorSystemList>[]>([
{ type: 'selection', fixed: 'left', width: 50 },
{
prop: 'id',
label: '序号',
width: 100,
},
{
prop: 'name',
label: '误差体系名称',
width: 300,
},
{
prop: 'year',
label: '标准实施年份',
search: { el: 'input' },
},
{
prop: 'level',
label: '适用设备等级',
search: { el: 'select', props: { filterable: true } },
},
{ prop: 'operation', label: '操作', fixed: 'right' },
])
// 打开编辑对话框
const openEditDialog = (resource: ErrorSystem.ErrorSystemList) => {
};
const openAddDialog = () => {
dialogForm.value = {
id: '',
name: '',
year: '',
level: '',
};
dialogFormVisible.value = true; // 打开对话框
};
const handleRowClick = (row: ErrorSystem.ErrorSystemList) =>{
}
</script>
<style scoped>
</style>