ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UPDATE: 处理控制台警告问题

Browse Source
This commit is contained in:
贾同学
2025-10-10 13:23:40 +08:00
parent 8e0b3be438
commit b319a89501
45 changed files with 6390 additions and 6341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/components/ErrorMessage/403.vue
View File

@@ -1,19 +1,20 @@
<template>
<div class="not-container">
<img src="@/assets/images/403.png" class="not-img" alt="403" />
<div class="not-detail">
<h2>403</h2>
<h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
<div class="not-container">
<img src="@/assets/images/403.png" class="not-img" alt="403" />
<div class="not-detail">
<h2>403</h2>
<h4>抱歉，您无权访问该页面~🙅‍♂️🙅‍♀️</h4>
<el-button type="primary" @click="router.back">返回上一页</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="403">
import { useRouter } from "vue-router";
const router = useRouter();
import { useRouter } from 'vue-router'
const router = useRouter()
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

21
frontend/src/components/ErrorMessage/404.vue
View File

@@ -1,19 +1,20 @@
<template>
<div class="not-container">
<img src="@/assets/images/404.png" class="not-img" alt="404" />
<div class="not-detail">
<h2>404</h2>
<h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
<div class="not-container">
<img src="@/assets/images/404.png" class="not-img" alt="404" />
<div class="not-detail">
<h2>404</h2>
<h4>抱歉，您访问的页面不存在~🤷‍♂️🤷‍♀️</h4>
<el-button type="primary" @click="router.back">返回上一页</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="404">
import { useRouter } from "vue-router";
const router = useRouter();
import { useRouter } from 'vue-router'
const router = useRouter()
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

21
frontend/src/components/ErrorMessage/500.vue
View File

@@ -1,19 +1,20 @@
<template>
<div class="not-container">
<img src="@/assets/images/500.png" class="not-img" alt="500" />
<div class="not-detail">
<h2>500</h2>
<h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
<el-button type="primary" @click="router.back"> 返回上一页 </el-button>
<div class="not-container">
<img src="@/assets/images/500.png" class="not-img" alt="500" />
<div class="not-detail">
<h2>500</h2>
<h4>抱歉，您的网络不见了~🤦‍♂️🤦‍♀️</h4>
<el-button type="primary" @click="router.back">返回上一页</el-button>
</div>
</div>
</div>
</template>
<script setup lang="ts" name="500">
import { useRouter } from "vue-router";
const router = useRouter();
import { useRouter } from 'vue-router'
const router = useRouter()
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

2
frontend/src/components/Loading/index.vue
View File

@@ -9,5 +9,5 @@
<script setup lang="ts" name="Loading"></script>
<style scoped lang="scss">
@import "./index.scss";
@use "./index.scss";;
</style>

107
frontend/src/components/SelectIcon/index.vue
View File

@@ -1,49 +1,49 @@
<template>
<div class='icon-box' >
<el-input
ref='inputRef'
v-model='valueIcon'
v-bind='$attrs'
:placeholder='placeholder'
:clearable='clearable'
@clear='clearIcon'
@click='openDialog'
>
<template #append>
<el-button :icon='customIcons[iconValue]' />
</template>
</el-input>
<el-dialog v-model='dialogVisible' :title='placeholder' top='5%' width='30%' >
<el-input v-model='inputValue' placeholder='搜索图标' size='large' :prefix-icon='Icons.Search' />
<el-scrollbar v-if='Object.keys(iconsList).length'>
<div class='icon-list'>
<div v-for='item in iconsList' :key='item' class='icon-item' @click='selectIcon(item)'>
<component :is='item'></component>
<span>{{ item.name }}</span>
</div>
</div>
</el-scrollbar>
<el-empty v-else description='未搜索到您要找的图标~' />
</el-dialog>
</div>
<div class="icon-box">
<el-input
ref="inputRef"
v-model="valueIcon"
v-bind="$attrs"
:placeholder="placeholder"
:clearable="clearable"
@clear="clearIcon"
@click="openDialog"
>
<template #append>
<el-button :icon="customIcons[iconValue]" />
</template>
</el-input>
<el-dialog v-model="dialogVisible" :title="placeholder" top="5%" width="30%">
<el-input v-model="inputValue" placeholder="搜索图标" size="large" :prefix-icon="Icons.Search" />
<el-scrollbar v-if="Object.keys(iconsList).length">
<div class="icon-list">
<div v-for="item in iconsList" :key="item" class="icon-item" @click="selectIcon(item)">
<component :is="item"></component>
<span>{{ item.name }}</span>
</div>
</div>
</el-scrollbar>
<el-empty v-else description="未搜索到您要找的图标~" />
</el-dialog>
</div>
</template>
<script lang='ts' setup name='SelectIcon'>
<script lang="ts" setup name="SelectIcon">
import * as Icons from '@element-plus/icons-vue'
import { computed, ref } from 'vue';
import { computed, ref } from 'vue'
interface SelectIconProps {
iconValue: string| undefined;
title?: string;
clearable?: boolean;
placeholder?: string;
iconValue: string | undefined
title?: string
clearable?: boolean
placeholder?: string
}
const props = withDefaults(defineProps<SelectIconProps>(), {
iconValue: '',
title: '请选择图标',
clearable: true,
placeholder: '请选择图标',
iconValue: '',
title: '请选择图标',
clearable: true,
placeholder: '请选择图标'
})
// 重新接收一下，防止打包后 clearable 报错
@@ -55,37 +55,36 @@ const openDialog = () => (dialogVisible.value = true)
// 选择图标(触发更新父组件数据)
const emit = defineEmits<{
'update:iconValue': [value: string];
'update:iconValue': [value: string]
}>()
const selectIcon = (item: any) => {
dialogVisible.value = false
valueIcon.value = item.name
emit('update:iconValue', item.name)
setTimeout(() => inputRef.value.blur(), 0)
dialogVisible.value = false
valueIcon.value = item.name
emit('update:iconValue', item.name)
setTimeout(() => inputRef.value.blur(), 0)
}
// 清空图标
const inputRef = ref()
const clearIcon = () => {
valueIcon.value = ''
emit('update:iconValue', '')
setTimeout(() => inputRef.value.blur(), 0)
valueIcon.value = ''
emit('update:iconValue', '')
setTimeout(() => inputRef.value.blur(), 0)
}
// 监听搜索框值
const inputValue = ref('')
const customIcons: { [key: string]: any } = Icons
const iconsList = computed((): { [key: string]: any } => {
if (!inputValue.value) return Icons
let result: { [key: string]: any } = {}
for (const key in customIcons) {
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
}
return result
if (!inputValue.value) return Icons
let result: { [key: string]: any } = {}
for (const key in customIcons) {
if (key.toLowerCase().indexOf(inputValue.value.toLowerCase()) > -1) result[key] = customIcons[key]
}
return result
})
</script>
<style scoped lang='scss'>
@import "./index.scss";
<style scoped lang="scss">
@use './index.scss';
</style>

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

@@ -1,97 +1,84 @@
<template>
<div class='time-control'>
<el-select
class='select'
v-model='timeUnit'
placeholder='选择时间单位'
@change='handleChange'
>
<!-- 采用 v-for 动态渲染 -->
<el-option
v-for='unit in timeUnits'
:key='unit.value'
:label='unit.label'
:value='unit.value'
></el-option>
</el-select>
<div class="time-control">
<el-select class="select" v-model="timeUnit" placeholder="选择时间单位" @change="handleChange">
<!-- 采用 v-for 动态渲染 -->
<el-option v-for="unit in timeUnits" :key="unit.value" :label="unit.label" :value="unit.value"></el-option>
</el-select>
<!-- 禁用时间选择器 -->
<div class='date-display'>
<el-date-picker
class='date-picker'
v-model='startDate'
type='date'
placeholder='起始时间'
@change='emitDateChange'
:disabled-date='disableStartDate'
:readonly="timeUnit != '自定义'"
></el-date-picker>
<el-text>~</el-text>
<el-date-picker
class='date-picker'
v-model='endDate'
type='date'
placeholder='结束时间'
@change='emitDateChange'
:disabled-date='disableEndDate'
:readonly="timeUnit !== '自定义'"
></el-date-picker>
<!-- 禁用时间选择器 -->
<div class="date-display">
<el-date-picker
class="date-picker"
v-model="startDate"
type="date"
placeholder="起始时间"
@change="emitDateChange"
:disabled-date="disableStartDate"
:readonly="timeUnit != '自定义'"
></el-date-picker>
<el-text>~</el-text>
<el-date-picker
class="date-picker"
v-model="endDate"
type="date"
placeholder="结束时间"
@change="emitDateChange"
:disabled-date="disableEndDate"
:readonly="timeUnit !== '自定义'"
></el-date-picker>
</div>
<div class="date-display" v-if="timeUnit !== '自定义'">
<el-button
style="width: 10px"
class="triangle-button"
type="primary"
@click="prevPeriod"
@change="emitDateChange"
>
<div class="left_triangle"></div>
</el-button>
<el-button class="triangle-button" type="primary" @click="goToCurrent">当前</el-button>
<el-button
style="width: 10px"
class="triangle-button"
type="primary"
@click="nextPeriod"
:disabled="isNextDisabled"
>
<div class="right_triangle"></div>
</el-button>
</div>
</div>
<div class='date-display' v-if="timeUnit !== '自定义'">
<el-button
style='width: 10px;'
class='triangle-button'
type='primary'
@click='prevPeriod'
@change='emitDateChange'
>
<div class='left_triangle'></div>
</el-button>
<el-button class='triangle-button' type='primary' @click='goToCurrent'>
当前
</el-button>
<el-button
style='width: 10px;'
class='triangle-button'
type='primary'
@click='nextPeriod'
:disabled='isNextDisabled'
>
<div class='right_triangle'></div>
</el-button>
</div>
</div>
</template>
<script setup lang='ts'>
import { ref, onMounted, defineProps, defineEmits } from 'vue'
<script setup lang="ts">
import { onMounted, ref } from 'vue'
// 定义时间单位的类型
interface TimeUnit {
label: string;
value: string;
label: string
value: string
}
// 定义组件的props，包含包括和排除的时间单位
const props = defineProps({
include: {
type: Array as () => string[],
default: () => ['日', '周', '月', '季度', '年', '自定义'],
},
exclude: {
type: Array as () => string[],
default: () => [],
},
default: {
type: String,
default: '月',
},
include: {
type: Array as () => string[],
default: () => ['日', '周', '月', '季度', '年', '自定义']
},
exclude: {
type: Array as () => string[],
default: () => []
},
default: {
type: String,
default: '月'
}
})
// 定义事件
const emit = defineEmits<{
(e: 'update-dates', startDate: string, endDate: string): void;
(e: 'update-dates', startDate: string, endDate: string): void
}>()
const timeUnit = ref<string>(props.default) // 默认选择
const startDate = ref<Date>(new Date()) // 起始日期
@@ -100,219 +87,206 @@ const isNextDisabled = ref<boolean>(false) // 控制下一周期按钮的禁用
const today = ref<Date>(new Date()) // 当前日期
// 过滤出可用的时间单位
const timeUnits = ref<TimeUnit[]>(
props.include.filter(unit => !props.exclude.includes(unit)).map(unit => ({
label: unit,
value: unit,
})),
props.include
.filter(unit => !props.exclude.includes(unit))
.map(unit => ({
label: unit,
value: unit
}))
)
// 发出日期变化事件
const emitDateChange = () => {
emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
emit('update-dates', formatDate(startDate.value), formatDate(endDate.value))
}
// 在组件挂载时更新日期范围
onMounted(() => {
updateDateRange()
updateDateRange()
})
const handleChange = (unit: string) => {
// 根据选择的时间单位处理日期变化
if (unit !== '自定义') {
updateDateRange()
} else {
// 自定义选项逻辑
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
endDate.value = new Date()
}
timeUnit.value = unit
// 根据选择的时间单位处理日期变化
if (unit !== '自定义') {
updateDateRange()
} else {
// 自定义选项逻辑
startDate.value = new Date(new Date().setDate(new Date().getDate() - 1))
endDate.value = new Date()
}
timeUnit.value = unit
// 确保开始时间和结束时间不为空
if (!startDate.value) {
startDate.value = new Date()
}
if (!endDate.value) {
endDate.value = new Date()
}
startDate.value = new Date()
}
if (!endDate.value) {
endDate.value = new Date()
}
emitDateChange() // 变化时也发出更新事件
updateNextButtonStatus()
emitDateChange() // 变化时也发出更新事件
updateNextButtonStatus()
}
const updateDateRange = () => {
// 根据选择的时间单位计算起始和结束日期
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)
// 根据选择的时间单位计算起始和结束日期
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)
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
} 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(), today.value.getMonth(), 1);
endDate.value = new Date(today.value.getFullYear(), today.value.getMonth() + 1, 0);
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
} else if (timeUnit.value === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1)
endDate.value = new Date(today.value.getFullYear(), 11, 31)
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
} 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);
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
}
// 确保开始时间和结束时间不为空
if (!startDate.value) {
startDate.value = new Date()
}
if (!endDate.value) {
endDate.value = new Date()
}
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
} else if (timeUnit.value === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1);
endDate.value = new Date(today.value.getFullYear(), 11, 31);
// // 确保结束日期不超过今天
// if (endDate.value > today.value) {
// endDate.value = new Date(today.value);
// endDate.value.setHours(23, 59, 59, 999); // 设置结束时间为今天的23:59:59.999
// }
}
// 确保开始时间和结束时间不为空
if (!startDate.value) {
startDate.value = new Date()
}
if (!endDate.value) {
endDate.value = new Date()
}
updateNextButtonStatus()
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
const startOfWeek = new Date(date)
const day = startOfWeek.getDay()
const diff = day === 0 ? -6 : 1 - day // 星期天的情况
startOfWeek.setDate(startOfWeek.getDate() + diff)
return startOfWeek
}
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)
const endOfWeek = new Date(date)
const day = endOfWeek.getDay()
const diff = day === 0 ? 0 : 7 - day // 星期天的情况
endOfWeek.setDate(endOfWeek.getDate() + diff)
// 获取今天的日期
const today = new Date();
today.setHours(23, 59, 59, 999); // 设置今天的结束时间（23:59:59.999）
// 获取今天的日期
const today = new Date()
today.setHours(23, 59, 59, 999) // 设置今天的结束时间（23:59:59.999）
// 返回不超过今天的结束时间
//return endOfWeek > today ? today : endOfWeek;
return endOfWeek
// 返回不超过今天的结束时间
//return endOfWeek > today ? today : endOfWeek;
return endOfWeek
}
const prevPeriod = () => {
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
const prevStartDate = new Date(startDate.value)
const prevEndDate = new Date(endDate.value)
if (timeUnit.value === '日') {
prevStartDate.setDate(prevStartDate.getDate() - 1)
prevEndDate.setDate(prevEndDate.getDate() - 1)
} else if (timeUnit.value === '周') {
prevStartDate.setDate(prevStartDate.getDate() - 7)
prevEndDate.setDate(prevEndDate.getDate() - 7)
} else if (timeUnit.value === '月') {
if (timeUnit.value === '日') {
prevStartDate.setDate(prevStartDate.getDate() - 1)
prevEndDate.setDate(prevEndDate.getDate() - 1)
} else if (timeUnit.value === '周') {
prevStartDate.setDate(prevStartDate.getDate() - 7)
prevEndDate.setDate(prevEndDate.getDate() - 7)
} else if (timeUnit.value === '月') {
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
} else if (timeUnit.value === '季度') {
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
} else if (timeUnit.value === '年') {
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
}
prevStartDate.setMonth(prevStartDate.getMonth() - 1)
prevEndDate.setMonth(prevEndDate.getMonth() - 1)
} else if (timeUnit.value === '季度') {
prevStartDate.setMonth(prevStartDate.getMonth() - 3)
prevEndDate.setMonth(prevEndDate.getMonth() - 3)
} else if (timeUnit.value === '年') {
prevStartDate.setFullYear(prevStartDate.getFullYear() - 1)
prevEndDate.setFullYear(prevEndDate.getFullYear() - 1)
}
startDate.value = prevStartDate
endDate.value = prevEndDate
updateNextButtonStatus()
startDate.value = prevStartDate
endDate.value = prevEndDate
updateNextButtonStatus()
}
const goToCurrent = () => {
if (timeUnit.value !== '自定义') {
updateDateRange() // 更新为当前选择时间单位的时间范围
}
if (timeUnit.value !== '自定义') {
updateDateRange() // 更新为当前选择时间单位的时间范围
}
}
const nextPeriod = () => {
const nextStartDate = new Date(startDate.value)
const nextEndDate = new Date(endDate.value)
const nextStartDate = new Date(startDate.value)
const nextEndDate = new Date(endDate.value)
if (timeUnit.value === '日') {
nextStartDate.setDate(nextStartDate.getDate() + 1)
nextEndDate.setDate(nextEndDate.getDate() + 1)
} else if (timeUnit.value === '周') {
nextStartDate.setDate(nextStartDate.getDate() + 7)
nextEndDate.setDate(nextEndDate.getDate() + 7)
} else if (timeUnit.value === '月') {
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
} else if (timeUnit.value === '季度') {
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
} else if (timeUnit.value === '年') {
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
}
if (timeUnit.value === '日') {
nextStartDate.setDate(nextStartDate.getDate() + 1)
nextEndDate.setDate(nextEndDate.getDate() + 1)
} else if (timeUnit.value === '周') {
nextStartDate.setDate(nextStartDate.getDate() + 7)
nextEndDate.setDate(nextEndDate.getDate() + 7)
} else if (timeUnit.value === '月') {
nextStartDate.setMonth(nextStartDate.getMonth() + 1)
nextEndDate.setMonth(nextEndDate.getMonth() + 1)
} else if (timeUnit.value === '季度') {
nextStartDate.setMonth(nextStartDate.getMonth() + 3)
nextEndDate.setMonth(nextStartDate.getMonth() + 3)
} else if (timeUnit.value === '年') {
nextStartDate.setFullYear(nextStartDate.getFullYear() + 1)
nextEndDate.setFullYear(nextEndDate.getFullYear() + 1)
}
startDate.value = nextStartDate
endDate.value = nextEndDate
updateNextButtonStatus()
startDate.value = nextStartDate
endDate.value = nextEndDate
updateNextButtonStatus()
}
const updateNextButtonStatus = () => {
// 更新下一个按钮的禁用状态
const maxDate = new Date() // 假设最新日期为今天
// 将 maxDate 设置为当天的开始时间
maxDate.setHours(0, 0, 0, 0)
// 将 endDate 设置为当天的开始时间并进行比较
const endDateAdjusted = new Date(endDate.value)
endDateAdjusted.setHours(0, 0, 0, 0)
// 仅比较日期部分
isNextDisabled.value = endDateAdjusted >= maxDate
emitDateChange() // 变化时也发出更新事件
// 更新下一个按钮的禁用状态
const maxDate = new Date() // 假设最新日期为今天
// 将 maxDate 设置为当天的开始时间
maxDate.setHours(0, 0, 0, 0)
// 将 endDate 设置为当天的开始时间并进行比较
const endDateAdjusted = new Date(endDate.value)
endDateAdjusted.setHours(0, 0, 0, 0)
// 仅比较日期部分
isNextDisabled.value = endDateAdjusted >= maxDate
emitDateChange() // 变化时也发出更新事件
}
// 限制开始日期不能选择超过当前日期
const disableStartDate = (date: Date) => {
return date > today.value
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)
if (timeUnit.value !== '自定义') return false // 如果不是自定义时间单位，则不限制
const start = new Date(startDate.value)
return date > today.value || (start && date <= start)
}
// 格式化日期yyyy-mm-dd
function formatDate(date: Date | null): string {
if (!date) {
return '';
}
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
return `${year}-${month}-${day}`;
if (!date) {
return ''
}
const year = date.getFullYear()
const month = String(date.getMonth() + 1).padStart(2, '0')
const day = String(date.getDate()).padStart(2, '0')
return `${year}-${month}-${day}`
}
</script>
<style scoped lang='scss'>
@import "./index.scss";
<style scoped lang="scss">
@use './index.scss';
</style>

2
frontend/src/components/echarts/line/index.vue
View File

@@ -5,7 +5,7 @@
</template>
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
import { onBeforeUnmount, onMounted, ref, watch } from 'vue'
// import echarts from './echarts'
import * as echarts from 'echarts' // 全引入
// import 'echarts/lib/component/dataZoom'

101
frontend/src/layouts/LayoutClassic/index.vue
View File

@@ -1,63 +1,62 @@
<!-- 经典布局 -->
<template>
<el-container class="layout">
<el-header>
<div class="header-lf mask-image">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
<span class="logo-text">{{ title }}</span>
</div>
<ToolBarLeft />
</div>
<div class="header-ri">
<ToolBarRight />
</div>
</el-header>
<el-container class="classic-content">
<el-aside>
<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="menuList" />
</el-menu>
</el-scrollbar>
</div>
</el-aside>
<el-container class="classic-main">
<Main />
</el-container>
<el-container class="layout">
<el-header>
<div class="header-lf mask-image">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
<span class="logo-text">{{ title }}</span>
</div>
<ToolBarLeft />
</div>
<div class="header-ri">
<ToolBarRight />
</div>
</el-header>
<el-container class="classic-content">
<el-aside>
<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="menuList" />
</el-menu>
</el-scrollbar>
</div>
</el-aside>
<el-container class="classic-main">
<Main />
</el-container>
</el-container>
</el-container>
</el-container>
</template>
<script setup lang="ts" name="layoutClassic">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
import { useGlobalStore } from '@/stores/modules/global'
import Main from '@/layouts/components/Main/index.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
const title = import.meta.env.VITE_GLOB_APP_TITLE;
const title = import.meta.env.VITE_GLOB_APP_TITLE
const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const route = useRoute()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const accordion = computed(() => globalStore.accordion)
const isCollapse = computed(() => globalStore.isCollapse)
const menuList = computed(() => authStore.showMenuListGet)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

172
frontend/src/layouts/LayoutColumns/index.vue
View File

@@ -1,103 +1,105 @@
<!-- 分栏布局 -->
<template>
<el-container class="layout">
<div class="aside-split">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
</div>
<el-scrollbar>
<div class="split-list">
<div
v-for="item in menuList"
:key="item.path"
class="split-item"
:class="{ 'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path }"
@click="changeSubMenu(item)"
>
<el-icon>
<component :is="item.meta.icon"></component>
</el-icon>
<span class="title">{{ item.meta.title }}</span>
</div>
<el-container class="layout">
<div class="aside-split">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
</div>
<el-scrollbar>
<div class="split-list">
<div
v-for="item in menuList"
:key="item.path"
class="split-item"
:class="{
'split-active': splitActive === item.path || `/${splitActive.split('/')[1]}` === item.path
}"
@click="changeSubMenu(item)"
>
<el-icon>
<component :is="item.meta.icon"></component>
</el-icon>
<span class="title">{{ item.meta.title }}</span>
</div>
</div>
</el-scrollbar>
</div>
</el-scrollbar>
</div>
<el-aside :class="{ 'not-aside': !subMenuList.length }" :style="{ width: isCollapse ? '65px' : '210px' }">
<div class="logo flx-center">
<span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? "G" : title }}</span>
</div>
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="subMenuList" />
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header>
<ToolBarLeft />
<ToolBarRight />
</el-header>
<Main />
<el-aside :class="{ 'not-aside': !subMenuList.length }" :style="{ width: isCollapse ? '65px' : '210px' }">
<div class="logo flx-center">
<span v-show="subMenuList.length" class="logo-text">{{ isCollapse ? 'G' : title }}</span>
</div>
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="subMenuList" />
</el-menu>
</el-scrollbar>
</el-aside>
<el-container>
<el-header>
<ToolBarLeft />
<ToolBarRight />
</el-header>
<Main />
</el-container>
</el-container>
</el-container>
</template>
<script setup lang="ts" name="layoutColumns">
import { ref, computed, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { computed, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
import { useGlobalStore } from '@/stores/modules/global'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
const title = import.meta.env.VITE_GLOB_APP_TITLE;
const title = import.meta.env.VITE_GLOB_APP_TITLE
const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const accordion = computed(() => globalStore.accordion)
const isCollapse = computed(() => globalStore.isCollapse)
const menuList = computed(() => authStore.showMenuListGet)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
const subMenuList = ref<Menu.MenuOptions[]>([]);
const splitActive = ref("");
const subMenuList = ref<Menu.MenuOptions[]>([])
const splitActive = ref('')
watch(
() => [menuList, route],
() => {
// 当前菜单没有数据直接 return
if (!menuList.value.length) return;
splitActive.value = route.path;
const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
return route.path === item.path || `/${route.path.split("/")[1]}` === item.path;
});
if (menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children);
subMenuList.value = [];
},
{
deep: true,
immediate: true
}
);
() => [menuList, route],
() => {
// 当前菜单没有数据直接 return
if (!menuList.value.length) return
splitActive.value = route.path
const menuItem = menuList.value.filter((item: Menu.MenuOptions) => {
return route.path === item.path || `/${route.path.split('/')[1]}` === item.path
})
if (menuItem[0].children?.length) return (subMenuList.value = menuItem[0].children)
subMenuList.value = []
},
{
deep: true,
immediate: true
}
)
// change SubMenu
const changeSubMenu = (item: Menu.MenuOptions) => {
splitActive.value = item.path;
if (item.children?.length) return (subMenuList.value = item.children);
subMenuList.value = [];
router.push(item.path);
};
splitActive.value = item.path
if (item.children?.length) return (subMenuList.value = item.children)
subMenuList.value = []
router.push(item.path)
}
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

131
frontend/src/layouts/LayoutTransverse/index.vue
View File

@@ -1,85 +1,78 @@
<!-- 横向布局 -->
<template>
<el-container class="layout">
<el-header>
<div class="logo flx-center">
<!-- <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> -->
<img
class="logo-img"
src="@/assets/images/cn_pms9100_logo.png"
alt="logo"
/>
<span class="logo-text">{{ title }} </span>
</div>
<el-menu v-if="showMenuFlag" trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
<!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
<template v-for="subItem in menuList" :key="subItem.path">
<el-sub-menu
v-if="subItem.children?.length"
:key="subItem.path"
:index="subItem.path + 'el-sub-menu'"
>
<template #title>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<span>{{ subItem.meta.title }}</span>
</template>
<SubMenu :menu-list="subItem.children" />
</el-sub-menu>
<el-menu-item
v-else
:key="subItem.path + 'el-menu-item'"
:index="subItem.path"
@click="handleClickMenu(subItem)"
>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<template #title>
<span>{{ subItem.meta.title }}</span>
</template>
</el-menu-item>
</template>
</el-menu>
<ToolBarRight />
</el-header>
<Main />
</el-container>
<el-container class="layout">
<el-header>
<div class="logo flx-center">
<!-- <img class="logo-img" src="@/assets/images/logo.svg" alt="logo" /> -->
<img class="logo-img" src="@/assets/images/cn_pms9100_logo.png" alt="logo" />
<span class="logo-text">{{ title }}</span>
</div>
<el-menu v-if="showMenuFlag" trigger="click" mode="horizontal" :router="false" :default-active="activeMenu">
<!-- 不能直接使用 SubMenu 组件，无法触发 el-menu 隐藏省略功能 -->
<template v-for="subItem in menuList" :key="subItem.path">
<el-sub-menu
v-if="subItem.children?.length"
:key="subItem.path"
:index="subItem.path + 'el-sub-menu'"
>
<template #title>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<span>{{ subItem.meta.title }}</span>
</template>
<SubMenu :menu-list="subItem.children" />
</el-sub-menu>
<el-menu-item
v-else
:key="subItem.path + 'el-menu-item'"
:index="subItem.path"
@click="handleClickMenu(subItem)"
>
<el-icon>
<component :is="subItem.meta.icon"></component>
</el-icon>
<template #title>
<span>{{ subItem.meta.title }}</span>
</template>
</el-menu-item>
</template>
</el-menu>
<ToolBarRight />
</el-header>
<Main />
</el-container>
</template>
<script setup lang="ts" name="layoutTransverse">
import { computed } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
import { useRoute, useRouter } from "vue-router";
import Main from "@/layouts/components/Main/index.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { computed } from 'vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useRoute, useRouter } from 'vue-router'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
const title = import.meta.env.VITE_GLOB_APP_TITLE;
const title = import.meta.env.VITE_GLOB_APP_TITLE
const route = useRoute();
const router = useRouter();
const authStore = useAuthStore();
const menuList = computed(() => authStore.showMenuListGet);
const showMenuFlag=computed(()=>authStore.showMenuFlagGet)
const activeMenu = computed(
() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string
);
const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()
const menuList = computed(() => authStore.showMenuListGet)
const showMenuFlag = computed(() => authStore.showMenuFlagGet)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
const handleClickMenu = (subItem: Menu.MenuOptions) => {
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, "_blank");
router.push(subItem.path);
};
if (subItem.meta.isLink) return window.open(subItem.meta.isLink, '_blank')
router.push(subItem.path)
}
</script>
<style scoped lang="scss">
@import "./index.scss";
.logo{
margin-right: 0 !important;
@use './index.scss';
.logo {
margin-right: 0 !important;
}
.logo-text {
letter-spacing: 2px;
letter-spacing: 2px;
}
</style>

88
frontend/src/layouts/LayoutVertical/index.vue
View File

@@ -1,56 +1,56 @@
<!-- 纵向布局 -->
<template>
<el-container class="layout">
<el-aside>
<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
<span v-show="!isCollapse" class="logo-text">{{ title }}</span>
</div>
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="menuList" />
</el-menu>
</el-scrollbar>
</div>
</el-aside>
<el-container>
<el-header>
<ToolBarLeft />
<ToolBarRight />
</el-header>
<Main />
<el-container class="layout">
<el-aside>
<div class="aside-box" :style="{ width: isCollapse ? '65px' : '210px' }">
<div class="logo flx-center">
<img class="logo-img" src="@/assets/images/logo.svg" alt="logo" />
<span v-show="!isCollapse" class="logo-text">{{ title }}</span>
</div>
<el-scrollbar>
<el-menu
:router="false"
:default-active="activeMenu"
:collapse="isCollapse"
:unique-opened="accordion"
:collapse-transition="false"
>
<SubMenu :menu-list="menuList" />
</el-menu>
</el-scrollbar>
</div>
</el-aside>
<el-container>
<el-header>
<ToolBarLeft />
<ToolBarRight />
</el-header>
<Main />
</el-container>
</el-container>
</el-container>
</template>
<script setup lang="ts" name="layoutVertical">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useAuthStore } from "@/stores/modules/auth";
import { useGlobalStore } from "@/stores/modules/global";
import Main from "@/layouts/components/Main/index.vue";
import ToolBarLeft from "@/layouts/components/Header/ToolBarLeft.vue";
import ToolBarRight from "@/layouts/components/Header/ToolBarRight.vue";
import SubMenu from "@/layouts/components/Menu/SubMenu.vue";
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/modules/auth'
import { useGlobalStore } from '@/stores/modules/global'
import Main from '@/layouts/components/Main/index.vue'
import ToolBarLeft from '@/layouts/components/Header/ToolBarLeft.vue'
import ToolBarRight from '@/layouts/components/Header/ToolBarRight.vue'
import SubMenu from '@/layouts/components/Menu/SubMenu.vue'
const title = import.meta.env.VITE_GLOB_APP_TITLE;
const title = import.meta.env.VITE_GLOB_APP_TITLE
const route = useRoute();
const authStore = useAuthStore();
const globalStore = useGlobalStore();
const accordion = computed(() => globalStore.accordion);
const isCollapse = computed(() => globalStore.isCollapse);
const menuList = computed(() => authStore.showMenuListGet);
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string);
const route = useRoute()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const accordion = computed(() => globalStore.accordion)
const isCollapse = computed(() => globalStore.isCollapse)
const menuList = computed(() => authStore.showMenuListGet)
const activeMenu = computed(() => (route.meta.activeMenu ? route.meta.activeMenu : route.path) as string)
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

175
frontend/src/layouts/components/Footer/index.vue
View File

@@ -1,115 +1,104 @@
<template>
<div class="footer flx-align-center pl10">
<el-dropdown>
<!-- <span class="el-dropdown-link">
<div class="footer flx-align-center pl10">
<el-dropdown>
<!-- <span class="el-dropdown-link">
{{ title }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span> -->
<!-- <el-button dictType="primary"> -->
<div class="change_mode">
{{ title }}
<el-icon class="el-icon--right change_mode_down"
><arrow-down
/></el-icon>
<el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
</div>
<!-- </el-button> -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handelOpen('模拟式')"
>模拟式模块</el-dropdown-item
>
<el-dropdown-item @click="handelOpen('数字式')"
>数字式模块</el-dropdown-item
>
<el-dropdown-item @click="handelOpen('比对式')"
>比对式模块</el-dropdown-item
>
</el-dropdown-menu>
</template>
</el-dropdown>
<p style="margin: 0;" >
<a href="http://www.shining-electric.com/" target="_blank">
2024 © 南京灿能电力自动化股份有限公司
</a>
</p>
</div>
<!-- <el-button dictType="primary"> -->
<div class="change_mode">
{{ title }}
<el-icon class="el-icon--right change_mode_down"><arrow-down /></el-icon>
<el-icon class="el-icon--right change_mode_up"><arrow-up /></el-icon>
</div>
<!-- </el-button> -->
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="handelOpen('模拟式')">模拟式模块</el-dropdown-item>
<el-dropdown-item @click="handelOpen('数字式')">数字式模块</el-dropdown-item>
<el-dropdown-item @click="handelOpen('比对式')">比对式模块</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<p style="margin: 0">
<a href="http://www.shining-electric.com/" target="_blank">2024 © 南京灿能电力自动化股份有限公司</a>
</p>
</div>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, onMounted, watch } from "vue";
import { useAuthStore } from "@/stores/modules/auth";
import { useModeStore } from '@/stores/modules/mode'; // 引入模式 store
import { useRouter } from "vue-router";
const router = useRouter();
const authStore = useAuthStore();
const modeStore = useModeStore();
import { computed } from 'vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useRouter } from 'vue-router'
const router = useRouter()
const authStore = useAuthStore()
const modeStore = useModeStore()
const title = computed(() => {
return modeStore.currentMode=== ''? '模拟式模块' : modeStore.currentMode+'模块';
});
return modeStore.currentMode === '' ? '模拟式模块' : modeStore.currentMode + '模块'
})
const handelOpen = async (item: string) => {
await authStore.setShowMenu();
modeStore.setCurrentMode(item); // 将模式code存入 store
//if (router.currentRoute.value.path === '/home/index') {
// 强制刷新页面
window.location.reload();
//} else {
// router.push({ path: '/home/index' });
//}
};
await authStore.setShowMenu()
modeStore.setCurrentMode(item) // 将模式code存入 store
//if (router.currentRoute.value.path === '/home/index') {
// 强制刷新页面
window.location.reload()
//} else {
// router.push({ path: '/home/index' });
//}
}
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
.footer {
position: relative;
background-color: var(--el-color-primary);
// .el-button:hover {
// background-color: var(--el-color-primary) !important;
// border: none !important;
// outline: none !important;
// }
.change_mode {
color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
width: auto;
font-size: 14px;
.change_mode_down {
display: block;
position: relative;
background-color: var(--el-color-primary);
// .el-button:hover {
// background-color: var(--el-color-primary) !important;
// border: none !important;
// outline: none !important;
// }
.change_mode {
color: #fff;
display: flex;
align-items: center;
justify-content: flex-start;
height: 100%;
width: auto;
font-size: 14px;
.change_mode_down {
display: block;
}
.change_mode_up {
display: none;
}
}
.change_mode_up {
display: none;
.change_mode:hover {
.change_mode_down {
display: none;
}
.change_mode_up {
display: block;
}
}
}
.change_mode:hover {
.change_mode_down {
display: none;
.el-dropdown {
z-index: 1001;
}
.change_mode_up {
display: block;
p {
position: absolute;
width: 100%;
height: 100%;
text-align: right;
line-height: 40px;
a {
color: #fff;
margin-right: 25px; // 增加右边距
}
}
}
.el-dropdown {
z-index: 1001;
}
p {
position: absolute;
width: 100%;
height: 100%;
text-align: right;
line-height: 40px;
a {
color: #fff;
margin-right: 25px; // 增加右边距
}
}
}
</style>

118
frontend/src/layouts/components/Main/index.vue
View File

@@ -1,83 +1,81 @@
<template>
<Maximize v-show="maximize" />
<Tabs v-if="tabs && showMenuFlag" />
<el-main>
<router-view v-slot="{ Component, route }" style="height:100%;">
<!-- {{ keepAliveName}} -->
<!-- <transition name="slide-right" mode="out-in"> -->
<keep-alive :include="tabsMenuList" >
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<!-- </transition> -->
</router-view>
</el-main>
<el-footer>
<Footer />
</el-footer>
<Maximize v-show="maximize" />
<Tabs v-if="tabs && showMenuFlag" />
<el-main>
<router-view v-slot="{ Component, route }" style="height: 100%">
<!-- {{ keepAliveName}} -->
<!-- <transition name="slide-right" mode="out-in"> -->
<keep-alive :include="tabsMenuList">
<component :is="Component" :key="route.fullPath" />
</keep-alive>
<!-- </transition> -->
</router-view>
</el-main>
<el-footer>
<Footer />
</el-footer>
</template>
<script setup lang="ts">
import { ref, onBeforeUnmount, provide, watch, computed } from "vue";
import { storeToRefs } from "pinia";
import { useDebounceFn } from "@vueuse/core";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import Maximize from "./components/Maximize.vue";
import Tabs from "@/layouts/components/Tabs/index.vue";
import Footer from "@/layouts/components/Footer/index.vue";
import { useAuthStore } from "@/stores/modules/auth";
import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
import { storeToRefs } from 'pinia'
import { useDebounceFn } from '@vueuse/core'
import { useGlobalStore } from '@/stores/modules/global'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import Maximize from './components/Maximize.vue'
import Tabs from '@/layouts/components/Tabs/index.vue'
import Footer from '@/layouts/components/Footer/index.vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useTabsStore } from '@/stores/modules/tabs'
const tabStore = useTabsStore()
const globalStore = useGlobalStore();
const globalStore = useGlobalStore()
const tabsMenuList = computed(() => tabStore.tabsMenuList.map(item => item.name))
const authStore = useAuthStore();
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore);
const keepAliveStore = useKeepAliveStore();
const { keepAliveName } = storeToRefs(keepAliveStore);
const authStore = useAuthStore()
const { maximize, isCollapse, layout, tabs, footer } = storeToRefs(globalStore)
const keepAliveStore = useKeepAliveStore()
const { keepAliveName } = storeToRefs(keepAliveStore)
//是否显示导航栏
const showMenuFlag = computed(() => authStore.showMenuFlagGet);
const showMenuFlag = computed(() => authStore.showMenuFlagGet)
// 注入刷新页面方法
const isRouterShow = ref(true);
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val);
provide("refresh", refreshCurrentPage);
const isRouterShow = ref(true)
const refreshCurrentPage = (val: boolean) => (isRouterShow.value = val)
provide('refresh', refreshCurrentPage)
// 监听当前页面是否最大化，动态添加 class
watch(
() => maximize.value,
() => {
const app = document.getElementById("app") as HTMLElement;
if (maximize.value) app.classList.add("main-maximize");
else app.classList.remove("main-maximize");
},
{ immediate: true }
);
() => maximize.value,
() => {
const app = document.getElementById('app') as HTMLElement
if (maximize.value) app.classList.add('main-maximize')
else app.classList.remove('main-maximize')
},
{ immediate: true }
)
// 监听布局变化，在 body 上添加相对应的 layout class
watch(
() => layout.value,
() => {
const body = document.body as HTMLElement;
body.setAttribute("class", layout.value);
},
{ immediate: true }
);
() => layout.value,
() => {
const body = document.body as HTMLElement
body.setAttribute('class', layout.value)
},
{ immediate: true }
)
// 监听窗口大小变化，折叠侧边栏
const screenWidth = ref(0);
const screenWidth = ref(0)
const listeningWindow = useDebounceFn(() => {
screenWidth.value = document.body.clientWidth;
if (!isCollapse.value && screenWidth.value < 1200)
globalStore.setGlobalState("isCollapse", true);
if (isCollapse.value && screenWidth.value > 1200)
globalStore.setGlobalState("isCollapse", false);
}, 100);
window.addEventListener("resize", listeningWindow, false);
screenWidth.value = document.body.clientWidth
if (!isCollapse.value && screenWidth.value < 1200) globalStore.setGlobalState('isCollapse', true)
if (isCollapse.value && screenWidth.value > 1200) globalStore.setGlobalState('isCollapse', false)
}, 100)
window.addEventListener('resize', listeningWindow, false)
onBeforeUnmount(() => {
window.removeEventListener("resize", listeningWindow);
});
window.removeEventListener('resize', listeningWindow)
})
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

127
frontend/src/layouts/components/Tabs/components/MoreButton.vue
View File

@@ -1,81 +1,88 @@
<template>
<el-dropdown trigger="click" :teleported="false">
<div class="more-button">
<i :class="'iconfont icon-xiala'"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refresh">
<el-icon><Refresh /></el-icon>{{ $t("tabs.refresh") }}
</el-dropdown-item>
<el-dropdown-item @click="maximize">
<el-icon><FullScreen /></el-icon>{{ $t("tabs.maximize") }}
</el-dropdown-item>
<el-dropdown-item divided @click="closeCurrentTab">
<el-icon><Remove /></el-icon>{{ $t("tabs.closeCurrent") }}
</el-dropdown-item>
<el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
<el-icon><DArrowLeft /></el-icon>{{ $t("tabs.closeLeft") }}
</el-dropdown-item>
<el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
<el-icon><DArrowRight /></el-icon>{{ $t("tabs.closeRight") }}
</el-dropdown-item>
<el-dropdown-item divided @click="tabStore.closeMultipleTab(route.fullPath)">
<el-icon><CircleClose /></el-icon>{{ $t("tabs.closeOther") }}
</el-dropdown-item>
<el-dropdown-item @click="closeAllTab">
<el-icon><FolderDelete /></el-icon>{{ $t("tabs.closeAll") }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<el-dropdown trigger="click" :teleported="false">
<div class="more-button">
<i :class="'iconfont icon-xiala'"></i>
</div>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="refresh">
<el-icon><Refresh /></el-icon>
{{ $t('tabs.refresh') }}
</el-dropdown-item>
<el-dropdown-item @click="maximize">
<el-icon><FullScreen /></el-icon>
{{ $t('tabs.maximize') }}
</el-dropdown-item>
<el-dropdown-item divided @click="closeCurrentTab">
<el-icon><Remove /></el-icon>
{{ $t('tabs.closeCurrent') }}
</el-dropdown-item>
<el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'left')">
<el-icon><DArrowLeft /></el-icon>
{{ $t('tabs.closeLeft') }}
</el-dropdown-item>
<el-dropdown-item @click="tabStore.closeTabsOnSide(route.fullPath, 'right')">
<el-icon><DArrowRight /></el-icon>
{{ $t('tabs.closeRight') }}
</el-dropdown-item>
<el-dropdown-item divided @click="tabStore.closeMultipleTab(route.fullPath)">
<el-icon><CircleClose /></el-icon>
{{ $t('tabs.closeOther') }}
</el-dropdown-item>
<el-dropdown-item @click="closeAllTab">
<el-icon><FolderDelete /></el-icon>
{{ $t('tabs.closeAll') }}
</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</template>
<script setup lang="ts">
import { inject, nextTick } from "vue";
import { HOME_URL } from "@/config";
import { useTabsStore } from "@/stores/modules/tabs";
import { useGlobalStore } from "@/stores/modules/global";
import { useKeepAliveStore } from "@/stores/modules/keepAlive";
import { useRoute, useRouter } from "vue-router";
import { inject, nextTick } from 'vue'
import { HOME_URL } from '@/config'
import { useTabsStore } from '@/stores/modules/tabs'
import { useGlobalStore } from '@/stores/modules/global'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute();
const router = useRouter();
const tabStore = useTabsStore();
const globalStore = useGlobalStore();
const keepAliveStore = useKeepAliveStore();
const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const globalStore = useGlobalStore()
const keepAliveStore = useKeepAliveStore()
// refresh current page
const refreshCurrentPage: Function = inject("refresh") as Function;
const refreshCurrentPage: Function = inject('refresh') as Function
const refresh = () => {
setTimeout(() => {
keepAliveStore.removeKeepAliveName(route.name as string);
refreshCurrentPage(false);
nextTick(() => {
keepAliveStore.addKeepAliveName(route.name as string);
refreshCurrentPage(true);
});
}, 0);
};
setTimeout(() => {
keepAliveStore.removeKeepAliveName(route.name as string)
refreshCurrentPage(false)
nextTick(() => {
keepAliveStore.addKeepAliveName(route.name as string)
refreshCurrentPage(true)
})
}, 0)
}
// maximize current page
const maximize = () => {
globalStore.setGlobalState("maximize", true);
};
globalStore.setGlobalState('maximize', true)
}
// Close Current
const closeCurrentTab = () => {
if (route.meta.isAffix) return;
tabStore.removeTabs(route.fullPath);
};
if (route.meta.isAffix) return
tabStore.removeTabs(route.fullPath)
}
// Close All
const closeAllTab = () => {
tabStore.closeMultipleTab();
router.push(HOME_URL);
};
tabStore.closeMultipleTab()
router.push(HOME_URL)
}
</script>
<style scoped lang="scss">
@import "../index.scss";
@use '../index.scss';
</style>

8
frontend/src/layouts/components/Tabs/index.vue
View File

@@ -24,12 +24,12 @@
<script setup lang="ts">
import Sortable from 'sortablejs'
import { ref, computed, watch, onMounted } from 'vue'
import { computed, onMounted, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useGlobalStore } from '@/stores/modules/global'
import { useTabsStore } from '@/stores/modules/tabs'
import { useAuthStore } from '@/stores/modules/auth'
import { TabsPaneContext, TabPaneName } from 'element-plus'
import { TabPaneName, TabsPaneContext } from 'element-plus'
import MoreButton from './components/MoreButton.vue'
const route = useRoute()
@@ -110,12 +110,10 @@ const tabClick = (tabItem: TabsPaneContext) => {
// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
}
</script>
<style scoped lang="scss">
@import './index.scss';
@use './index.scss';
</style>

336
frontend/src/layouts/components/ThemeDrawer/index.vue
View File

@@ -1,186 +1,198 @@
<template>
<el-drawer v-model="drawerVisible" title="布局设置" size="290px">
<!-- 布局样式 -->
<el-divider class="divider" content-position="center">
<el-icon><Notification /></el-icon>
布局样式
</el-divider>
<div class="layout-box">
<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
<div :class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]" @click="setLayout('vertical')">
<div class="layout-dark"></div>
<div class="layout-container">
<div class="layout-light"></div>
<div class="layout-content"></div>
</div>
<el-icon v-if="layout == 'vertical'">
<CircleCheckFilled />
</el-icon>
<el-drawer v-model="drawerVisible" title="布局设置" size="290px">
<!-- 布局样式 -->
<el-divider class="divider" content-position="center">
<el-icon><Notification /></el-icon>
布局样式
</el-divider>
<div class="layout-box">
<el-tooltip effect="dark" content="纵向" placement="top" :show-after="200">
<div
:class="['layout-item layout-vertical', { 'is-active': layout == 'vertical' }]"
@click="setLayout('vertical')"
>
<div class="layout-dark"></div>
<div class="layout-container">
<div class="layout-light"></div>
<div class="layout-content"></div>
</div>
<el-icon v-if="layout == 'vertical'">
<CircleCheckFilled />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
<div
:class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]"
@click="setLayout('classic')"
>
<div class="layout-dark"></div>
<div class="layout-container">
<div class="layout-light"></div>
<div class="layout-content"></div>
</div>
<el-icon v-if="layout == 'classic'">
<CircleCheckFilled />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
<div
:class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]"
@click="setLayout('transverse')"
>
<div class="layout-dark"></div>
<div class="layout-content"></div>
<el-icon v-if="layout == 'transverse'">
<CircleCheckFilled />
</el-icon>
</div>
</el-tooltip>
<el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
<div
:class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]"
@click="setLayout('columns')"
>
<div class="layout-dark"></div>
<div class="layout-light"></div>
<div class="layout-content"></div>
<el-icon v-if="layout == 'columns'">
<CircleCheckFilled />
</el-icon>
</div>
</el-tooltip>
</div>
</el-tooltip>
<el-tooltip effect="dark" content="经典" placement="top" :show-after="200">
<div :class="['layout-item layout-classic', { 'is-active': layout == 'classic' }]" @click="setLayout('classic')">
<div class="layout-dark"></div>
<div class="layout-container">
<div class="layout-light"></div>
<div class="layout-content"></div>
</div>
<el-icon v-if="layout == 'classic'">
<CircleCheckFilled />
</el-icon>
<div class="theme-item">
<span>
侧边栏反转色
<el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</span>
<el-switch v-model="asideInverted" @change="setAsideTheme" />
</div>
</el-tooltip>
<el-tooltip effect="dark" content="横向" placement="top" :show-after="200">
<div :class="['layout-item layout-transverse', { 'is-active': layout == 'transverse' }]" @click="setLayout('transverse')">
<div class="layout-dark"></div>
<div class="layout-content"></div>
<el-icon v-if="layout == 'transverse'">
<CircleCheckFilled />
</el-icon>
<div class="theme-item mb50">
<span>
头部反转色
<el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</span>
<el-switch v-model="headerInverted" @change="setHeaderTheme" />
</div>
</el-tooltip>
<el-tooltip effect="dark" content="分栏" placement="top" :show-after="200">
<div :class="['layout-item layout-columns', { 'is-active': layout == 'columns' }]" @click="setLayout('columns')">
<div class="layout-dark"></div>
<div class="layout-light"></div>
<div class="layout-content"></div>
<el-icon v-if="layout == 'columns'">
<CircleCheckFilled />
</el-icon>
</div>
</el-tooltip>
</div>
<div class="theme-item">
<span>
侧边栏反转色
<el-tooltip effect="dark" content="侧边栏颜色变为深色模式" placement="top">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</span>
<el-switch v-model="asideInverted" @change="setAsideTheme" />
</div>
<div class="theme-item mb50">
<span>
头部反转色
<el-tooltip effect="dark" content="头部颜色变为深色模式" placement="top">
<el-icon><QuestionFilled /></el-icon>
</el-tooltip>
</span>
<el-switch v-model="headerInverted" @change="setHeaderTheme" />
</div>
<!-- 全局主题 -->
<el-divider class="divider" content-position="center">
<el-icon><ColdDrink /></el-icon>
全局主题
</el-divider>
<div class="theme-item">
<span>主题颜色</span>
<el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
</div>
<div class="theme-item">
<span>暗黑模式</span>
<SwitchDark />
</div>
<div class="theme-item">
<span>灰色模式</span>
<el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
</div>
<div class="theme-item mb40">
<span>色弱模式</span>
<el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
</div>
<!-- 全局主题 -->
<el-divider class="divider" content-position="center">
<el-icon><ColdDrink /></el-icon>
全局主题
</el-divider>
<div class="theme-item">
<span>主题颜色</span>
<el-color-picker v-model="primary" :predefine="colorList" @change="changePrimary" />
</div>
<div class="theme-item">
<span>暗黑模式</span>
<SwitchDark />
</div>
<div class="theme-item">
<span>灰色模式</span>
<el-switch v-model="isGrey" @change="changeGreyOrWeak('grey', !!$event)" />
</div>
<div class="theme-item mb40">
<span>色弱模式</span>
<el-switch v-model="isWeak" @change="changeGreyOrWeak('weak', !!$event)" />
</div>
<!-- 界面设置 -->
<el-divider class="divider" content-position="center">
<el-icon><Setting /></el-icon>
界面设置
</el-divider>
<div class="theme-item">
<span>菜单折叠</span>
<el-switch v-model="isCollapse" />
</div>
<div class="theme-item">
<span>菜单手风琴</span>
<el-switch v-model="accordion" />
</div>
<div class="theme-item">
<span>面包屑</span>
<el-switch v-model="breadcrumb" />
</div>
<div class="theme-item">
<span>面包屑图标</span>
<el-switch v-model="breadcrumbIcon" />
</div>
<div class="theme-item">
<span>标签栏</span>
<el-switch v-model="tabs" />
</div>
<div class="theme-item">
<span>标签栏图标</span>
<el-switch v-model="tabsIcon" />
</div>
<div class="theme-item">
<span>页脚</span>
<el-switch v-model="footer" />
</div>
</el-drawer>
<!-- 界面设置 -->
<el-divider class="divider" content-position="center">
<el-icon><Setting /></el-icon>
界面设置
</el-divider>
<div class="theme-item">
<span>菜单折叠</span>
<el-switch v-model="isCollapse" />
</div>
<div class="theme-item">
<span>菜单手风琴</span>
<el-switch v-model="accordion" />
</div>
<div class="theme-item">
<span>面包屑</span>
<el-switch v-model="breadcrumb" />
</div>
<div class="theme-item">
<span>面包屑图标</span>
<el-switch v-model="breadcrumbIcon" />
</div>
<div class="theme-item">
<span>标签栏</span>
<el-switch v-model="tabs" />
</div>
<div class="theme-item">
<span>标签栏图标</span>
<el-switch v-model="tabsIcon" />
</div>
<div class="theme-item">
<span>页脚</span>
<el-switch v-model="footer" />
</div>
</el-drawer>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { storeToRefs } from "pinia";
import { useTheme } from "@/hooks/useTheme";
import { useGlobalStore } from "@/stores/modules/global";
import { LayoutType } from "@/stores/interface";
import { DEFAULT_PRIMARY } from "@/config";
import mittBus from "@/utils/mittBus";
import SwitchDark from "@/components/SwitchDark/index.vue";
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useTheme } from '@/hooks/useTheme'
import { useGlobalStore } from '@/stores/modules/global'
import { LayoutType } from '@/stores/interface'
import { DEFAULT_PRIMARY } from '@/config'
import mittBus from '@/utils/mittBus'
import SwitchDark from '@/components/SwitchDark/index.vue'
const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme();
const { changePrimary, changeGreyOrWeak, setAsideTheme, setHeaderTheme } = useTheme()
const globalStore = useGlobalStore();
const globalStore = useGlobalStore()
const {
layout,
primary,
isGrey,
isWeak,
asideInverted,
headerInverted,
isCollapse,
accordion,
breadcrumb,
breadcrumbIcon,
tabs,
tabsIcon,
footer
} = storeToRefs(globalStore);
layout,
primary,
isGrey,
isWeak,
asideInverted,
headerInverted,
isCollapse,
accordion,
breadcrumb,
breadcrumbIcon,
tabs,
tabsIcon,
footer
} = storeToRefs(globalStore)
// 预定义主题颜色
const colorList = [
DEFAULT_PRIMARY,
"#daa96e",
"#0c819f",
"#409eff",
"#27ae60",
"#ff5c93",
"#e74c3c",
"#fd726d",
"#f39c12",
"#9b59b6"
];
DEFAULT_PRIMARY,
'#daa96e',
'#0c819f',
'#409eff',
'#27ae60',
'#ff5c93',
'#e74c3c',
'#fd726d',
'#f39c12',
'#9b59b6'
]
// 设置布局方式
const setLayout = (val: LayoutType) => {
globalStore.setGlobalState("layout", val);
setAsideTheme();
};
globalStore.setGlobalState('layout', val)
setAsideTheme()
}
// 打开主题设置
const drawerVisible = ref(false);
mittBus.on("openThemeDrawer", () => (drawerVisible.value = true));
const drawerVisible = ref(false)
mittBus.on('openThemeDrawer', () => (drawerVisible.value = true))
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

342
frontend/src/views/authority/resource/components/resourcePopup.vue
View File

@@ -1,222 +1,222 @@
<template>
<el-dialog :title="dialogTitle" :model-value="dialogVisible" @close="close" v-bind="dialogMiddle" align-center>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' class="form-two">
<el-form-item label="上级菜单" prop="pid" :label-width="100">
<el-tree-select
v-model="displayPid"
:data="functionList"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="名称" prop="name" :label-width="100">
<el-input v-model="formContent.name" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="编码" prop="code" :label-width="100">
<el-input v-model="formContent.code" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item v-if="!formContent.type" label="图标" prop="icon" :label-width="100">
<IconSelect
v-model="formContent.icon"
:iconValue="formContent.icon"
@update:icon-value="iconValue => formContent.icon = iconValue"
placeholder="选择一个图标"
/>
</el-form-item>
<el-form-item v-if="!formContent.type" label="路由地址" prop="path" :label-width="100" >
<el-input v-model="formContent.path" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item v-if="!formContent.type" label="组件地址" prop="component" :label-width="100">
<el-input v-model="formContent.component" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="排序" prop="sort" :label-width="100">
<el-input-number v-model="formContent.sort" :min='1' :max='999' />
</el-form-item>
<el-form-item label='类型' prop='type' :label-width="100">
<el-select v-model="formContent.type" clearable placeholder="请选择资源类型">
<el-option label="菜单" :value="0"></el-option>
<el-option label="按钮" :value="1"></el-option>
<!-- <el-option label="公共资源" :value="2"></el-option>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules" class="form-two">
<el-form-item label="上级菜单" prop="pid" :label-width="100">
<el-tree-select
v-model="displayPid"
:data="functionList"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="名称" prop="name" :label-width="100">
<el-input v-model="formContent.name" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="编码" prop="code" :label-width="100">
<el-input v-model="formContent.code" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item v-if="!formContent.type" label="图标" prop="icon" :label-width="100">
<IconSelect
v-model="formContent.icon"
:iconValue="formContent.icon"
@update:icon-value="iconValue => (formContent.icon = iconValue)"
placeholder="选择一个图标"
/>
</el-form-item>
<el-form-item v-if="!formContent.type" label="路由地址" prop="path" :label-width="100">
<el-input v-model="formContent.path" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item v-if="!formContent.type" label="组件地址" prop="component" :label-width="100">
<el-input v-model="formContent.component" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="排序" prop="sort" :label-width="100">
<el-input-number v-model="formContent.sort" :min="1" :max="999" />
</el-form-item>
<el-form-item label="类型" prop="type" :label-width="100">
<el-select v-model="formContent.type" clearable placeholder="请选择资源类型">
<el-option label="菜单" :value="0"></el-option>
<el-option label="按钮" :value="1"></el-option>
<!-- <el-option label="公共资源" :value="2"></el-option>
<el-option label="服务间调用资源" :value="3"></el-option> -->
</el-select>
</el-form-item>
<el-form-item label="描述" prop="remark" :label-width="100">
<el-input v-model="formContent.remark" :rows="2" type="textarea"/>
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">确 定</el-button>
</div>
</template>
</el-select>
</el-form-item>
<el-form-item label="描述" prop="remark" :label-width="100">
<el-input v-model="formContent.remark" :rows="2" type="textarea" />
</el-form-item>
</el-form>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">确 定</el-button>
</div>
</template>
</el-dialog>
</template>
</template>
<script lang="ts" setup name="ResourceDialog">
import { defineProps, defineEmits,watch,ref, type Ref, computed } from 'vue';
import { dialogMiddle } from '@/utils/elementBind'
import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus'
import { useDictStore } from '@/stores/modules/dict'
import type { Function } from "@/api/user/interface/function"
import {addFunction,updateFunction,getFunctionListNoButton} from '@/api/user/function/index'
import IconSelect from '@/components/SelectIcon/index.vue'
const value = ref()
// 树形节点配置
const defaultProps = {
<script lang="ts" setup name="ResourceDialog">
import { computed, type Ref, ref, watch } from 'vue'
import { dialogMiddle } from '@/utils/elementBind'
import { ElMessage, type FormInstance, type FormItemRule } from 'element-plus'
import { useDictStore } from '@/stores/modules/dict'
import type { Function } from '@/api/user/interface/function'
import { addFunction, getFunctionListNoButton, updateFunction } from '@/api/user/function/index'
import IconSelect from '@/components/SelectIcon/index.vue'
const value = ref()
// 树形节点配置
const defaultProps = {
children: 'children',
label: 'name',
value: 'id'
};
const functionList = ref<Function.ResFunction[]>([])
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
function useMetaInfo() {
}
const functionList = ref<Function.ResFunction[]>([])
const dictStore = useDictStore()
// 定义弹出组件元信息
const dialogFormRef = ref()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<Function.ResFunction>({
id: '',//资源表Id
pid:'',//节点（0为根节点）
pids:'',//节点上层所有节点
name: '',//名称
code:'',//资源标识
path:'',//路径
component:'',
icon:undefined as string | undefined, // 图标
sort:100,//排序
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark: '',//权限资源描述
state:1,//权限资源状态
id: '', //资源表Id
pid: '', //节点（0为根节点）
pids: '', //节点上层所有节点
name: '', //名称
code: '', //资源标识
path: '', //路径
component: '',
icon: undefined as string | undefined, // 图标
sort: 100, //排序
type: 0, //资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark: '', //权限资源描述
state: 1 //权限资源状态
})
return { dialogVisible, titleType, formContent }
}
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',//资源表Id
pid:'',//节点（0为根节点）
pids:'',//节点上层所有节点
name: '',//名称
code:'',//资源标识
path:'',//路径
component:'',
icon:undefined,//图标
sort:100,//排序
type:0,//资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark:'',//权限资源描述
state:1,//权限资源状态
id: '', //资源表Id
pid: '', //节点（0为根节点）
pids: '', //节点上层所有节点
name: '', //名称
code: '', //资源标识
path: '', //路径
component: '',
icon: undefined, //图标
sort: 100, //排序
type: 0, //资源类型0-菜单、1-按钮、2-公共资源、3-服务间调用资源
remark: '', //权限资源描述
state: 1 //权限资源状态
}
}
}
let dialogTitle = computed(() => {
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增菜单' : '编辑菜单'
})
})
// 定义规则
const formRuleRef = ref<FormInstance>()
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, trigger: 'blur', message: '菜单名称必填!' }],
code: [{ required: true, trigger: 'blur', message: '编码必填!' }]
})
watch(
() => formContent.value.type,
newVal => {
if (newVal === 1) {
// 选择按钮时，路由地址和组件地址无需校验
rules.value.path = []
rules.value.component = []
} else {
// 其他情况下，路由地址和组件地址需要校验
rules.value.path = [{ required: true, trigger: 'blur', message: '路由地址必填!' }]
rules.value.component = [{ required: true, trigger: 'blur', message: '组件地址必填!' }]
}
}
)
// 定义规则
const formRuleRef = ref<FormInstance>()
const rules : Ref<Record<string, Array<FormItemRule>>> = ref({
name :[{required:true,trigger:'blur',message:'菜单名称必填!'}],
code :[{required:true,trigger:'blur',message:'编码必填!'}]
})
watch(() => formContent.value.type, (newVal) => {
if (newVal === 1) {
// 选择按钮时，路由地址和组件地址无需校验
rules.value.path = [];
rules.value.component = [];
} else {
// 其他情况下，路由地址和组件地址需要校验
rules.value.path = [{ required: true, trigger: 'blur', message: '路由地址必填!' }];
rules.value.component = [{ required: true, trigger: 'blur', message: '组件地址必填!' }];
}
});
// 关闭弹窗
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
}
// 计算属性，用于控制显示的 pid
const displayPid = computed({
get: () => {
return formContent.value.pid === '0' ? '' : formContent.value.pid;
},
set: (value) => {
formContent.value.pid = value;
}
});
get: () => {
return formContent.value.pid === '0' ? '' : formContent.value.pid
},
set: value => {
formContent.value.pid = value
}
})
// 保存数据
const save = () => {
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (formContent.value.pid === undefined || formContent.value.pid === null || formContent.value.pid === '') {
formContent.value.pid = '0';
}
if (formContent.value.pids === undefined || formContent.value.pids === null || formContent.value.pids === '') {
formContent.value.pids = '0';
}
if (valid) {
if (formContent.value.id) {
await updateFunction(formContent.value);
} else {
await addFunction(formContent.value);
}
ElMessage.success({ message: `${dialogTitle.value}成功！` })
close()
// 刷新表格
await props.refreshTable!()
}
})
if (formContent.value.pid === undefined || formContent.value.pid === null || formContent.value.pid === '') {
formContent.value.pid = '0'
}
if (
formContent.value.pids === undefined ||
formContent.value.pids === null ||
formContent.value.pids === ''
) {
formContent.value.pids = '0'
}
if (valid) {
if (formContent.value.id) {
await updateFunction(formContent.value)
} else {
await addFunction(formContent.value)
}
ElMessage.success({ message: `${dialogTitle.value}成功！` })
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
console.error('验证过程中出现错误', err)
}
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Function.ResFunction) => {
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: Function.ResFunction) => {
// 重置表单
dialogFormRef.value?.resetFields()
const response = await getFunctionListNoButton()
functionList.value = response.data as unknown as Function.ResFunction[]
titleType.value = sign
dialogVisible.value = true
rules.value.path = [{ required: true, trigger: 'blur', message: '路由地址必填!' }];
rules.value.component = [{ required: true, trigger: 'blur', message: '组件地址必填!' }];
rules.value.path = [{ required: true, trigger: 'blur', message: '路由地址必填!' }]
rules.value.component = [{ required: true, trigger: 'blur', message: '组件地址必填!' }]
if (formContent.value.pid ==='0') {
formContent.value.pid = '';
if (formContent.value.pid === '0') {
formContent.value.pid = ''
}
if (data.id) {
formContent.value = { ...data }
formContent.value = { ...data }
} else {
resetFormContent()
resetFormContent()
}
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
}>()
</script>
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined
}>()
</script>

490
frontend/src/views/home/components/channelsTestTable.vue
View File

@@ -1,348 +1,386 @@
<template>
<div class="table-container table-main">
<el-table :data="tableData"
:header-cell-style="{ textAlign: 'center' } "
<div class="table-container table-main">
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
max-height="400px"
:span-method="objectSpanMethod">
<el-table-column prop="monitorNum" label="监测点序号" width="80"/>
<el-table-column prop="desc" label="描述" width="90"/>
<el-table-column label="电压通道" >
<el-table-column prop="Ua" label="A相">
<el-table-column prop="aVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.aVuData === '—'&& scope.row.loading" class="loading-box">
:span-method="objectSpanMethod"
>
<el-table-column prop="monitorNum" label="监测点序号" width="80" />
<el-table-column prop="desc" label="描述" width="90" />
<el-table-column label="电压通道">
<el-table-column prop="Ua" label="A相">
<el-table-column prop="aVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.aVuData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.aVuData }}
</span>
</template>
</el-table-column>
<el-table-column prop="aVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="aVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.aVuXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4)+ 'V'}}<br/>
误差值：{{ scope.row.aV + 'V'}}
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.aV + 'V' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.aVuXi }}
{{ scope.row.aVuXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.aVuXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4)+ 'V'}}<br/>
误差值：{{ scope.row.aV + 'V'}}
>
<template #content>
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.aV + 'V' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.aVuXi }}</el-tag>
</el-tooltip>
<!-- <el-tag type="danger" v-if="scope.row.aVuXi === '不合格'">
</el-tooltip>
<!-- <el-tag type="danger" v-if="scope.row.aVuXi === '不合格'">
{{ scope.row.aVuXi }}
</el-tag> -->
<el-icon v-else-if="scope.row.aVuXi === '—'&& scope.row.loading" class="loading-box">
<el-icon v-else-if="scope.row.aVuXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<!-- <span v-else>
</el-icon>
<!-- <span v-else>
{{ scope.row.aVuXi }}
</span> -->
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ub" label="B相">
<el-table-column prop="bVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.bVuData === '—'&& scope.row.loading" class="loading-box">
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ub" label="B相">
<el-table-column prop="bVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.bVuData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.bVuData }}
</span>
</template>
</el-table-column>
<el-table-column prop="bVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="bVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.bVuXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4)+ 'V'}}<br/>
误差值：{{ scope.row.bV + 'V'}}
>
<template #content>
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.bV + 'V' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.bVuXi }}
{{ scope.row.bVuXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.bVuXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4)+ 'V'}}<br/>
误差值：{{ scope.row.bV + 'V'}}
>
<template #content>
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.bV + 'V' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.bVuXi }}</el-tag>
</el-tooltip>
<el-icon v-else-if="scope.row.bVuXi === '—'&& scope.row.loading" class="loading-box">
</el-tooltip>
<el-icon v-else-if="scope.row.bVuXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Uc" label="C相">
<el-table-column prop="cVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.cVuData === '—'&& scope.row.loading" class="loading-box">
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Uc" label="C相">
<el-table-column prop="cVuData" label="被检值(V)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.cVuData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.cVuData }}
</span>
</template>
</el-table-column>
<el-table-column prop="cVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="cVuXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.cVuXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4)+ 'V'}}<br/>
误差值：{{ scope.row.cV + 'V'}}
>
<template #content>
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.cV + 'V' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.cVuXi }}
{{ scope.row.cVuXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.cVuXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ (-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'}}<br/>
误差值：{{ scope.row.cV + 'V'}}
>
<template #content>
误差范围：
{{
(-0.001 * props.curV).toFixed(4) + 'V~' + (0.001 * props.curV).toFixed(4) + 'V'
}}
<br />
误差值：{{ scope.row.cV + 'V' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.cVuXi }}</el-tag>
</el-tooltip>
<el-icon v-else-if="scope.row.cVuXi === '—'&& scope.row.loading" class="loading-box">
</el-tooltip>
<el-icon v-else-if="scope.row.cVuXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
</template>
</el-table-column>
</el-table-column>
</el-icon>
</template>
</el-table-column>
<el-table-column label="电流通道" >
<el-table-column prop="Ia" label="A相">
<el-table-column prop="aIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.aIeData === '—'&& scope.row.loading" class="loading-box">
</el-table-column>
</el-table-column>
<el-table-column label="电流通道">
<el-table-column prop="Ia" label="A相">
<el-table-column prop="aIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.aIeData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.aIeData }}
</span>
</template>
</el-table-column>
<el-table-column prop="aIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="aIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.aIeXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{-0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.aI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.aI + '%' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.aIeXi }}
{{ scope.row.aIeXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.aIeXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ -0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.aI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.aI + '%' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.aIeXi }}</el-tag>
</el-tooltip>
<el-icon v-else-if="scope.row.aIeXi === '—'&& scope.row.loading" class="loading-box">
</el-tooltip>
<el-icon v-else-if="scope.row.aIeXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ib" label="B相">
<el-table-column prop="bIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.bIeData === '—'&& scope.row.loading" class="loading-box">
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ib" label="B相">
<el-table-column prop="bIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.bIeData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.bIeData }}
</span>
</template>
</el-table-column>
<el-table-column prop="bIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="bIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.bIeXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ -0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.bI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.bI + '%' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.bIeXi }}
{{ scope.row.bIeXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.bIeXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ -0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.bI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.bI + '%' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.bIeXi }}</el-tag>
</el-tooltip>
<el-icon v-else-if="scope.row.bIeXi === '—'&& scope.row.loading" class="loading-box">
</el-tooltip>
<el-icon v-else-if="scope.row.bIeXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ic" label="C相">
<el-table-column prop="cIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.cIeData === '—'&& scope.row.loading" class="loading-box">
</el-icon>
</template>
</el-table-column>
</el-table-column>
<el-table-column prop="Ic" label="C相">
<el-table-column prop="cIeData" label="被检值(A)" width="100px">
<template #default="scope">
<el-icon v-if="scope.row.cIeData === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
<span v-else>
</el-icon>
<span v-else>
{{ scope.row.cIeData }}
</span>
</template>
</el-table-column>
<el-table-column prop="cIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
</span>
</template>
</el-table-column>
<el-table-column prop="cIeXi" label="检测结果" width="90px">
<template #default="scope">
<el-tooltip
v-if="scope.row.cIeXi === '不合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ -0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.cI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.cI + '%' }}
</template>
<el-tag type="danger" class="tooltip-content">
{{ scope.row.cIeXi }}
{{ scope.row.cIeXi }}
</el-tag>
</el-tooltip>
<el-tooltip
</el-tooltip>
<el-tooltip
v-else-if="scope.row.cIeXi === '合格'"
class="item"
effect="dark"
placement="bottom-start"
>
<template #content>
误差范围： {{ -0.5 + "%~" +0.5 + "%" }}<br/>
误差值：{{ scope.row.cI + '%'}}
>
<template #content>
误差范围： {{ -0.5 + '%~' + 0.5 + '%' }}
<br />
误差值：{{ scope.row.cI + '%' }}
</template>
<el-tag type="success" class="tooltip-content">{{ scope.row.cIeXi }}</el-tag>
</el-tooltip>
<el-icon v-else-if="scope.row.cIeXi === '—'&& scope.row.loading" class="loading-box">
</el-tooltip>
<el-icon v-else-if="scope.row.cIeXi === '—' && scope.row.loading" class="loading-box">
<el-icon-loading />
</el-icon>
</template>
</el-table-column>
</el-table-column>
</el-icon>
</template>
</el-table-column>
</el-table>
</div>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import { defineProps, type PropType } from 'vue';
import { ElIcon, ElLoading, ElTag } from 'element-plus';
import type { ChannelsTest } from '@/api/home/interface/channelsTest';
import { number } from 'echarts';
<script lang="ts" setup name="ErrorSystemDialog">
import { ElIcon, ElTag } from 'element-plus'
import type { ChannelsTest } from '@/api/home/interface/channelsTest'
interface Props {
tableData: ChannelsTest.CoefficientVO[];
big_V_loading: boolean;
curV: number;
tableData: ChannelsTest.CoefficientVO[]
big_V_loading: boolean
curV: number
}
const props = withDefaults(defineProps<Props>(), {
tableData: () => [],
big_V_loading: false,
curV: 0,
});
tableData: () => [],
big_V_loading: false,
curV: 0
})
function objectSpanMethod({ row, column, rowIndex, columnIndex }: { row: any, column: any, rowIndex: number, columnIndex: number }) {
function objectSpanMethod({
row,
column,
rowIndex,
columnIndex
}: {
row: any
column: any
rowIndex: number
columnIndex: number
}) {
if (columnIndex === 0) {
if (rowIndex % 4 === 0) {
return {
rowspan: 4,
colspan: 1,
};
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0,
};
colspan: 0
}
}
}
if (columnIndex === 1) {
if (rowIndex % 2 === 0) {
return {
rowspan: 2,
colspan: 1,
};
colspan: 1
}
} else {
return {
rowspan: 0,
colspan: 0,
};
colspan: 0
}
}
}
}
</script>
</script>
<style scoped>
<style scoped>
.form-grid {
display: flex;
flex-direction: row; /* 横向排列 */
@@ -364,40 +402,40 @@ const props = withDefaults(defineProps<Props>(), {
margin-bottom: 20px; /* 添加底部边距 */
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
.el-table th,
.el-table td {
text-align: center; /* 所有单元格文字居中 */
}
.table-container {
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
}
/* 确保 el-icon-loading 的动画效果没有被覆盖 */
.loading-box {
animation: rotate 2s linear infinite;
animation: rotate 2s linear infinite;
}
.icon-margin {
margin-left: 0px;
margin-left: 0px;
}
.icon-align {
vertical-align: 0px;
vertical-align: 0px;
}
.tooltip-content {
cursor: pointer;
cursor: pointer;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>

163
frontend/src/views/home/components/compareDataCheckSingleChannelSingleTestPopup.vue
View File

@@ -18,7 +18,7 @@
v-model="formContent.errorSysId"
placeholder="请选择误差体系"
autocomplete="off"
@change="handleErrorSysChange"
@change="handleErrorSysChange"
>
<el-option
v-for="option in pqErrorList"
@@ -39,8 +39,13 @@
<el-option v-for="item in chnList" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
<el-form-item label="检测次数" >
<el-select v-model="formContent.num" clearable @change="handleNumChange" :disabled="sourceKey == 1">
<el-form-item label="检测次数">
<el-select
v-model="formContent.num"
clearable
@change="handleNumChange"
:disabled="sourceKey == 1"
>
<el-option
v-for="item in chnMapList[formContent.chnNum]"
:key="item"
@@ -67,12 +72,10 @@
node-key="id"
ref="treeRef"
@node-click="handleNodeClick"
>
</el-tree>
></el-tree>
</div>
<div class="content-right">
<div class="content-right-title">
<div class="content-right-title">
<div style="width: 840px">
<span class="content-right-title-text">当前检测项目：</span>
<!-- 当code为'wave_data'时显示下拉框 -->
@@ -93,17 +96,19 @@
<span v-else style="color: var(--el-color-primary)">{{ rowList.scriptName }}</span>
</div>
<el-form-item
style="margin: 0 auto; margin-bottom: 0px !important; width: 200px; position: absolute; left: 50%; transform: translateX(-50%);"
style="
margin: 0 auto;
margin-bottom: 0px !important;
width: 200px;
position: absolute;
left: 50%;
transform: translateX(-50%);
"
label="录波次数"
v-if="isWaveData"
>
<el-select v-model="waveNumber" @change="handleWaveNumberChange">
<el-option
v-for="i in waveNumCount"
:key="i"
:label="i"
:value="i"
/>
<el-select v-model="waveNumber" @change="handleWaveNumberChange">
<el-option v-for="i in waveNumCount" :key="i" :label="i" :value="i" />
</el-select>
</el-form-item>
<el-form-item
@@ -128,7 +133,6 @@
:currentCheckItem="currentCheckItem"
:currentScriptTypeName="currentScriptTypeName"
v-if="activeTab === 'resultTab'"
/>
</el-tab-pane>
<el-tab-pane label="原始数据" name="rawDataTab">
@@ -148,7 +152,7 @@
</template>
<script setup lang="ts">
import { dialogBig } from '@/utils/elementBind'
import { reactive, ref, watch, computed, nextTick } from 'vue'
import { computed, reactive, ref } from 'vue'
import CompareDataCheckResultTable from './compareDataCheckResultTable.vue'
import CompareDataCheckRawDataTable from './compareDataCheckRawDataTable.vue'
import { CheckData } from '@/api/check/interface'
@@ -157,16 +161,20 @@ import { Histogram, Postcard } from '@element-plus/icons-vue'
import { getPqErrSysList } from '@/api/plan/plan'
import { useModeStore } from '@/stores/modules/mode' // 引入模式 store
import { useDictStore } from '@/stores/modules/dict'
import { getContrastFormContent, getContrastResult, getScriptList,reCalculate ,changeErrorSystem,deleteTempTable} from '@/api/check/test'
import {
changeErrorSystem,
deleteTempTable,
getContrastFormContent,
getContrastResult,
getScriptList,
reCalculate
} from '@/api/check/test'
import { ElMessage } from 'element-plus'
import {ResultEnum} from "@/enums/httpEnum";
import { ResultEnum } from '@/enums/httpEnum'
const { appendToBody } = withDefaults(
defineProps<{
appendToBody: boolean
}>(),
{ appendToBody: true }
)
const { appendToBody = true } = defineProps<{
appendToBody: boolean
}>()
const checkStore = useCheckStore()
const modeStore = useModeStore()
@@ -192,7 +200,7 @@ const selectedScriptName = ref('')
const pattern = ref('')
// 添加以下内容
const isWaveData = ref(false)
const scriptNameOptions = ref<{label: string, value: string}[]>([])
const scriptNameOptions = ref<{ label: string; value: string }[]>([])
// 表单数据
const formContent = reactive<CheckData.DataCheck>({
@@ -230,10 +238,9 @@ const currentRawTableData = computed(() => {
return Array.isArray(data) ? data : []
})
const open = async (row: any, chnNum: string, deviceId: string | null, source: number) => {
isWaveData.value = false
pattern.value = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''//获取数据字典中对应的id
pattern.value = dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '' //获取数据字典中对应的id
rowList.value = {}
formContent.deviceId = deviceId || ''
formContent.chnNum = chnNum
@@ -241,12 +248,12 @@ const open = async (row: any, chnNum: string, deviceId: string | null, source: n
// 获取基本信息
await getBasicInformation(row.scriptType)
if (source == 1) {
// 正式检测进入页面 - 创建新的对象避免引用共享
// 正式检测进入页面 - 创建新的对象避免引用共享
rowList.value = {
scriptName: row.scriptName,
scriptType: row.scriptType,
// 复制其他需要的属性
devices: row.devices ? [...row.devices] : []
scriptName: row.scriptName,
scriptType: row.scriptType,
// 复制其他需要的属性
devices: row.devices ? [...row.devices] : []
}
}
// 检测数据查询进入---不区分检测数据查询和正式检测
@@ -261,13 +268,13 @@ const open = async (row: any, chnNum: string, deviceId: string | null, source: n
Object.assign(pqErrorList, resPqErrorList)
initGetResult()
}
const initGetResult = async () => {
// 判断是否为录波数据
const isLuoboData = (sourceKey.value == 1 && rowList.value.scriptName == "录波数据") ||
(sourceKey.value == 2 && scriptData.value[0]?.code == "wave_data");
const isLuoboData =
(sourceKey.value == 1 && rowList.value.scriptName == '录波数据') ||
(sourceKey.value == 2 && scriptData.value[0]?.code == 'wave_data')
if (isLuoboData) {
isWaveData.value = true
// 设置录波数据相关的选项
@@ -292,7 +299,6 @@ const initGetResult = async () => {
}
}
// 查询大项树
const initScriptData = async () => {
let response: any = await getScriptList({
@@ -313,11 +319,10 @@ const initScriptData = async () => {
scriptData.value = temp
// 查找code为"录波"的项
let luoboItem = response.data.find((item: any) => item.code === 'wave_data');
let luoboItem = response.data.find((item: any) => item.code === 'wave_data')
// 如果找到了"录波"项，则使用其subitems，否则使用空数组
let temp2 = [];
let temp2 = []
if (luoboItem && luoboItem.subItems) {
// 格式化脚本数据
temp2 = luoboItem.subItems.map((item: any) => {
return {
@@ -328,10 +333,8 @@ const initScriptData = async () => {
}
selectScript.value = temp2
// 只有在sourceKey == 2时才设置rowList和tree相关属性
if (sourceKey.value === 2 && temp.length > 0) {
rowList.value.scriptName = temp[0].scriptName
rowList.value.scriptType = temp[0].id
selectedScriptName.value = temp[0].scriptName
@@ -339,8 +342,6 @@ const initScriptData = async () => {
treeRef.value?.setCurrentKey(temp[0].id)
}, 0)
}
}
// 获取基本信息
@@ -349,13 +350,13 @@ const getBasicInformation = async (scriptType: any) => {
rawTableData.value = []
const scriptType2 = ref('')
if(sourceKey.value == 1){
if (sourceKey.value == 1) {
scriptType2.value = scriptType
}else{
} else {
scriptType2.value = ''
}
//确保scriptData已初始化
//确保scriptData已初始化
// if (scriptData.value.length === 0) {
// await initScriptData()
// }
@@ -389,8 +390,6 @@ const getBasicInformation = async (scriptType: any) => {
formContent.num = numList[numList.length - 1]
}
waveNumCount.value = res.data.waveNumTotal
} catch (error) {
console.error('获取基本信息失败:', error)
}
@@ -431,7 +430,7 @@ const handleCommonChange = async () => {
const tempNode = {
scriptName: rowList.value.scriptName,
id: rowList.value.scriptType,
code: rowList.value.scriptName === "录波数据" ? 'wave_data' : ''
code: rowList.value.scriptName === '录波数据' ? 'wave_data' : ''
}
handleNodeClick(tempNode)
}
@@ -464,7 +463,6 @@ const handleNodeClick = (data: any) => {
// 每次选中录波数据时都重置为第一个选项并触发getResults
if (scriptNameOptions.value.length > 0) {
selectedScriptName.value = scriptNameOptions.value[0].value
// 更新rowList并触发getResults
rowList.value.scriptName = selectedScriptName.value
@@ -476,7 +474,6 @@ const handleNodeClick = (data: any) => {
}
}
} else {
isWaveData.value = false
getResults(data.code)
}
@@ -495,8 +492,8 @@ const getResults = async (code: any) => {
deviceId: formContent.deviceId,
chnNum: formContent.chnNum,
num: formContent.num == '' ? null : formContent.num,
waveNum: isWaveDataRequest ? waveNumber.value : null,
isWave: isWaveDataRequest ,
waveNum: isWaveDataRequest ? waveNumber.value : null,
isWave: isWaveDataRequest,
patternId: pattern.value
}).then((res: any) => {
let list: string[] = []
@@ -507,8 +504,6 @@ const getResults = async (code: any) => {
tesList.value = list
checkResultData.value = res.data.resultMap
rawTableData.value = res.data.rawDataMap
})
}
@@ -541,39 +536,35 @@ const close = async () => {
}
const handleErrorSysChange = async () => {
changeErrorSystem({
planId: checkStore.plan.id,
scriptId: '',
errorSysId: formContent.errorSysId,
deviceId: formContent.deviceId,
code: checkStore.plan.code + '',
patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '',
}).then((res) => {
if (res.code === ResultEnum.SUCCESS) {
ElMessage.success('切换误差体系成功')
handleChnNumChange(formContent.chnNum)
}
})
changeErrorSystem({
planId: checkStore.plan.id,
scriptId: '',
errorSysId: formContent.errorSysId,
deviceId: formContent.deviceId,
code: checkStore.plan.code + '',
patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
}).then(res => {
if (res.code === ResultEnum.SUCCESS) {
ElMessage.success('切换误差体系成功')
handleChnNumChange(formContent.chnNum)
}
})
}
const handleReCalculate = async () => {
reCalculate({
planId: checkStore.plan.id,
scriptId: '',
errorSysId: formContent.errorSysId,
deviceId: formContent.deviceId,
code: checkStore.plan.code + '',
patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '',
}).then((res) => {
if (res.code === ResultEnum.SUCCESS) {
ElMessage.success('重新计算成功！')
handleChnNumChange(formContent.chnNum)
}
})
reCalculate({
planId: checkStore.plan.id,
scriptId: '',
errorSysId: formContent.errorSysId,
deviceId: formContent.deviceId,
code: checkStore.plan.code + '',
patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
}).then(res => {
if (res.code === ResultEnum.SUCCESS) {
ElMessage.success('重新计算成功！')
handleChnNumChange(formContent.chnNum)
}
})
}
defineExpose({

4
frontend/src/views/home/components/comparePreTest.vue
View File

@@ -81,8 +81,8 @@
<RealTimeData ref="realTimeDataRef" />
</template>
<script lang="tsx" setup name="preTest">
import {ElMessage, ElMessageBox, StepProps} from "element-plus";
import {computed, defineExpose, PropType, ref, toRef, watch} from 'vue';
import { ElMessage, ElMessageBox, StepProps } from 'element-plus'
import { computed, PropType, ref, toRef, watch } from 'vue'
import RealTimeData from './realTimeDataAlign.vue'
const realTimeDataRef = ref()

32
frontend/src/views/home/components/compareTestPopup.vue
View File

@@ -134,30 +134,17 @@
</template>
<script lang="tsx" setup name="testPopup">
import { nextTick, PropType, reactive, ref, watch } from 'vue'
import { nextTick, reactive, ref, watch } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
Coin,
Edit,
Key,
Switch,
Refresh,
Right,
SuccessFilled,
UploadFilled,
VideoPause,
VideoPlay
} from '@element-plus/icons-vue'
import { Coin, Edit, Key, Refresh, Right, SuccessFilled, Switch, VideoPause, VideoPlay } from '@element-plus/icons-vue'
import ComparePreTest from './comparePreTest.vue'
import ChannelPairing from './channelPairing.vue'
import { Device } from '@/api/device/interface/device'
import CompareTest from './compareTest.vue'
import socketClient from '@/utils/webSocketClient'
import { useCheckStore } from '@/stores/modules/check'
import { pauseTest, resumeTest, startPreTest, contrastTest } from '@/api/socket/socket'
import { contrastTest, pauseTest, resumeTest, startPreTest } from '@/api/socket/socket'
import { useUserStore } from '@/stores/modules/user'
import { JwtUtil } from '@/utils/jwtUtil'
import { StandardDevice } from '@/api/device/interface/standardDevice'
const userStore = useUserStore()
const checkStore = useCheckStore()
@@ -242,8 +229,8 @@ const standardDevIds = ref<[]>()
const pairs = ref<any>()
const testAgain = ref(false) //重新检测按钮是否显示
const checkNumber = ref(0) //检测次数
const deviceMonitor2= ref<Map<string, any[]>>();
const onlyWave = ref(false);//计划数据源是否只有录波
const deviceMonitor2 = ref<Map<string, any[]>>()
const onlyWave = ref(false) //计划数据源是否只有录波
const open = async (
title: string,
mapping: any,
@@ -252,14 +239,14 @@ const open = async (
devIdsArray: [],
standardDevIdsArray: [],
pair: any,
deviceMonitor:Map<string, any[]>,
deviceMonitor: Map<string, any[]>,
planIsOnlyWave: boolean
) => {
if (checkStore.selectTestItems.preTest && !checkStore.selectTestItems.test) {
testAgain.value = true
}
deviceMonitor2.value = deviceMonitor;
onlyWave.value = planIsOnlyWave;
deviceMonitor2.value = deviceMonitor
onlyWave.value = planIsOnlyWave
checkStore.setNodesConnectable(true)
dialogTitle.value = title
channelMapping.value = mapping
@@ -588,7 +575,6 @@ const nextStep = () => {
}
const handleStepClick = (step: number) => {
if (step > stepsActive.value) {
return
} else {
@@ -636,7 +622,7 @@ defineExpose({ open })
<style scoped lang="scss">
.test-head-steps {
::v-deep .el-step {
:deep(.el-step) {
.el-step__head.is-success {
color: #91cc75;
}

244
frontend/src/views/home/components/dataCheckResultTable.vue
View File

@@ -1,138 +1,144 @@
<template>
<div class="table-main">
<el-table
v-if="tableData.length > 0"
:data="tableData"
height="357px"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
>
<!-- <el-table-column prop="chnNum" label="通道号" width="80">-->
<!-- <template #default="{row}">-->
<!-- {{ '通道' + row.chnNum }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="A相" v-if="phaseA === 1">
<el-table-column prop="stdA" :label="'标准值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="dataA" :label="'被检值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="isDataA" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围：{{ scope.row.maxErrorA }}
<br />
误差值：{{ scope.row.errorA }} {{ scope.row.errorA !== '/' ? innerUnitA : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataA === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataA === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataA === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="B相" v-if="phaseB === 1">
<el-table-column prop="stdB" :label="'标准值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="dataB" :label="'被检值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="isDataB" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围：{{ scope.row.maxErrorB }}
<br />
误差值：{{ scope.row.errorB }} {{ scope.row.errorB !== '/' ? innerUnitB : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataB === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataB === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataB === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="C相" v-if="phaseC === 1">
<el-table-column prop="stdC" :label="'标准值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="dataC" :label="'被检值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="isDataC" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围： {{ scope.row.maxErrorC }}
<br />
误差值：{{ scope.row.errorC }} {{ scope.row.errorC !== '/' ? innerUnitC : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataC === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataC === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataC === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<div class="table-main">
<el-table v-if="tableData.length > 0" :data="tableData" height="357px" :header-cell-style="{ textAlign: 'center' } "
:cell-style="{ textAlign: 'center' }">
<!-- <el-table-column prop="chnNum" label="通道号" width="80">-->
<!-- <template #default="{row}">-->
<!-- {{ '通道' + row.chnNum }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column label="A相" v-if="phaseA === 1">
<el-table-column prop="stdA" :label="'标准值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="dataA" :label="'被检值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="isDataA" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围：{{ scope.row.maxErrorA }} <br/>
误差值：{{ scope.row.errorA }} {{ scope.row.errorA !== '/' ? innerUnitA : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataA === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataA === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataA === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="B相" v-if="phaseB === 1">
<el-table-column prop="stdB" :label="'标准值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="dataB" :label="'被检值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="isDataB" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围：{{ scope.row.maxErrorB }}<br/>
误差值：{{ scope.row.errorB }} {{ scope.row.errorB !== '/' ? innerUnitB : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataB === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataB === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataB === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="C相" v-if="phaseC === 1">
<el-table-column prop="stdC" :label="'标准值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="dataC" :label="'被检值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="isDataC" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围： {{ scope.row.maxErrorC }}<br/>
误差值：{{ scope.row.errorC }} {{ scope.row.errorC !== '/' ? innerUnitC : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataC === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataC === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataC === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
<el-table-column :label="tableHeader" v-if="phaseT === 1">
<el-table-column prop="stdT" :label="'标准值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="dataT" :label="'被检值'+(outerUnit==''?'':'（'+outerUnit+'）')"/>
<el-table-column prop="isDataT" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围： {{ scope.row.maxErrorT }}<br/>
误差值：{{ scope.row.errorT }} {{ scope.row.errorT !== '/' ? innerUnitT : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataT === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataT === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataT === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
<el-table-column :label="tableHeader" v-if="phaseT === 1">
<el-table-column prop="stdT" :label="'标准值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="dataT" :label="'被检值' + (outerUnit == '' ? '' : '（' + outerUnit + '）')" />
<el-table-column prop="isDataT" label="检测结果">
<template #default="scope">
<el-tooltip effect="dark" placement="bottom">
<template #content>
误差范围： {{ scope.row.maxErrorT }}
<br />
误差值：{{ scope.row.errorT }} {{ scope.row.errorT !== '/' ? innerUnitT : '' }}
</template>
<el-tag type="success" v-if="scope.row.isDataT === 1">符合</el-tag>
<el-tag type="danger" v-if="scope.row.isDataT === 2">不符合</el-tag>
<el-tag type="warning" v-if="scope.row.isDataT === 4">/</el-tag>
<el-tag type="info" v-if="scope.row.isDataA === 5">-</el-tag>
</el-tooltip>
</template>
</el-table-column>
</el-table-column>
</el-table>
</div>
</template>
<script lang="tsx" setup>
import {computed, defineProps} from 'vue';
import {CheckData} from "@/api/check/interface";
const {tableData, currentScriptTypeName} = defineProps<{
tableData: CheckData.CheckResult[],
currentScriptTypeName: string
}>();
import { computed } from 'vue'
import { CheckData } from '@/api/check/interface'
const { tableData, currentScriptTypeName } = defineProps<{
tableData: CheckData.CheckResult[]
currentScriptTypeName: string
}>()
const outerUnit = computed(() => {
return tableData.length > 0 ? tableData[0].unit : '';
return tableData.length > 0 ? tableData[0].unit : ''
})
const innerUnitA = computed(() => {
return tableData.length > 0 ? tableData[0].unitA : '';
return tableData.length > 0 ? tableData[0].unitA : ''
})
const innerUnitB = computed(() => {
return tableData.length > 0 ? tableData[0].unitB : '';
return tableData.length > 0 ? tableData[0].unitB : ''
})
const innerUnitC = computed(() => {
return tableData.length > 0 ? tableData[0].unitC : '';
return tableData.length > 0 ? tableData[0].unitC : ''
})
const innerUnitT = computed(() => {
return tableData.length > 0 ? tableData[0].unitT : '';
return tableData.length > 0 ? tableData[0].unitT : ''
})
const phaseA = computed(() => {
return tableData.length <= 0 || tableData[0].dataA == null || tableData[0].dataA == "/" ? 0 : 1
return tableData.length <= 0 || tableData[0].dataA == null || tableData[0].dataA == '/' ? 0 : 1
})
const phaseB = computed(() => {
return tableData.length <= 0 || tableData[0].dataB == null || tableData[0].dataB == "/" ? 0 : 1
return tableData.length <= 0 || tableData[0].dataB == null || tableData[0].dataB == '/' ? 0 : 1
})
const phaseC = computed(() => {
return tableData.length <= 0 || tableData[0].dataC == null || tableData[0].dataC == "/" ? 0 : 1
return tableData.length <= 0 || tableData[0].dataC == null || tableData[0].dataC == '/' ? 0 : 1
})
const phaseT = computed(() => {
return tableData.length <= 0 || tableData[0].dataT == null || tableData[0].dataT == "/" ? 0 : 1
return tableData.length <= 0 || tableData[0].dataT == null || tableData[0].dataT == '/' ? 0 : 1
})
const tableHeader = computed(() => {
if (phaseT.value === 1) {
let index = currentScriptTypeName.indexOf('=');
return currentScriptTypeName.substring(0, index);
}
return currentScriptTypeName
if (phaseT.value === 1) {
let index = currentScriptTypeName.indexOf('=')
return currentScriptTypeName.substring(0, index)
}
return currentScriptTypeName
})
// const maxErrorStr = computed((data) => {
@@ -143,38 +149,36 @@ const tableHeader = computed(() => {
// }
// return result;
// })
</script>
<style scoped>
.form-grid {
display: flex;
flex-direction: row; /* 横向排列 */
flex-wrap: wrap; /* 允许换行 */
display: flex;
flex-direction: row; /* 横向排列 */
flex-wrap: wrap; /* 允许换行 */
}
.form-grid .el-form-item {
flex: 1 1 30%; /* 控件宽度 */
margin-right: 20px; /* 控件间距 */
flex: 1 1 30%; /* 控件宽度 */
margin-right: 20px; /* 控件间距 */
}
.form-grid .el-form-item:last-child {
margin-right: 0; /* 最后一个控件不需要右边距 */
margin-right: 0; /* 最后一个控件不需要右边距 */
}
.dialog-footer {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
}
.el-tabs {
margin-bottom: 20px; /* 添加底部边距 */
margin-bottom: 20px; /* 添加底部边距 */
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
.el-table th,
.el-table td {
text-align: center; /* 所有单元格文字居中 */
}
</style>

1332
frontend/src/views/home/components/dataCheckSingleChannelSingleTestPopup.vue
View File

File diff suppressed because it is too large Load Diff

4
frontend/src/views/home/components/preTest.vue
View File

@@ -74,8 +74,8 @@
* 3. 协议校验 - 进行ICD报告触发测试
* 4. 相序校验 - 判断装置接线是否正确
*/
import {ElMessage, ElMessageBox} from "element-plus";
import {defineExpose, ref, toRef, watch} from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref, toRef, watch } from 'vue'
// ==================== 日志数据存储 ====================
// 各步骤的日志数据，用于在右侧折叠面板中显示实时日志

177
frontend/src/views/home/components/resultPopup.vue
View File

@@ -1,112 +1,111 @@
<template>
<el-dialog title="检测结果" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="895px">
<div class="result-dialog">
<div class="result-title">
<el-row>
<el-form-item label="检测脚本" >
<el-input v-model='testScriptName' :disabled="true"/>
</el-form-item>
<el-form-item label="误差体系" >
<el-input v-model='errorSysName' :disabled="true"/>
</el-form-item>
<el-form-item label="数据原则" >
<el-input v-model='dataRule' :disabled="true"/>
</el-form-item>
</el-row>
</div>
<div class="result-content">
<el-table :data="resultData" stripe max-height="350" :header-cell-style="{ textAlign: 'center' } " :cell-style="{ textAlign: 'center' }" style="width: 100%" border v-on:cell-click="handleClick">
<el-table-column prop="deviceName" label="被检设备" />
<el-table-column prop="result_1" label="通道1" />
<el-table-column prop="result_2" label="通道2" />
<el-table-column prop="result_3" label="通道3" />
<el-table-column prop="result_4" label="通道4" />
</el-table>
</div>
<div class="result-footer">
你可以停留在本页查看数据，或返回首页进行复检、报告生成和归档
</div>
</div>
<DataCheckPopup
:visible="DataCheckDialogVisible"
<el-dialog title="检测结果" :model-value="visible" @close="handleCancel" v-bind="dialogBig" width="895px">
<div class="result-dialog">
<div class="result-title">
<el-row>
<el-form-item label="检测脚本">
<el-input v-model="testScriptName" :disabled="true" />
</el-form-item>
<el-form-item label="误差体系">
<el-input v-model="errorSysName" :disabled="true" />
</el-form-item>
<el-form-item label="数据原则">
<el-input v-model="dataRule" :disabled="true" />
</el-form-item>
</el-row>
</div>
<div class="result-content">
<el-table
:data="resultData"
stripe
max-height="350"
:header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
border
v-on:cell-click="handleClick"
>
<el-table-column prop="deviceName" label="被检设备" />
<el-table-column prop="result_1" label="通道1" />
<el-table-column prop="result_2" label="通道2" />
<el-table-column prop="result_3" label="通道3" />
<el-table-column prop="result_4" label="通道4" />
</el-table>
</div>
<div class="result-footer">你可以停留在本页查看数据，或返回首页进行复检、报告生成和归档</div>
</div>
<DataCheckPopup
:visible="DataCheckDialogVisible"
@update:visible="DataCheckDialogVisible = $event"
></DataCheckPopup>
></DataCheckPopup>
</el-dialog>
</template>
<script lang="ts" setup name="testPopup">
import{ElMessage, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument,Edit, Picture, UploadFilled, SuccessFilled,VideoPlay,Right,Refresh,Close} from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import DataCheckPopup from './dataCheckPopup.vue';
import { log } from 'console';
<script lang="ts" setup name="testPopup">
import { ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
//import IndicatorTypeDialog from "@/views/machine/errorSystem/components/IndicatorTypeDialog.vue"; // 导入子组件
import DataCheckPopup from './dataCheckPopup.vue'
const props = defineProps<{
visible: boolean;
}>();
const props = defineProps<{
visible: boolean
}>()
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const emit = defineEmits<{
(e: 'update:visible', value: boolean): void
(e: 'submit', data: any): void
}>()
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
const errorSysName = ref('Q/GDW 10650.2-2021');
const dataRule = ref('所有值');
const DataCheckDialogVisible = ref(false);
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式')
const errorSysName = ref('Q/GDW 10650.2-2021')
const dataRule = ref('所有值')
const DataCheckDialogVisible = ref(false)
const resultData = ref([
{
deviceName: "被检设备1",
result_1: "合格",
result_2: "合格",
result_3: "合格",
result_4: "合格",
},
{
deviceName: "被检设备2",
result_1: "合格",
result_2: "合格",
result_3: "—",
result_4: "—",
},
{
deviceName: "被检设备3",
result_1: "不合格",
result_2: "合格",
result_3: "—",
result_4: "—",
},
]);
{
deviceName: '被检设备1',
result_1: '合格',
result_2: '合格',
result_3: '合格',
result_4: '合格'
},
{
deviceName: '被检设备2',
result_1: '合格',
result_2: '合格',
result_3: '—',
result_4: '—'
},
{
deviceName: '被检设备3',
result_1: '不合格',
result_2: '合格',
result_3: '—',
result_4: '—'
}
])
const handleClick = (row:any) => {
const handleClick = (row: any) => {
console.log(111)
DataCheckDialogVisible.value = true;
};
DataCheckDialogVisible.value = true
}
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
const handleCancel = () => {
emit('update:visible', false) // 关闭对话框
}
</script>
</script>
<style scoped>
.result-dialog{
<style scoped>
.result-dialog {
display: flex;
flex-direction: column;
}
.result-title{
.result-title {
/* display: flex;
flex-direction: row; */
}
.result-footer{
}
.result-footer {
text-align: right;
margin-top: 10px;
}

1008
frontend/src/views/home/components/testPopup.vue
View File

File diff suppressed because it is too large Load Diff

251
frontend/src/views/login/components/LoginForm.vue
View File

@@ -1,76 +1,57 @@
<template>
<el-form
ref='loginFormRef'
:model='loginForm'
:rules='loginRules'
size='large'
>
<el-form-item prop='username'>
<el-input v-model='loginForm.username' placeholder='用户名'>
<template #prefix>
<el-icon class='el-input__icon'>
<user/>
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop='password'>
<el-input
v-model='loginForm.password'
type='password'
placeholder='密码'
show-password
autocomplete='new-password'
>
<template #prefix>
<el-icon class='el-input__icon'>
<lock/>
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop='checked'>
<el-checkbox v-model="loginForm.checked">记住我</el-checkbox>
</el-form-item>
</el-form>
<div class='login-btn'>
<el-button
:icon='UserFilled'
round
size='large'
type='primary'
:loading='loading'
@click='login(loginFormRef)'
>
登录
</el-button>
<el-button
:icon='CircleClose'
round
size='large'
@click='resetForm(loginFormRef)'
>
重置
</el-button>
</div>
<el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" size="large">
<el-form-item prop="username">
<el-input v-model="loginForm.username" placeholder="用户名">
<template #prefix>
<el-icon class="el-input__icon">
<user />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="密码"
show-password
autocomplete="new-password"
>
<template #prefix>
<el-icon class="el-input__icon">
<lock />
</el-icon>
</template>
</el-input>
</el-form-item>
<el-form-item prop="checked">
<el-checkbox v-model="loginForm.checked">记住我</el-checkbox>
</el-form-item>
</el-form>
<div class="login-btn">
<el-button :icon="UserFilled" round size="large" type="primary" :loading="loading" @click="login(loginFormRef)">
登录
</el-button>
<el-button :icon="CircleClose" round size="large" @click="resetForm(loginFormRef)">重置</el-button>
</div>
</template>
<script setup lang='ts'>
import {useRouter} from 'vue-router'
import {HOME_URL} from '@/config'
import {getTimeState} from '@/utils'
import {type Dict} from '@/api/interface'
import {type Login} from '@/api/user/interface/user'
import type {ElForm} from 'element-plus'
import {ElNotification} from 'element-plus'
import {getDictList, getPublicKey, loginApi} from '@/api/user/login'
import {useUserStore} from '@/stores/modules/user'
import {useTabsStore} from '@/stores/modules/tabs'
import {useKeepAliveStore} from '@/stores/modules/keepAlive'
import {initDynamicRouter} from '@/routers/modules/dynamicRouter'
import {CircleClose, UserFilled} from '@element-plus/icons-vue'
import {useAuthStore} from '@/stores/modules/auth'
import {useDictStore} from "@/stores/modules/dict";
<script setup lang="ts">
import { useRouter } from 'vue-router'
import { HOME_URL } from '@/config'
import { getTimeState } from '@/utils'
import { type Dict } from '@/api/interface'
import { type Login } from '@/api/user/interface/user'
import type { ElForm } from 'element-plus'
import { ElNotification } from 'element-plus'
import { getDictList, getPublicKey, loginApi } from '@/api/user/login'
import { useUserStore } from '@/stores/modules/user'
import { useTabsStore } from '@/stores/modules/tabs'
import { useKeepAliveStore } from '@/stores/modules/keepAlive'
import { initDynamicRouter } from '@/routers/modules/dynamicRouter'
import { CircleClose, UserFilled } from '@element-plus/icons-vue'
import { useAuthStore } from '@/stores/modules/auth'
import { useDictStore } from '@/stores/modules/dict'
import forge from 'node-forge'
const authStore = useAuthStore()
@@ -80,97 +61,97 @@ const tabsStore = useTabsStore()
const keepAliveStore = useKeepAliveStore()
const dictStore = useDictStore()
let publicKey: any = null;
let publicKey: any = null
type FormInstance = InstanceType<typeof ElForm>;
type FormInstance = InstanceType<typeof ElForm>
const loginFormRef = ref<FormInstance>()
const loginRules = reactive({
username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
password: [{required: true, message: '请输入密码', trigger: 'blur'}],
username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
})
const loading = ref(false)
const loginForm = reactive<Login.ReqLoginForm>({
username: '',
password: '',
checked: false,
username: '',
password: '',
checked: false
})
// login
const login = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.validate(async (valid) => {
if (!valid) return
loading.value = true
try {
let {data: publicKeyBase64}: { data: string } = await getPublicKey(loginForm.username)
//将base64格式的公钥转换为Forge可以使用的格式
const publicKeyDer = forge.util.decode64(publicKeyBase64);
publicKey = forge.pki.publicKeyFromPem(forge.pki.publicKeyToPem(forge.pki.publicKeyFromAsn1(forge.asn1.fromDer(publicKeyDer))));
if (!formEl) return
formEl.validate(async valid => {
if (!valid) return
loading.value = true
try {
let { data: publicKeyBase64 }: { data: string } = await getPublicKey(loginForm.username)
//将base64格式的公钥转换为Forge可以使用的格式
const publicKeyDer = forge.util.decode64(publicKeyBase64)
publicKey = forge.pki.publicKeyFromPem(
forge.pki.publicKeyToPem(forge.pki.publicKeyFromAsn1(forge.asn1.fromDer(publicKeyDer)))
)
// 1.执行登录接口
const {data} = await loginApi({
username: forge.util.encode64(loginForm.username),
password: encryptPassword(loginForm.password),
})
userStore.setAccessToken(data.accessToken)
userStore.setRefreshToken(data.refreshToken)
userStore.setUserInfo(data.userInfo)
if(loginForm.checked){
userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
}
const response = await getDictList()
const dictData = response.data as unknown as Dict[]
await dictStore.initDictData(dictData)
// 2.添加动态路由
await initDynamicRouter()
// 1.执行登录接口
const { data } = await loginApi({
username: forge.util.encode64(loginForm.username),
password: encryptPassword(loginForm.password)
})
userStore.setAccessToken(data.accessToken)
userStore.setRefreshToken(data.refreshToken)
userStore.setUserInfo(data.userInfo)
if (loginForm.checked) {
userStore.setExp(Date.now() + 1000 * 60 * 60 * 24 * 30)
}
const response = await getDictList()
const dictData = response.data as unknown as Dict[]
await dictStore.initDictData(dictData)
// 2.添加动态路由
await initDynamicRouter()
// 3.清空 tabs、keepAlive 数据
tabsStore.setTabs([])
keepAliveStore.setKeepAliveName([])
// 3.清空 tabs、keepAlive 数据
tabsStore.setTabs([])
keepAliveStore.setKeepAliveName([])
// 4.跳转到首页
router.push(HOME_URL)
// 5.登录默认不显示菜单和导航栏
authStore.resetAuthStore()
ElNotification({
title: getTimeState(),
message: '登录成功',
type: 'success',
duration: 3000,
})
} finally {
loading.value = false
}
})
// 4.跳转到首页
router.push(HOME_URL)
// 5.登录默认不显示菜单和导航栏
authStore.resetAuthStore()
ElNotification({
title: getTimeState(),
message: '登录成功',
type: 'success',
duration: 3000
})
} finally {
loading.value = false
}
})
}
// resetForm
const resetForm = (formEl: FormInstance | undefined) => {
if (!formEl) return
formEl.resetFields()
if (!formEl) return
formEl.resetFields()
}
onMounted(() => {
// 监听 enter 事件（调用登录）
document.onkeydown = (e: KeyboardEvent) => {
e = (window.event as KeyboardEvent) || e
if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
if (loading.value) return
login(loginFormRef.value)
// 监听 enter 事件（调用登录）
document.onkeydown = (e: KeyboardEvent) => {
e = (window.event as KeyboardEvent) || e
if (e.code === 'Enter' || e.code === 'enter' || e.code === 'NumpadEnter') {
if (loading.value) return
login(loginFormRef.value)
}
}
}
})
const encryptPassword = (password: string) => {
const encrypted = publicKey.encrypt(password, 'RSAES-PKCS1-V1_5');
// 将加密后的数据转换为base64格式以便传输
return forge.util.encode64(encrypted);
const encrypted = publicKey.encrypt(password, 'RSAES-PKCS1-V1_5')
// 将加密后的数据转换为base64格式以便传输
return forge.util.encode64(encrypted)
}
</script>
<style scoped lang='scss'>
@import "../index.scss";
<style scoped lang="scss">
@use '../index.scss';
</style>

34
frontend/src/views/login/index.vue
View File

@@ -1,28 +1,28 @@
<template>
<div class="login-container flx-center">
<div class="login-box">
<!-- <SwitchDark class="dark" /> -->
<div class="login-left">
<img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
</div>
<div class="login-form">
<div class="login-logo">
<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
<img class="login-icon" src="@/assets/images/cn_pms9100_logo.png" alt="" />
<h2 class="logo-text">{{ title }}</h2>
<div class="login-container flx-center">
<div class="login-box">
<!-- <SwitchDark class="dark" /> -->
<div class="login-left">
<img class="login-left-img" src="@/assets/images/login_left.png" alt="login" />
</div>
<div class="login-form">
<div class="login-logo">
<!-- <img class="login-icon" src="@/assets/images/logo.svg" alt="" /> -->
<img class="login-icon" src="@/assets/images/cn_pms9100_logo.png" alt="" />
<h2 class="logo-text">{{ title }}</h2>
</div>
<LoginForm />
</div>
</div>
<LoginForm />
</div>
</div>
</div>
</template>
<script setup lang="ts" name="login">
import LoginForm from "./components/LoginForm.vue";
const title = import.meta.env.VITE_GLOB_APP_TITLE;
import LoginForm from './components/LoginForm.vue'
const title = import.meta.env.VITE_GLOB_APP_TITLE
</script>
<style scoped lang="scss">
@import "./index.scss";
@use './index.scss';
</style>

29
frontend/src/views/machine/controlSource/components/controlSourceDetail.vue
View File

@@ -6,7 +6,7 @@
</div>
<div class="data-check-content">
<div class="content-tree">
<Tree ref="treeRef" :treeData="treeData" @setTab="setTab" />
<MachineTree ref="treeRef" :treeData="treeData" @setTab="setTab" />
</div>
<div class="content-right-Tabs" style="height: calc(100vh - 315px); width: 100px">
@@ -204,33 +204,22 @@
</template>
<script setup lang="ts">
import { type PropType, ref, nextTick, onMounted, watch } from 'vue'
import Tree from './tree.vue'
import { nextTick, onMounted, type PropType, ref, watch } from 'vue'
import MachineTree from './machineTree.vue'
import Commun from '@/views/machine/testScript/components//communication.vue'
import { type CascaderOption, ElMessage } from 'element-plus'
import { ElMessage } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import {
CirclePlus,
Delete,
Check,
CopyDocument,
View,
EditPen,
VideoPlay,
VideoPause,
Loading
} from '@element-plus/icons-vue'
import { VideoPause, VideoPlay, View } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { dlsDetails } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
import { startSimulateTest, closeSimulateTest } from '@/api/device/controlSource/index.ts'
import { closeSimulateTest, startSimulateTest } from '@/api/device/controlSource/index.ts'
import { controlSource } from '@/api/device/interface/controlSource'
import {JwtUtil} from "@/utils/jwtUtil";
import { JwtUtil } from '@/utils/jwtUtil'
interface TabOption {
label?: string
name?: string

0
frontend/src/views/machine/controlSource/components/tree.vue → frontend/src/views/machine/controlSource/components/machineTree.vue
View File

355
frontend/src/views/machine/device/components/monitorTab.vue
View File

@@ -1,199 +1,210 @@
<!-- components/MonitorPointTable.vue -->
<template>
<div class='table-box'>
<div class="table-box">
<ProTable
ref='proTable'
:pagination="false"
:toolButton="false"
:columns='columns'
:data="tableData"
:style="{ height: tableHeight + 'px',overflow:'hidden'}"
ref="proTable"
:pagination="false"
:toolButton="false"
:columns="columns"
:data="tableData"
:style="{ height: tableHeight + 'px', overflow: 'hidden' }"
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button type='primary' :icon='CirclePlus' @click="openDialog('add')" :disabled="props.DevFormContent.importFlag == 1">新增</el-button>
<el-button v-auth.device="'delete'" type='danger' :icon='Delete' plain :disabled='!scope.isSelected'
@click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button v-auth.device="'edit'" type='primary' link :icon='EditPen' :model-value='false' :disabled="props.DevFormContent.importFlag == 1"
@click="openDialog('edit', scope.row)">编辑
</el-button>
<el-button v-auth.device="'delete'" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)' >删除
</el-button>
</template>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button
type="primary"
:icon="CirclePlus"
@click="openDialog('add')"
:disabled="props.DevFormContent.importFlag == 1"
>
新增
</el-button>
<el-button
v-auth.device="'delete'"
type="danger"
:icon="Delete"
plain
:disabled="!scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<el-button
v-auth.device="'edit'"
type="primary"
link
:icon="EditPen"
:model-value="false"
:disabled="props.DevFormContent.importFlag == 1"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button
v-auth.device="'delete'"
type="primary"
link
:icon="Delete"
@click="handleDelete(scope.row.id)"
>
删除
</el-button>
</template>
</ProTable>
</div>
<MonitorPopup @getParameter="getParameter" ref='monitorPopup'/>
</template>
</div>
<MonitorPopup @getParameter="getParameter" ref="monitorPopup" />
</template>
<script setup lang="ts">
import { ref, defineProps, reactive, watch } from 'vue';
import ProTable from '@/components/ProTable/index.vue'; // 假设 ProTable 是自定义组件
import { CirclePlus, Delete, EditPen, MessageBox } from '@element-plus/icons-vue';
import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
import { ProTableInstance, type ColumnProps } from '@/components/ProTable/interface'
import { type Monitor } from '@/api/device/interface/monitor'
import { useDictStore } from '@/stores/modules/dict';
import { useHandleData } from '@/hooks/useHandleData';
import { Device } from '@/api/device/interface/device';
import { ElMessage, ElMessageBox } from 'element-plus';
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import ProTable from '@/components/ProTable/index.vue' // 假设 ProTable 是自定义组件
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import MonitorPopup from '@/views/machine/device/components/monitorPopup.vue'
import { type ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { type Monitor } from '@/api/device/interface/monitor'
import { useDictStore } from '@/stores/modules/dict'
import { Device } from '@/api/device/interface/device'
import { ElMessage, ElMessageBox } from 'element-plus'
// 定义 props
const props = defineProps<{
DevFormContent:Device.ResPqDev,
tableHeight?: number, // 接收外部传入的高度
selectOptions: Record<string, Device.SelectOption[]>,
}>();
// 定义 props
const props = defineProps<{
DevFormContent: Device.ResPqDev
tableHeight?: number // 接收外部传入的高度
selectOptions: Record<string, Device.SelectOption[]>
}>()
// ProTable 实例
const proTable = ref<ProTableInstance>()
const dictStore = useDictStore()
const monitorPopup = ref()
const tableData = ref<any[]>([])
const title_Type = ref('add')
// ProTable 实例
const proTable = ref<ProTableInstance>()
const dictStore = useDictStore()
const monitorPopup = ref()
const tableData = ref<any[]>([])
const title_Type = ref('add')
// 表格配置项
// 表格配置项
const columns = reactive<ColumnProps<Monitor.ResPqMon>[]>([
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 200,
},
{
prop: 'busbar',
label: '所属母线',
width: 200,
},
{
prop: 'num',
label: '线路号',
width: 200,
},
{
prop: 'pt',
label: 'PT变比',
width: 110,
},
{
prop: 'ct',
label: 'CT变比',
width: 130,
},
{
prop: 'connection',
label: '接线方式',
enum: dictStore.getDictData('Dev_Connect'),
fieldNames: {label: 'name', value: 'id'},
width: 130,
},
{
prop: 'statInterval',
label: '统计间隔',
width: 130,
},
{
prop: 'checkFlag',
label: '是否参与检测',
render: (scope: any) => {
return scope.row.checkFlag === 1 ? '是' : '否'
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'name',
label: '名称',
width: 200
},
width: 130,
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 },
{
prop: 'busbar',
label: '所属母线',
width: 200
},
{
prop: 'num',
label: '线路号',
width: 200
},
{
prop: 'pt',
label: 'PT变比',
width: 110
},
{
prop: 'ct',
label: 'CT变比',
width: 130
},
{
prop: 'connection',
label: '接线方式',
enum: dictStore.getDictData('Dev_Connect'),
fieldNames: { label: 'name', value: 'id' },
width: 130
},
{
prop: 'statInterval',
label: '统计间隔',
width: 130
},
{
prop: 'checkFlag',
label: '是否参与检测',
render: (scope: any) => {
return scope.row.checkFlag === 1 ? '是' : '否'
},
width: 130
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 200 }
])
const emit = defineEmits(['get-parameter'])
const getParameter = (data: Monitor.ResPqMon) => {
console.log('data', data)
if (title_Type.value === 'edit') {
// 编辑：替换已有的数据
const index = tableData.value.findIndex(item => item.id === data.id)
if (index > -1) {
tableData.value = [
...tableData.value.slice(0, index),
data,
...tableData.value.slice(index + 1)
]
console.log('data', data)
if (title_Type.value === 'edit') {
// 编辑：替换已有的数据
const index = tableData.value.findIndex(item => item.id === data.id)
if (index > -1) {
tableData.value = [...tableData.value.slice(0, index), data, ...tableData.value.slice(index + 1)]
}
} else {
// 新增：追加数据
tableData.value = [...tableData.value, data]
}
} else {
// 新增：追加数据
tableData.value = [...tableData.value, data]
}
emit('get-parameter', tableData.value)
emit('get-parameter', tableData.value)
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Monitor.ResPqMon> = {}) => {
if (props.DevFormContent.devType == '' || props.DevFormContent.devType == undefined) {
ElMessageBox.confirm('请先选择被检设备类型', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
return
}
title_Type.value = titleType
monitorPopup.value?.open(titleType, row, props.DevFormContent, tableData.value, props.selectOptions)
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<Monitor.ResPqMon> = {}) => {
if(props.DevFormContent.devType == '' || props.DevFormContent.devType == undefined){
ElMessageBox.confirm(
'请先选择被检设备类型',
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
},
)
return
}
title_Type.value = titleType
monitorPopup.value?.open(titleType, row,props.DevFormContent,tableData.value,props.selectOptions)
}
// 批量删除监测点台账
const batchDelete = (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除监测点?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
// 批量删除监测点台账
const batchDelete = (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除监测点?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => !ids.includes(item.id));
}).then(async () => {
tableData.value = tableData.value.filter(item => !ids.includes(item.id))
proTable.value?.clearSelection()
emit('get-parameter', tableData.value)
ElMessage({
type: "success",
message: `批量删除监测点成功!`
});
});
}
// 删除监测点台账
const handleDelete = (id: string) => {
ElMessageBox.confirm(`是否删除监测点?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => item.id !== id)
proTable.value?.clearSelection()
emit('get-parameter', tableData.value)
ElMessage({
type: "success",
message: `删除监测点成功!`
});
});
emit('get-parameter', tableData.value)
ElMessage({
type: 'success',
message: `批量删除监测点成功!`
})
})
}
// 删除监测点台账
const handleDelete = (id: string) => {
ElMessageBox.confirm(`是否删除监测点?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
tableData.value = tableData.value.filter(item => item.id !== id)
proTable.value?.clearSelection()
emit('get-parameter', tableData.value)
ElMessage({
type: 'success',
message: `删除监测点成功!`
})
})
}
watch(
() => props.DevFormContent.monitorList,
(newVal) => {
tableData.value = newVal|| []
},
{ immediate: true }
() => props.DevFormContent.monitorList,
newVal => {
tableData.value = newVal || []
},
{ immediate: true }
)
</script>
</script>

571
frontend/src/views/machine/errorSystem/components/errorStandardPopup.vue
View File

@@ -1,8 +1,8 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<div class="table-container">
<el-table :data="errorData.value"
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" align-center>
<div class="table-container">
<el-table
:data="errorData.value"
height="500"
:header-cell-style="rowClass"
:cell-style="{ textAlign: 'center' }"
@@ -10,309 +10,374 @@
:span-method="spanMethod"
:border="true"
class="custom-table"
>
<el-table-column label="被测量">
<el-table-column prop="col1" width="150"/>
<el-table-column prop="col2" width="120"/>
</el-table-column>
<el-table-column prop="deviceLevel" label="检测装置级别" width="120"/>
<el-table-column prop="measurementType" label="测量类型"/>
<el-table-column prop="condition" label="测量条件"/>
<el-table-column prop="maxErrorValue" label="最大误差"/>
</el-table>
</div>
<div>
<label class="left-align-label">注1：UN：测量的标称电压；IN：测量仪器的标称电流；Uh和Ih：测量值，h表示谐波次数。</label>
</div>
<div>
<label class="left-align-label">注2：对于数字式接入监测终端，与电能质量信号采集单元联合准确度需满足本表要求。</label>
</div>
</el-dialog>
>
<el-table-column label="被测量">
<el-table-column prop="col1" width="150" />
<el-table-column prop="col2" width="120" />
</el-table-column>
<el-table-column prop="deviceLevel" label="检测装置级别" width="120" />
<el-table-column prop="measurementType" label="测量类型" />
<el-table-column prop="condition" label="测量条件" />
<el-table-column prop="maxErrorValue" label="最大误差" />
</el-table>
</div>
<div>
<label class="left-align-label">
注1：UN：测量的标称电压；IN：测量仪器的标称电流；Uh和Ih：测量值，h表示谐波次数。
</label>
</div>
<div>
<label class="left-align-label">
注2：对于数字式接入监测终端，与电能质量信号采集单元联合准确度需满足本表要求。
</label>
</div>
</el-dialog>
</template>
<script lang="ts" setup name="IndicatorTypeDialog">
import {computed, type CSSProperties, defineProps, ref} from 'vue';
import {dialogBig} from '@/utils/elementBind'
import type {ErrorSystem} from '@/api/device/interface/error'
import { computed, type CSSProperties, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import type { ErrorSystem } from '@/api/device/interface/error'
import errorDataList from '@/api/device/error/errorData'
import type {TableColumnCtx} from 'element-plus'
import {useDictStore} from '@/stores/modules/dict'
import type { TableColumnCtx } from 'element-plus'
import { useDictStore } from '@/stores/modules/dict'
const dictStore = useDictStore()
const errorData = ref<ErrorSystem.Error_detail[]>([]);
const errorData = ref<ErrorSystem.Error_detail[]>([])
const dialogTitle = ref()
const devLevelName = ref<string>('') // 假设 devLevelName 是一个 ref
function useMetaInfo() {
const dialogVisible = ref(false)
const formContent = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
standardName: '',
standardTime: '',
devLevel: '',
enable: 1,
state: 1,
})
return {dialogVisible, formContent}
const dialogVisible = ref(false)
const formContent = ref<ErrorSystem.ErrorSystemList>({
id: '',
name: '',
standardName: '',
standardTime: '',
devLevel: '',
enable: 1,
state: 1
})
return { dialogVisible, formContent }
}
const {dialogVisible, formContent} = useMetaInfo()
const { dialogVisible, formContent } = useMetaInfo()
interface SpanMethodProps {
row: ErrorSystem.ErrorSystemDetail
column: TableColumnCtx<ErrorSystem.ErrorSystemDetail>
rowIndex: number
columnIndex: number
row: ErrorSystem.ErrorSystemDetail
column: TableColumnCtx<ErrorSystem.ErrorSystemDetail>
rowIndex: number
columnIndex: number
}
const rowClass = ({row, column, rowIndex, columnIndex}: { row: any; column: any; rowIndex: number; columnIndex: number }): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}
if (rowIndex === 1) {
res = {...res, display: 'none'}
}
return res
const rowClass = ({
row,
column,
rowIndex,
columnIndex
}: {
row: any
column: any
rowIndex: number
columnIndex: number
}): CSSProperties => {
let res: CSSProperties = {
textAlign: 'center' as CSSProperties['textAlign'],
backgroundColor: 'var(--el-color-primary)',
color: '#fff'
}
if (rowIndex === 1) {
res = { ...res, display: 'none' }
}
return res
}
const spanMethod = computed(() => {
return devLevelName.value === 'A级' ? spanAMethod : spanSMethod
return devLevelName.value === 'A级' ? spanAMethod : spanSMethod
})
const spanAMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 7 || rowIndex == 20) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2,
}
const spanAMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 7 || rowIndex == 20) {
//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2
}
}
if (rowIndex === 2) {
//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2
}
}
if (
rowIndex === 3 ||
rowIndex === 4 ||
rowIndex === 6 ||
(rowIndex >= 9 && rowIndex <= 15) ||
(rowIndex >= 17 && rowIndex <= 19) ||
rowIndex === 22 ||
rowIndex === 24
) {
//这些行不显示
return {
rowspan: 0,
colspan: 0
}
}
if (rowIndex === 5 || rowIndex === 23) {
//5电压波动，23电压暂降暂升中断跨两列
return {
rowspan: 2,
colspan: 1
}
}
if (rowIndex === 8) {
//谐波和间谐波跨八行两列
return {
rowspan: 8,
colspan: 2
}
}
if (rowIndex === 16) {
//高频次谐波跨八行两列
return {
rowspan: 4,
colspan: 2
}
}
if (rowIndex === 21 || rowIndex === 22) {
//电流跨两行两列
return {
rowspan: 2,
colspan: 2
}
}
}
if (rowIndex === 2) {//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2,
}
if (columnIndex === 1) {
if (rowIndex <= 4 || (rowIndex >= 7 && rowIndex <= 22)) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 ||
rowIndex >= 9 && rowIndex <= 15 ||
rowIndex >= 17 && rowIndex <= 19 ||
rowIndex === 22 || rowIndex === 24) {//这些行不显示
return {
rowspan: 0,
colspan: 0,
}
if (columnIndex === 2 || columnIndex === 3) {
if (
rowIndex === 2 ||
rowIndex === 8 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 17 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 5 || rowIndex === 23) {//5电压波动，23电压暂降暂升中断跨两列
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 8) {//谐波和间谐波跨八行两列
return {
rowspan: 8,
colspan: 2,
}
}
if (rowIndex === 16) {//高频次谐波跨八行两列
return {
rowspan: 4,
colspan: 2,
}
}
if (rowIndex === 21 || rowIndex === 22) {//电流跨两行两列
return {
rowspan: 2,
colspan: 2,
}
}
}
if (columnIndex === 1) {
if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 2 || columnIndex === 3) {
if (rowIndex === 2 || rowIndex === 8 || rowIndex === 10 ||
rowIndex === 12 || rowIndex === 14 || rowIndex === 16 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 9 || rowIndex === 11 ||
rowIndex === 13 || rowIndex === 15 || rowIndex === 17 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
};
}
const spanSMethod = ({
row,
column,
rowIndex,
columnIndex,
}: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 8 || rowIndex == 17) {//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2,
}
const spanSMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
if (columnIndex === 0) {
if (rowIndex <= 1 || rowIndex === 8 || rowIndex == 17) {
//0电压偏差，1频率偏差，7闪变，20功率，简单的跨两列
return {
rowspan: 1,
colspan: 2
}
}
if (rowIndex === 2) {
//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2
}
}
if (
rowIndex === 3 ||
rowIndex === 4 ||
rowIndex === 6 ||
rowIndex === 7 ||
(rowIndex >= 10 && rowIndex <= 12) ||
(rowIndex >= 14 && rowIndex <= 16) ||
rowIndex === 19 ||
rowIndex === 21 ||
rowIndex === 22
) {
//这些行不显示
return {
rowspan: 0,
colspan: 0
}
}
if (rowIndex === 5 || rowIndex === 20) {
//5电压波动，23电压暂降暂升中断跨两行
return {
rowspan: 3,
colspan: 1
}
}
if (rowIndex === 9 || rowIndex === 13) {
//谐波和间谐波跨八行两列
return {
rowspan: 4,
colspan: 2
}
}
if (rowIndex === 18) {
//电流跨两行两列
return {
rowspan: 2,
colspan: 2
}
}
}
if (rowIndex === 2) {//2三相不平衡跨三行两列
return {
rowspan: 3,
colspan: 2,
}
if (columnIndex === 1) {
if (rowIndex === 6 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1
}
}
if (rowIndex <= 4 || (rowIndex >= 7 && rowIndex <= 19) || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 3 || rowIndex === 4 || rowIndex === 6 || rowIndex === 7 ||
rowIndex >= 10 && rowIndex <= 12 ||
rowIndex >= 14 && rowIndex <= 16 ||
rowIndex === 19 || rowIndex === 21 || rowIndex === 22) {//这些行不显示
return {
rowspan: 0,
colspan: 0,
}
if (columnIndex === 2) {
if (
rowIndex === 2 ||
rowIndex === 6 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 7 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 5 || rowIndex === 20) {//5电压波动，23电压暂降暂升中断跨两行
return {
rowspan: 3,
colspan: 1,
}
if (columnIndex === 3) {
if (
rowIndex === 2 ||
rowIndex === 6 ||
rowIndex === 9 ||
rowIndex === 11 ||
rowIndex === 13 ||
rowIndex === 15 ||
rowIndex === 18 ||
rowIndex === 21
) {
return {
rowspan: 2,
colspan: 1
}
}
if (
rowIndex === 3 ||
rowIndex === 7 ||
rowIndex === 10 ||
rowIndex === 12 ||
rowIndex === 14 ||
rowIndex === 16 ||
rowIndex === 19 ||
rowIndex === 22
) {
return {
rowspan: 0,
colspan: 0
}
}
}
if (rowIndex === 9 || rowIndex === 13) {//谐波和间谐波跨八行两列
return {
rowspan: 4,
colspan: 2,
}
}
if (rowIndex === 18) {//电流跨两行两列
return {
rowspan: 2,
colspan: 2,
}
}
}
if (columnIndex === 1) {
if (rowIndex === 6 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex <= 4 || rowIndex >= 7 && rowIndex <= 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 2) {
if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 ||
rowIndex === 11 || rowIndex === 13 || rowIndex === 15 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 7 ||
rowIndex === 10 || rowIndex === 12 ||
rowIndex === 14 || rowIndex === 16 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
if (columnIndex === 3) {
if (rowIndex === 2 || rowIndex === 6 || rowIndex === 9 ||
rowIndex === 11 || rowIndex === 13 || rowIndex === 15 ||
rowIndex === 18 || rowIndex === 21) {
return {
rowspan: 2,
colspan: 1,
}
}
if (rowIndex === 3 || rowIndex === 7 || rowIndex === 10 ||
rowIndex === 12 || rowIndex === 14 || rowIndex === 16 ||
rowIndex === 19 || rowIndex === 22) {
return {
rowspan: 0,
colspan: 0,
}
}
}
};
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
dialogVisible.value = false
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
dialogTitle.value = sign + ' 误差体系'
dialogVisible.value = true
dialogTitle.value = sign + ' 误差体系'
dialogVisible.value = true
if (data.id) {
formContent.value = data as ErrorSystem.ErrorSystemList;
devLevelName.value = dictStore.getDictData('Dev_Level').find(item => item.id === data.devLevel)?.name || '';
if (data.id) {
formContent.value = data as ErrorSystem.ErrorSystemList
devLevelName.value = dictStore.getDictData('Dev_Level').find(item => item.id === data.devLevel)?.name || ''
if (devLevelName.value === 'A级' || data.devLevel === 'A级') {
errorData.value = errorDataList.errorADetail as unknown as ErrorSystem.Error_detail[];
} else {
errorData.value = errorDataList.errorSDetail as unknown as ErrorSystem.Error_detail[];
if (devLevelName.value === 'A级' || data.devLevel === 'A级') {
errorData.value = errorDataList.errorADetail as unknown as ErrorSystem.Error_detail[]
} else {
errorData.value = errorDataList.errorSDetail as unknown as ErrorSystem.Error_detail[]
}
}
}
}
// 对外映射
defineExpose({open})
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
.table-container {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.custom-table {
margin-bottom: 20px; /* 调整表格和注释之间的间距 */
margin-bottom: 20px; /* 调整表格和注释之间的间距 */
}
.notes-container {
text-align: center;
width: 100%; /* 确保注释容器宽度与表格一致 */
text-align: center;
width: 100%; /* 确保注释容器宽度与表格一致 */
}
.notes-container label {
display: block; /* 使每个label标签上下排列 */
margin-bottom: 10px; /* 调整两个label之间的间距 */
display: block; /* 使每个label标签上下排列 */
margin-bottom: 10px; /* 调整两个label之间的间距 */
}
</style>

588
frontend/src/views/machine/errorSystem/components/errorSystemDetailTable.vue
View File

@@ -1,350 +1,372 @@
<template>
<div class="dialog-footer">
<el-button :icon='CirclePlus' type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon='Delete' type="danger" plain :disabled='!multipleSelection.length' @click="deleteSelectedRows">删除</el-button>
</div>
<div class="table-container">
<el-table :data="tableData"
:header-cell-style="{ textAlign: 'center',backgroundColor: 'var(--el-color-primary)',color: '#fff' } "
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px',maxHeight: '400px',overflow:'hidden'}"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="55"/>
<el-table-column prop="sort" label="序号" width="60"/>
<el-table-column prop="type" label="误差类型" min-width="180">
<template #default="{ row }">
<el-cascader style="min-width: 180px;"
:options="errorOptions"
v-model="row.errorType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择误差类型"
@change="handleErrorTypeChange($event, row)"/>
</template>
</el-table-column>
<el-table-column prop="type" label="脚本类型" min-width="230">
<template #default="{ row }">
<el-cascader style="min-width: 230px;"
:options="scriptOptions"
v-model="row.scriptType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择脚本类型"
@change="handleScriptTypeChange(row)"/>
</template>
</el-table-column>
<el-table-column label="起止范围">
<el-table-column label="起始" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select v-model="row.startFlag" placeholder="选择起始值" style="width: 70px;" @change="(value) => handleStartFlagChange(row, value)">
<el-option label="无" :value="2"></el-option>
<el-option label=">=" :value="1"></el-option>
<el-option label=">" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input v-model="row.startValue" style="width: 60px;" :disabled="isStartValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select v-model="row.endFlag" placeholder="选择结束值" style="width: 70px;" @change="(value) => handleEndFlagChange(row, value)">
<el-option label="无" :value="2"></el-option>
<el-option label="<=" :value="1"></el-option>
<el-option label="<" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input v-model="row.endValue" style="width: 60px;" :disabled="isEndValueDisabled[row.sort]"/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="130">
<template #default="{ row }">
<el-select v-model="row.conditionType" placeholder="选择单位">
<el-option
v-for="item in conditionTypes"
:key="item.id"
:label="item.name"
:value="Number(item.value)"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
<template #default="{ row }">
<el-input v-model="row.maxErrorValue" style="width: 70px;"/>
</template>
</el-table-column>
<el-table-column label="误差类型" width="170">
<template #default="{ row }">
<el-cascader :options="errorValueTypeOptions"
v-model="row.errorValueType"
@change="handleErrorValueTypeChange(row)"/>
</template>
</el-table-column>
<el-table-column label="误差单位" width="100" prop="errorUnit">
<template #default="{ row }">
<span>{{ row.errorUnit }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" min-width="150">
<template #default="{ row }">
<el-button type="primary" link :icon='CopyDocument' @click="copyRow(row)">复制</el-button>
<el-button type='primary' link :icon='Delete' @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="dialog-footer">
<el-button :icon="CirclePlus" type="primary" @click="openAddDialog">新增</el-button>
<el-button :icon="Delete" type="danger" plain :disabled="!multipleSelection.length" @click="deleteSelectedRows">
删除
</el-button>
</div>
<div class="table-container">
<el-table
:data="tableData"
:header-cell-style="{ textAlign: 'center', backgroundColor: 'var(--el-color-primary)', color: '#fff' }"
:cell-style="{ textAlign: 'center' }"
style="width: 100%"
:style="{ height: '400px', maxHeight: '400px', overflow: 'hidden' }"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55" />
<el-table-column prop="sort" label="序号" width="60" />
<el-table-column prop="type" label="误差类型" min-width="180">
<template #default="{ row }">
<el-cascader
style="min-width: 180px"
:options="errorOptions"
v-model="row.errorType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择误差类型"
@change="handleErrorTypeChange($event, row)"
/>
</template>
</el-table-column>
<el-table-column prop="type" label="脚本类型" min-width="230">
<template #default="{ row }">
<el-cascader
style="min-width: 230px"
:options="scriptOptions"
v-model="row.scriptType"
:props="{ checkStrictly: false, emitPath: false }"
placeholder="请选择脚本类型"
@change="handleScriptTypeChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="起止范围">
<el-table-column label="起始" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select
v-model="row.startFlag"
placeholder="选择起始值"
style="width: 70px"
@change="value => handleStartFlagChange(row, value)"
>
<el-option label="无" :value="2"></el-option>
<el-option label=">=" :value="1"></el-option>
<el-option label=">" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input
v-model="row.startValue"
style="width: 60px"
:disabled="isStartValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="结束" width="150">
<template #default="{ row }">
<el-row type="flex" :gutter="24">
<el-col :span="12">
<el-select
v-model="row.endFlag"
placeholder="选择结束值"
style="width: 70px"
@change="value => handleEndFlagChange(row, value)"
>
<el-option label="无" :value="2"></el-option>
<el-option label="<=" :value="1"></el-option>
<el-option label="<" :value="0"></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-input
v-model="row.endValue"
style="width: 60px"
:disabled="isEndValueDisabled[row.sort]"
/>
</el-col>
</el-row>
</template>
</el-table-column>
<el-table-column label="单位" width="130">
<template #default="{ row }">
<el-select v-model="row.conditionType" placeholder="选择单位">
<el-option
v-for="item in conditionTypes"
:key="item.id"
:label="item.name"
:value="Number(item.value)"
/>
</el-select>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="最大误差">
<el-table-column prop="maxErrorValue" label="最大误差值" width="100">
<template #default="{ row }">
<el-input v-model="row.maxErrorValue" style="width: 70px" />
</template>
</el-table-column>
<el-table-column label="误差类型" width="170">
<template #default="{ row }">
<el-cascader
:options="errorValueTypeOptions"
v-model="row.errorValueType"
@change="handleErrorValueTypeChange(row)"
/>
</template>
</el-table-column>
<el-table-column label="误差单位" width="100" prop="errorUnit">
<template #default="{ row }">
<span>{{ row.errorUnit }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column label="操作" min-width="150">
<template #default="{ row }">
<el-button type="primary" link :icon="CopyDocument" @click="copyRow(row)">复制</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteRow(row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script setup lang="ts">
import {type ErrorSystem} from '@/api/device/interface/error';
import {useDictStore,} from '@/stores/modules/dict'
import {CirclePlus, CopyDocument, Delete} from '@element-plus/icons-vue'
import {type CascaderOption} from 'element-plus';
import {defineEmits, type PropType, reactive, ref, watch} from 'vue';
import { type ErrorSystem } from '@/api/device/interface/error'
import { useDictStore } from '@/stores/modules/dict'
import { CirclePlus, CopyDocument, Delete } from '@element-plus/icons-vue'
import { type CascaderOption } from 'element-plus'
import { type PropType, reactive, ref, watch } from 'vue'
const emit = defineEmits(['updateTableData']);
const emit = defineEmits(['updateTableData'])
const multipleSelection = ref<number[]>([])
const dictStore = useDictStore()
const isStartValueDisabled = ref<{ [key: number]: boolean }>({});
const isEndValueDisabled = ref<{ [key: number]: boolean }>({});
const isStartValueDisabled = ref<{ [key: number]: boolean }>({})
const isEndValueDisabled = ref<{ [key: number]: boolean }>({})
const props = defineProps({
errorOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
errorOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
scriptOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
scriptOptions: {
type: Array as PropType<CascaderOption[]>,
required: true
},
tableData: {
type: Array as PropType<ErrorSystem.ErrorSystemDetail[]>,
default: () => []
}
});
tableData: {
type: Array as PropType<ErrorSystem.ErrorSystemDetail[]>,
default: () => []
}
})
const errorValueTypeOptions = reactive<{ value: number, label: string, children: { value: number, label: string }[] }[]>([])
const errorValueTypeOptions = reactive<
{ value: number; label: string; children: { value: number; label: string }[] }[]
>([])
const conditionTypes = dictStore.getDictData('Condition_Type')
const errorValueTypes = dictStore.getDictData('Error_Value_Type')
const valueTypes = dictStore.getDictData('Script_Value_Type')
onBeforeMount(() => {
valueTypes.forEach(item1 => {
let children = []
for (let i = 0; i < errorValueTypes.length; i++) {
if (item1.value === '2' && errorValueTypes[i].value === '2') {
continue
}
children.push({label: errorValueTypes[i].name, value: Number(errorValueTypes[i].value)})
}
errorValueTypeOptions.push({label: item1.name, value: Number(item1.value), children: children})
})
valueTypes.forEach(item1 => {
let children = []
for (let i = 0; i < errorValueTypes.length; i++) {
if (item1.value === '2' && errorValueTypes[i].value === '2') {
continue
}
children.push({ label: errorValueTypes[i].name, value: Number(errorValueTypes[i].value) })
}
errorValueTypeOptions.push({ label: item1.name, value: Number(item1.value), children: children })
})
})
const handleErrorTypeChange = (value: any, row: any) => {
// const matchedRow = findRowById(row.errorType, props.errorOptions);//选中误差id找对应结构中的含chilren的code
// console.log('matchedRow.code',matchedRow.code)
// const code = errSysAndScriptMap.get(matchedRow?.code || '') || ''; // 确保 code 不为 undefined
// console.log('code',code)
// if (code) {
// const matchedRow2 = findRowByCode(code, props.scriptOptions);//误差code映射脚本code，找对应脚本结构中含children的id
// console.log('matchedRow2',matchedRow2)
// if (matchedRow2) {
// row.scriptType = matchedRow2.value;
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// const matchedRow = findRowById(row.errorType, props.errorOptions);//选中误差id找对应结构中的含chilren的code
// console.log('matchedRow.code',matchedRow.code)
// const code = errSysAndScriptMap.get(matchedRow?.code || '') || ''; // 确保 code 不为 undefined
// console.log('code',code)
// if (code) {
// const matchedRow2 = findRowByCode(code, props.scriptOptions);//误差code映射脚本code，找对应脚本结构中含children的id
// console.log('matchedRow2',matchedRow2)
// if (matchedRow2) {
// row.scriptType = matchedRow2.value;
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
// }else{
// row.scriptType = '';//如果没有找到匹配的脚本，置空
// }
}
const handleScriptTypeChange = (row: any) => {
handleErrorValueTypeChange(row)
handleErrorValueTypeChange(row)
}
const handleErrorValueTypeChange = (row: any) => {
let scriptType = findRowById(row.scriptType, props.scriptOptions)
if (scriptType) {
const errorValueType = row.errorValueType
let level1 = errorValueType[0]
let scriptType = findRowById(row.scriptType, props.scriptOptions)
if (scriptType) {
const errorValueType = row.errorValueType
let level1 = errorValueType[0]
switch (level1) {
case 1: // 绝对值
row.valueType = 1
row.errorUnit = scriptType.remark
break;
case 2: // 相对值
row.valueType = 2
row.errorUnit = "%"
break;
default:
break;
switch (level1) {
case 1: // 绝对值
row.valueType = 1
row.errorUnit = scriptType.remark
break
case 2: // 相对值
row.valueType = 2
row.errorUnit = '%'
break
default:
break
}
}
}
}
// 假设 props.errorOptions 是一个数组，每个元素可能包含 children 属性
const findRowById = (id: string, options: any[]): any | null => {
for (const option of options) {
if (option.value === id) {
return option;
for (const option of options) {
if (option.value === id) {
return option
}
if (option.children && option.children.length > 0) {
const result = findRowById(id, option.children)
if (result) {
return result
}
}
}
if (option.children && option.children.length > 0) {
const result = findRowById(id, option.children);
if (result) {
return result;
}
}
}
return null;
};
return null
}
// 假设 props.errorOptions 是一个数组，每个元素可能包含 children 属性
const findRowByCode = (code: string, options: any[]): any | null => {
for (const option of options) {
if (option.code === code) {
return option;
for (const option of options) {
if (option.code === code) {
return option
}
if (option.children && option.children.length > 0) {
const result = findRowByCode(code, option.children)
if (result) {
return result
}
}
}
if (option.children && option.children.length > 0) {
const result = findRowByCode(code, option.children);
if (result) {
return result;
}
}
}
return null;
};
return null
}
// 监听 props.tableData 的变化，确保每次数据变化时都重新设置 sort
watch(() => props.tableData, async (newTableData) => {
for (let i = 0; i < newTableData.length; i++) {
newTableData[i].sort = i + 1;
if (newTableData[i].startFlag === 2) {
newTableData[i].startValue = null; // 设置 startValue 为 null
}
if (newTableData[i].endFlag === 2) {
newTableData[i].endValue = null; // 设置 endValue 为 null
}
}
// 重新设置 isStartValueDisabled 和 isEndValueDisabled,并清空输入框
props.tableData.forEach(row => {
isStartValueDisabled.value[row.sort] = row.startFlag === 2;
});
props.tableData.forEach(row => {
isEndValueDisabled.value[row.sort] = row.endFlag === 2;
});
}, {immediate: true});
watch(
() => props.tableData,
async newTableData => {
for (let i = 0; i < newTableData.length; i++) {
newTableData[i].sort = i + 1
if (newTableData[i].startFlag === 2) {
newTableData[i].startValue = null // 设置 startValue 为 null
}
if (newTableData[i].endFlag === 2) {
newTableData[i].endValue = null // 设置 endValue 为 null
}
}
// 重新设置 isStartValueDisabled 和 isEndValueDisabled,并清空输入框
props.tableData.forEach(row => {
isStartValueDisabled.value[row.sort] = row.startFlag === 2
})
props.tableData.forEach(row => {
isEndValueDisabled.value[row.sort] = row.endFlag === 2
})
},
{ immediate: true }
)
// 处理 startFlag 变化的方法
const handleStartFlagChange = (row: ErrorSystem.ErrorSystemDetail, value: number) => {
if (value === 2) {
row.startValue = null; // 清空输入框
isStartValueDisabled.value[row.sort] = true; // 禁用输入框
} else {
isStartValueDisabled.value[row.sort] = false; // 启用输入框
}
};
if (value === 2) {
row.startValue = null // 清空输入框
isStartValueDisabled.value[row.sort] = true // 禁用输入框
} else {
isStartValueDisabled.value[row.sort] = false // 启用输入框
}
}
// 处理 endFlag 变化的方法
const handleEndFlagChange = (row: ErrorSystem.ErrorSystemDetail, value: number) => {
if (value === 2) {
row.endValue = null; // 清空输入框
isEndValueDisabled.value[row.sort] = true; // 禁用输入框
} else {
isEndValueDisabled.value[row.sort] = false; // 启用输入框
}
};
if (value === 2) {
row.endValue = null // 清空输入框
isEndValueDisabled.value[row.sort] = true // 禁用输入框
} else {
isEndValueDisabled.value[row.sort] = false // 启用输入框
}
}
//选中
const handleSelectionChange = (selection: ErrorSystem.ErrorSystemDetail[]) => {
multipleSelection.value = selection.map(row => row.sort); // 更新选中的行
};
multipleSelection.value = selection.map(row => row.sort) // 更新选中的行
}
//新增
const openAddDialog = () => {
// 获取字典数据
// 获取字典数据
const newRow = {
sort: props.tableData.length + 1,
id: '',
startFlag: 2,
endFlag: 2,
conditionType: conditionTypes.length > 0 ? Number(conditionTypes[0].value) : 0, // 设置默认值为第一个选项的值
valueType: valueTypes.length > 0 ? Number(valueTypes[0].value) : 1,
errorValueType: [errorValueTypeOptions[0].value, errorValueTypeOptions[0].children[0].value],
errorSysId: '',
errorType: '',
scriptType: '',
maxErrorValue: 0
}
const newRow = {
sort: props.tableData.length + 1,
id: '',
startFlag: 2,
endFlag: 2,
conditionType: conditionTypes.length > 0 ? Number(conditionTypes[0].value) : 0, // 设置默认值为第一个选项的值
valueType: valueTypes.length > 0 ? Number(valueTypes[0].value) : 1,
errorValueType: [errorValueTypeOptions[0].value, errorValueTypeOptions[0].children[0].value],
errorSysId: "",
errorType: "",
scriptType: "",
maxErrorValue: 0
};
emit('updateTableData', [...props.tableData, newRow]);
};
emit('updateTableData', [...props.tableData, newRow])
}
const copyRow = (row: ErrorSystem.ErrorSystemDetail) => {
// 深拷贝行数据
const newRow = {...row};
const maxNextId = Math.max(...props.tableData.map(item => item.sort), 0);
newRow.sort = maxNextId + 1;
emit('updateTableData', [...props.tableData, newRow]);
};
// 深拷贝行数据
const newRow = { ...row }
const maxNextId = Math.max(...props.tableData.map(item => item.sort), 0)
newRow.sort = maxNextId + 1
emit('updateTableData', [...props.tableData, newRow])
}
//删除行
const deleteRow = (row: ErrorSystem.ErrorSystemDetail) => {
const index = props.tableData.indexOf(row);
if (index !== -1) {
const newTableData = [...props.tableData];
newTableData.splice(index, 1);
emit('updateTableData', newTableData);
}
};
const index = props.tableData.indexOf(row)
if (index !== -1) {
const newTableData = [...props.tableData]
newTableData.splice(index, 1)
emit('updateTableData', newTableData)
}
}
//批量删除选中行
const deleteSelectedRows = () => {
const newTableData = props.tableData.filter(row => !multipleSelection.value.includes(row.sort));
multipleSelection.value = []; // 清空已选择的行
emit('updateTableData', newTableData);
};
const newTableData = props.tableData.filter(row => !multipleSelection.value.includes(row.sort))
multipleSelection.value = [] // 清空已选择的行
emit('updateTableData', newTableData)
}
</script>
<style scoped>
.dialog-footer {
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
margin-top: 10px;
display: flex;
justify-content: flex-start;
margin-bottom: 10px; /* 调整这里的值以增加或减少间距 */
margin-top: 10px;
}
.el-table th, .el-table td {
text-align: center; /* 所有单元格文字居中 */
.el-table th,
.el-table td {
text-align: center; /* 所有单元格文字居中 */
}
.table-container {
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
max-height: 400px; /* 根据需要调整高度 */
overflow-y: auto; /* 允许垂直滚动 */
overflow-x: hidden; /* 隐藏水平滚动条 */
}
</style>

324
frontend/src/views/machine/errorSystem/components/errorSystemPopup.vue
View File

@@ -1,30 +1,49 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" width="1660px" align-center>
<el-dialog
:title="dialogTitle"
v-model="dialogVisible"
@close="close"
v-bind="dialogBig"
width="1660px"
align-center
>
<el-tabs type="border-card">
<el-tab-pane label="基础信息">
<div>
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' label-width="auto" class="form-four">
<el-form-item label="标准号" prop="standardName" >
<el-input v-model='formContent.standardName' placeholder="请填写标准号" maxlength="32" show-word-limit/>
<el-form
:model="formContent"
ref="dialogFormRef"
:rules="rules"
label-width="auto"
class="form-four"
>
<el-form-item label="标准号" prop="standardName">
<el-input
v-model="formContent.standardName"
placeholder="请填写标准号"
maxlength="32"
show-word-limit
/>
</el-form-item>
<el-form-item label="标准推行年份" prop="standardTime" >
<el-form-item label="标准推行年份" prop="standardTime">
<el-date-picker
v-model="formContent.standardTime"
type="year"
placeholder="请选择标准推行年份"
/>
/>
</el-form-item>
<el-form-item label="适用设备等级" prop="devLevel" >
<el-select v-model='formContent.devLevel' placeholder="请选择设备等级">
<el-form-item label="适用设备等级" prop="devLevel">
<el-select v-model="formContent.devLevel" placeholder="请选择设备等级">
<el-option
v-for="item in dictStore.getDictData('Dev_Level')"
:key="item.id"
:label="item.name"
:value="item.id"/>
v-for="item in dictStore.getDictData('Dev_Level')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="enable" >
<el-select v-model='formContent.enable' placeholder="请选择状态">
<el-form-item label="状态" prop="enable">
<el-select v-model="formContent.enable" placeholder="请选择状态">
<el-option label="启用" :value="1"></el-option>
<el-option label="停用" :value="0"></el-option>
</el-select>
@@ -34,43 +53,44 @@
</el-tab-pane>
</el-tabs>
<ErrorSystemDetailTable :tableData="tableData" :errorOptions="errorOptions" :scriptOptions="scriptOptions" @updateTableData="handleTableDataUpdate" />
<ErrorSystemDetailTable
:tableData="tableData"
:errorOptions="errorOptions"
:scriptOptions="scriptOptions"
@updateTableData="handleTableDataUpdate"
/>
<template #footer>
<div >
<el-button @click='close()'>取 消</el-button>
<el-button type="primary" @click='save()'>保存</el-button>
<div>
<el-button @click="close()">取 消</el-button>
<el-button type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import{type CascaderOption, ElMessage, type FormInstance,type FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, type Ref, computed } from 'vue';
import { dialogBig} from '@/utils/elementBind'
import { addPqErrSys,updatePqErrSys,getPqErrSysListById} from '@/api/device/error/index'
import {CirclePlus, Delete, EditPen,FolderOpened,CopyDocument} from '@element-plus/icons-vue'
import { useDictStore } from '@/stores/modules/dict'
import { type ErrorSystem } from '@/api/device/interface/error';
import ErrorSystemDetailTable from '@/views/machine/errorSystem/components/errorSystemDetailTable.vue';
import {getDictTreeByCode} from '@/api/system/dictionary/dictTree'
import { type Dict } from '@/api/system/dictionary/interface';
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const tableData = ref<ErrorSystem.ErrorSystemDetail[]>([]);
const errorOptions: Ref<CascaderOption[]> = ref([]); // 修改这里
const scriptOptions: Ref<CascaderOption[]> = ref([]); // 修改这里
<script lang="ts" setup name="ErrorSystemDialog">
import { type CascaderOption, ElMessage, type FormItemRule } from 'element-plus'
import { computed, type Ref, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import { addPqErrSys, getPqErrSysListById, updatePqErrSys } from '@/api/device/error/index'
import { useDictStore } from '@/stores/modules/dict'
import { type ErrorSystem } from '@/api/device/interface/error'
import ErrorSystemDetailTable from '@/views/machine/errorSystem/components/errorSystemDetailTable.vue'
import { getDictTreeByCode } from '@/api/system/dictionary/dictTree'
import { type Dict } from '@/api/system/dictionary/interface'
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
const tableData = ref<ErrorSystem.ErrorSystemDetail[]>([])
const errorOptions: Ref<CascaderOption[]> = ref([]) // 修改这里
const scriptOptions: Ref<CascaderOption[]> = ref([]) // 修改这里
const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) => {
tableData.value = newTableData;
};
tableData.value = newTableData
}
function useMetaInfo() {
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<ErrorSystem.ErrorSystemList>({
@@ -80,15 +100,15 @@ const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) =>
standardTime: '',
devLevel: '',
enable: 1,
state:1,
pqErrSysDtlsList:[]
state: 1,
pqErrSysDtlsList: []
})
return { dialogVisible, titleType, formContent }
}
}
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
name: '',
@@ -96,164 +116,154 @@ const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) =>
standardTime: '',
devLevel: '',
enable: 1,
state:1,
pqErrSysDtlsList:[]
state: 1,
pqErrSysDtlsList: []
}
tableData.value =[]
}
tableData.value = []
}
let dialogTitle = computed(() => {
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
})
})
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{ required: true, message: '误差体系名称必填！', trigger: 'blur' }],
standardName: [{ required: true, message: '参照标准名称必填！', trigger: 'blur' }],
standardTime: [{ required: true, message: '标准推行年份必选！', trigger: 'blur' }],
devLevel:[{ required: true, message: '请选择一项设备等级', trigger: 'change' },],
enable:[{ required: true, message: '请选择一项状态', trigger: 'change '},]
});
devLevel: [{ required: true, message: '请选择一项设备等级', trigger: 'change' }],
enable: [{ required: true, message: '请选择一项状态', trigger: 'change ' }]
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
// 确保 standardTime 是 Date 对象
if (formContent.value.standardTime) {
const date = new Date(formContent.value.standardTime);
formContent.value.standardTime = date.getFullYear().toString();
// 确保 standardTime 是 Date 对象
if (formContent.value.standardTime) {
const date = new Date(formContent.value.standardTime)
formContent.value.standardTime = date.getFullYear().toString()
}
formContent.value.pqErrSysDtlsList = tableData.value
formContent.value.pqErrSysDtlsList.forEach((item) => {
item.errorValueType=item.errorValueType[1]
})
formContent.value.pqErrSysDtlsList.forEach(item => {
item.errorValueType = item.errorValueType[1]
})
if (formContent.value.id) {
await updatePqErrSys(formContent.value);
await updatePqErrSys(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
} else {
await addPqErrSys(formContent.value);
await addPqErrSys(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 封装提取第二层节点的逻辑
}
// 封装提取第二层节点的逻辑
const loadSecondLevelOptions = async () => {
const dictCode = 'Err_Sys_Items'; // 替换为实际需要的字典代码
const dictCode2 = 'Script_Error'; // 替换为实际需要的字典代码
const dictCode = 'Err_Sys_Items' // 替换为实际需要的字典代码
const dictCode2 = 'Script_Error' // 替换为实际需要的字典代码
const resDictTree: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode,
sort: 0
};
const resDictTree2: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode2,
sort: 0
};
// 并行请求两个字典树列表
const [result, result2] = await Promise.all([
getDictTreeByCode(resDictTree),
getDictTreeByCode(resDictTree2)
]);
const allOptions = convertToOptions(result.data as Dict.ResDictTree[]);
const allOptions2 = convertToOptions(result2.data as Dict.ResDictTree[]);
// 提取第二层节点
const secondLevelOptions: any[] = [];
allOptions.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions.push(...option.children);
const resDictTree: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode,
sort: 0
}
});
const secondLevelOptions2: any[] = [];
allOptions2.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions2.push(...option.children);
const resDictTree2: Dict.ResDictTree = {
name: '',
id: '',
pid: '',
pids: '',
code: dictCode2,
sort: 0
}
});
// 将第二层节点赋值给 options.value
errorOptions.value = secondLevelOptions;
scriptOptions.value = secondLevelOptions2;
};
// 并行请求两个字典树列表
const [result, result2] = await Promise.all([getDictTreeByCode(resDictTree), getDictTreeByCode(resDictTree2)])
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
const allOptions = convertToOptions(result.data as Dict.ResDictTree[])
const allOptions2 = convertToOptions(result2.data as Dict.ResDictTree[])
// 提取第二层节点
const secondLevelOptions: any[] = []
allOptions.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions.push(...option.children)
}
})
const secondLevelOptions2: any[] = []
allOptions2.forEach(option => {
if (option.children && option.children.length > 0) {
secondLevelOptions2.push(...option.children)
}
})
// 将第二层节点赋值给 options.value
errorOptions.value = secondLevelOptions
scriptOptions.value = secondLevelOptions2
}
// 转换函数
const convertToOptions = (dictTree: Dict.ResDictTree[]): CascaderOption[] => {
return dictTree.map(item => ({
value: item.id,
label: item.name,
code: item.code,
children: item.children ? convertToOptions(item.children) : undefined,
remark: item.remark
}));
};
}))
}
// 打开弹窗，可能是新增，也可能是编辑
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: ErrorSystem.ErrorSystemList) => {
titleType.value = sign;
titleType.value = sign
// 并行执行两个异步操作
const loadOptionsPromise = loadSecondLevelOptions();
const fetchDataPromise = data.id ? getPqErrSysListById(data) : Promise.resolve(null);
// 并行执行两个异步操作
const loadOptionsPromise = loadSecondLevelOptions()
const fetchDataPromise = data.id ? getPqErrSysListById(data) : Promise.resolve(null)
const [_, result] = await Promise.all([loadOptionsPromise, fetchDataPromise]);
const [_, result] = await Promise.all([loadOptionsPromise, fetchDataPromise])
if (result && result.data) {
formContent.value = result.data as ErrorSystem.ErrorSystemList;
tableData.value = formContent.value.pqErrSysDtlsList || [];
tableData.value.forEach((item) => {
item.errorValueType=[item.valueType,item.errorValueType]
})
} else {
resetFormContent();
}
// 重置表单
dialogFormRef.value?.resetFields();
dialogVisible.value = true;
};
if (result && result.data) {
formContent.value = result.data as ErrorSystem.ErrorSystemList
tableData.value = formContent.value.pqErrSysDtlsList || []
tableData.value.forEach(item => {
item.errorValueType = [item.valueType, item.errorValueType]
})
} else {
resetFormContent()
}
// 重置表单
dialogFormRef.value?.resetFields()
dialogVisible.value = true
}
// 对外映射
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
</style>
<style></style>

46
frontend/src/views/machine/testScript/components/testScriptDetail.vue
View File

@@ -7,7 +7,7 @@
</div>
<div class="data-check-content">
<div class="content-tree" :style="{ height: `calc(100vh - ${props.shrink ? '370px' : '315px'})` }">
<Tree :treeData="treeData" @setTab="setTab" />
<TestScriptTree :treeData="treeData" @setTab="setTab" />
</div>
<div
@@ -19,17 +19,18 @@
<el-tab-pane v-for="tab in tabData" :key="tab.value" :label="tab.label" :name="tab.value">
<div v-if="activeName == tab.value">
<div class="dialog-footer">
<el-switch v-model="value1"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="禁用"
inactive-text="启用"
@change="enableScript"
size="large"
width="80px"
style="margin-right: 10px;"
/>
<el-switch
v-model="value1"
inline-prompt
:active-value="1"
:inactive-value="0"
active-text="禁用"
inactive-text="启用"
@change="enableScript"
size="large"
width="80px"
style="margin-right: 10px"
/>
<el-button :icon="CirclePlus" type="primary" @click="openDialog('add')">新增</el-button>
</div>
<div style="display: flex">
@@ -215,20 +216,21 @@
</template>
<script setup lang="ts">
import { type PropType, ref, nextTick } from 'vue'
import Tree from './tree.vue'
import { type PropType, ref } from 'vue'
import TestScriptTree from './testScriptTree.vue'
import Commun from './communication.vue'
import { type CascaderOption, ElMessageBox } from 'element-plus'
import { ElMessageBox } from 'element-plus'
import { getTreeData } from '@/api/check/test'
import { CirclePlus, Delete, Check, CopyDocument, View, EditPen } from '@element-plus/icons-vue'
import { CirclePlus, CopyDocument, Delete, EditPen, View } from '@element-plus/icons-vue'
import type { TestScript } from '@/api/device/interface/testScript'
import TestProjectPopup from '@/views/machine/testScript/components/testProjectPopup.vue'
import { CheckData } from '@/api/check/interface'
import { dlsDetails, deleteDtls, updateDtls, addScriptDtls, checkDataList } from '@/api/device/testScript'
import { addScriptDtls, deleteDtls, dlsDetails, updateDtls } from '@/api/device/testScript'
import { useDictStore } from '@/stores/modules/dict'
import { useHandleData } from '@/hooks/useHandleData'
import { scriptDtlsCheckDataList } from '@/api/device/testScript/index'
import ViewRow from '@/views/machine/testScript/components/viewRow.vue'
interface TabOption {
label?: string
name?: string
@@ -280,7 +282,7 @@ const column = ref([
])
// 获取树
const getTree = () => {
// console.log('props.formContent.id', props.formContent.id)
// console.log('props.formContent.id', props.formContent.id)
getTreeData({
scriptId: props.formContent.id
}).then(res => {
@@ -370,8 +372,6 @@ const inquireTable = () => {
value1.value = tableData.value.some(item => item.enable === 1) ? 1 : 0
}
})
}
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestScript.ResTestScript> = {}) => {
@@ -420,7 +420,7 @@ const copyRow = async (row: any) => {
// 查看
const view = (row: Partial<TestScript.ResTestScript> = {}) => {
getCommunication()
// console.log('communicationList', communicationList.value)
// console.log('communicationList', communicationList.value)
//当前点击的一级tab
const parentTabName = communicationList.value.find(t => t.id === activeName.value)?.name || '未找到对应名称'
//当前点击的二级tab
@@ -466,7 +466,6 @@ const enableRow = async (row: any) => {
})
}
// 启用/禁用脚本的方法
const enableScript = async () => {
const willEnable = value1.value === 1
@@ -496,7 +495,6 @@ const enableScript = async () => {
}
}
// 获取左边树数据
// 新增保存
const addTab = (row: any) => {
@@ -537,7 +535,6 @@ onMounted(() => {
overflow-x: hidden;
}
/* 确保 el-tree 内容可以超出容器宽度 */
.el-tree {
width: fit-content; /* 根据内容自适应宽度 */
@@ -553,7 +550,6 @@ onMounted(() => {
margin-bottom: 10px;
}
.divider-container {
display: flex;
}

0
frontend/src/views/machine/testScript/components/tree.vue → frontend/src/views/machine/testScript/components/testScriptTree.vue
View File

217
frontend/src/views/machine/testSource/components/parameterPopup.vue
View File

@@ -1,101 +1,100 @@
<template>
<el-dialog v-model="dialogVisible" :title="dialogTitle"
v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
<el-form-item label="参数所属" prop="pId" :label-width="100">
<el-tree-select
v-model="displayPid"
:data="tableData"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="源参数描述" :label-width="100" prop="desc">
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="源参数类型" :label-width="100" prop="type">
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit/>
</el-form-item>
<el-form-item label="源参数值" :label-width="100"
prop="value">
<el-input v-model="formContent.value" autocomplete="off"/>
</el-form-item>
<el-form-item label="排序" :label-width="100">
<el-input-number v-model="formContent.sort" :min='1' :max='999'/>
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">
保存
</el-button>
</div>
</template>
</el-dialog>
<el-dialog v-model="dialogVisible" :title="dialogTitle" v-bind="dialogSmall" @close="close" align-center>
<div>
<el-form :model="formContent" ref="dialogFormRef" :rules="rules">
<el-form-item label="参数所属" prop="pId" :label-width="100">
<el-tree-select
v-model="displayPid"
:data="tableData"
check-strictly
:render-after-expand="false"
show-checkbox
check-on-click-node
node-key="id"
:props="defaultProps"
/>
</el-form-item>
<el-form-item label="源参数描述" :label-width="100" prop="desc">
<el-input v-model="formContent.desc" autocomplete="off" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="源参数类型" :label-width="100" prop="type">
<el-input v-model="formContent.type" autocomplete="off" maxlength="32" show-word-limit />
</el-form-item>
<el-form-item label="源参数值" :label-width="100" prop="value">
<el-input v-model="formContent.value" autocomplete="off" />
</el-form-item>
<el-form-item label="排序" :label-width="100">
<el-input-number v-model="formContent.sort" :min="1" :max="999" />
</el-form-item>
</el-form>
</div>
<template #footer>
<div class="dialog-footer">
<el-button @click="close()">取消</el-button>
<el-button type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script setup lang="ts">
import {computed, defineEmits, reactive, watch} from 'vue'
import {dialogSmall} from "@/utils/elementBind"
import {TestSource} from "@/api/device/interface/testSource"
import {ElMessage, FormItemRule} from "element-plus"
import { computed, reactive } from 'vue'
import { dialogSmall } from '@/utils/elementBind'
import { type TestSource } from '@/api/device/interface/testSource'
import { type FormItemRule } from 'element-plus'
defineProps<{
tableData: TestSource.ParameterType[]
tableData: TestSource.ParameterType[]
}>()
const emit = defineEmits(['get-parameter'])
// 计算属性，用于控制显示的 pid
const displayPid = computed({
get: () => {
return formContent.pId === '0' ? '' : formContent.pId;
},
set: (value) => {
formContent.pId = value;
}
});
get: () => {
return formContent.pId === '0' ? '' : formContent.pId
},
set: value => {
formContent.pId = value
}
})
// 树形节点配置
const defaultProps = {
children: 'children',
label: 'desc',
value: 'id'
};
children: 'children',
label: 'desc',
value: 'id'
}
const dialogFormRef = ref()
const {dialogVisible, titleType, formContent} = useMetaInfo()
const { dialogVisible, titleType, formContent } = useMetaInfo()
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = reactive<TestSource.ParameterType>({
id: "",
type: "",
value: null,
desc: "",
sort: 100,
pId: "0",
})
const formContent = reactive<TestSource.ParameterType>({
id: '',
type: '',
value: null,
desc: '',
sort: 100,
pId: '0'
})
return {dialogVisible, titleType, formContent}
return { dialogVisible, titleType, formContent }
}
const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
desc: [{required: true, message: '源参数描述必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
type: [{required: true, message: '源参数类型必填！', trigger: 'blur'},{min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur'}],
sort: [{required: true, message: '排序必填！', trigger: 'blur'}]
desc: [
{ required: true, message: '源参数描述必填！', trigger: 'blur' },
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
],
type: [
{ required: true, message: '源参数类型必填！', trigger: 'blur' },
{ min: 1, max: 32, message: '长度为1~32个字符', trigger: 'blur' }
],
sort: [{ required: true, message: '排序必填！', trigger: 'blur' }]
})
// watch(() => formContent.pId, (newVal, oldVal) => {
@@ -108,54 +107,52 @@ const rules: reactive<Record<string, Array<FormItemRule>>> = reactive({
// })
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
return titleType.value === 'add' ? '新增源参数' : '编辑源参数'
})
const resetFormContent = () => {
Object.assign(formContent, {
id: "",
type: "",
value: null,
desc: "",
sort: 100,
pId: "0",
})
Object.assign(formContent, {
id: '',
type: '',
value: null,
desc: '',
sort: 100,
pId: '0'
})
}
const open = (sign: string, data: TestSource.ParameterType) => {
// 重置表单
dialogFormRef.value?.resetFields()
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
resetFormContent()
titleType.value = sign
dialogVisible.value = true
if (data.id) {
Object.assign(formContent, data)
}
titleType.value = sign
dialogVisible.value = true
if (data.id) {
Object.assign(formContent, data)
}
}
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let newUpdateParameter = toRaw({...formContent})
delete newUpdateParameter.children
emit('get-parameter', newUpdateParameter)
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
let newUpdateParameter = toRaw({ ...formContent })
delete newUpdateParameter.children
emit('get-parameter', newUpdateParameter)
close()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
const close = () => {
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
dialogVisible.value = false
resetFormContent()
dialogFormRef.value?.resetFields()
}
defineExpose({open})
defineExpose({ open })
</script>
<style scoped>
</style>
<style scoped></style>

448
frontend/src/views/machine/testSource/components/parameterTable.vue
View File

@@ -1,280 +1,298 @@
<template>
<div class='table-box' >
<ProTable
ref='proTable'
:columns='columns'
:pagination="false"
:toolButton="false"
:data="tableData"
row-key="id"
:style="{ height: '250px',maxHeight: '400px',overflow:'hidden'}"
:expand-row-keys="defaultExpandRowKeys"
>
<!-- 表格 header 按钮 -->
<template #tableHeader='scope'>
<el-button :disabled="isDisable" v-auth.testSource="'add'" type='primary' :icon='CirclePlus' @click="openDialog('add')">新增
</el-button>
<el-button v-auth.testSource="'delete'" type='danger' :icon='Delete'
plain :disabled='isDisable || !scope.isSelected' @click='batchDelete(scope.selectedListIds)'>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation='scope'>
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
<el-button :disabled="isDisable" type='primary' link :icon='EditPen' @click="openDialog('edit', scope.row)">编辑</el-button>
<el-button :disabled="isDisable" type='primary' link :icon='Delete' @click='handleDelete(scope.row.id)'>删除</el-button>
</template>
</ProTable>
</div>
<ParameterPopup @getParameter="getParameter" ref='parameterPopup' :tableData="tableData"/>
<div class="table-box">
<ProTable
ref="proTable"
:columns="columns"
:pagination="false"
:toolButton="false"
:data="tableData"
row-key="id"
:style="{ height: '250px', maxHeight: '400px', overflow: 'hidden' }"
:expand-row-keys="defaultExpandRowKeys"
>
<!-- 表格 header 按钮 -->
<template #tableHeader="scope">
<el-button
:disabled="isDisable"
v-auth.testSource="'add'"
type="primary"
:icon="CirclePlus"
@click="openDialog('add')"
>
新增
</el-button>
<el-button
v-auth.testSource="'delete'"
type="danger"
:icon="Delete"
plain
:disabled="isDisable || !scope.isSelected"
@click="batchDelete(scope.selectedListIds)"
>
删除
</el-button>
</template>
<!-- 表格操作 -->
<template #operation="scope">
<!-- <el-button type="primary" link :icon='CopyDocument' @click="copyRow(scope.row)">复制</el-button> -->
<el-button
:disabled="isDisable"
type="primary"
link
:icon="EditPen"
@click="openDialog('edit', scope.row)"
>
编辑
</el-button>
<el-button :disabled="isDisable" type="primary" link :icon="Delete" @click="handleDelete(scope.row.id)">
删除
</el-button>
</template>
</ProTable>
</div>
<ParameterPopup @getParameter="getParameter" ref="parameterPopup" :tableData="tableData" />
</template>
<script setup lang='tsx' name='useRole'>
import {type TestSource} from '@/api/device/interface/testSource'
<script setup lang="tsx" name="useRole">
import { type TestSource } from '@/api/device/interface/testSource'
import ProTable from '@/components/ProTable/index.vue'
import type {ColumnProps, ProTableInstance} from '@/components/ProTable/interface'
import {CirclePlus, CopyDocument, Delete, EditPen} from '@element-plus/icons-vue'
import {useDictStore} from '@/stores/modules/dict'
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue';
import {reactive, ref, watch} from 'vue'
import {generateUUID} from "@/styles";
import {defineEmits} from "vue/dist/vue";
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { CirclePlus, Delete, EditPen } from '@element-plus/icons-vue'
import ParameterPopup from '@/views/machine/testSource/components/parameterPopup.vue'
import { reactive, ref, watch } from 'vue'
import { generateUUID } from '@/styles'
import { ElMessage, ElMessageBox } from 'element-plus'
const parameterPopup = ref()
const dictStore = useDictStore()
const btnDelete = ref(false)
// ProTable 实例
const proTable = ref<ProTableInstance>()
const tableData = ref<any[]>([])
const props = defineProps({
parameterStr: {
type: String,
required: true,
},
isDisable: {
type: Boolean,
default: false,
},
});
const props = defineProps({
parameterStr: {
type: String,
required: true
},
isDisable: {
type: Boolean,
default: false
}
})
const emit = defineEmits(['change-parameter'])
let originalParameterArr=reactive<TestSource.ParameterType[]>([])
let originalParameterArr = reactive<TestSource.ParameterType[]>([])
watch(() => props.parameterStr, (newData) => {
if (newData) {
getTableList()
}
})
watch(
() => props.parameterStr,
newData => {
if (newData) {
getTableList()
}
}
)
const defaultExpandRowKeys =computed(() => {
return getDefaultKeyArray(tableData.value)
const defaultExpandRowKeys = computed(() => {
return getDefaultKeyArray(tableData.value)
})
const getDefaultKeyArray = (data: any[]) => {
if (!data || data.length === 0) {
return []
}
if (!data || data.length === 0) {
return []
}
const firstElement = data[0]
let result: any[] = []
recursion(firstElement,result)
const firstElement = data[0]
let result: any[] = []
recursion(firstElement, result)
return result
return result
}
const recursion = (node: any, result: any[]) => {
if (node.children && node.children.length !== 0) {
result.push(node.id)
recursion(node.children[0], result)
}
if (node.children && node.children.length !== 0) {
result.push(node.id)
recursion(node.children[0], result)
}
}
const getTableList = () => {
if (props.parameterStr) {
originalParameterArr = JSON.parse(props.parameterStr)
tableData.value = getTreeData(originalParameterArr)
}
};
if (props.parameterStr) {
originalParameterArr = JSON.parse(props.parameterStr)
tableData.value = getTreeData(originalParameterArr)
}
}
const getTreeData = (data: TestSource.ParameterType[]): TestSource.ParameterType[] => {
const result: TestSource.ParameterType[] = []// 最终返回的树形结构数据
//不能修改原数组，所以需要深拷贝
const copyData = JSON.parse(JSON.stringify(data))
const map = new Map<string, TestSource.ParameterType>();
copyData.forEach(item => {
map.set(item.id, item)
});
for (const item of copyData) {
let parent = map.get(item.pId);
if (parent) {
if (!parent.children) {
parent.children = [];
}
parent.children.push(item);
parent.children.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
const result: TestSource.ParameterType[] = [] // 最终返回的树形结构数据
//不能修改原数组，所以需要深拷贝
const copyData = JSON.parse(JSON.stringify(data))
const map = new Map<string, TestSource.ParameterType>()
copyData.forEach(item => {
map.set(item.id, item)
})
for (const item of copyData) {
let parent = map.get(item.pId)
if (parent) {
if (!parent.children) {
parent.children = []
}
parent.children.push(item)
parent.children.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
} else {
return 0
result.push(item)
result.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
}
})
} else {
result.push(item)
result.sort((a, b) => {
if (a.sort && b.sort) {
return a.sort - b.sort
} else {
return 0
}
})
}
}
return result
return result
}
const columns = reactive<ColumnProps<any>[]>([
{type: 'selection', fixed: 'left', width: 70,
selectable(row, index) {
if (props.isDisable) {
return false;
}
return true;
{
type: 'selection',
fixed: 'left',
width: 70,
selectable(row, index) {
if (props.isDisable) {
return false
}
return true
}
},
},
{type: 'index', fixed: 'left', width: 70, label: '序号'},
{
prop: 'type',
label: '参数类型',
minWidth: 180,
align: 'left',
headerAlign:'center'
},
{
prop: 'desc',
label: '参数描述',
minWidth: 220,
},
{
prop: 'value',
label: '值',
minWidth: 150,
},
{prop: 'operation', label: '操作', fixed: 'right', width: 250},
{ type: 'index', fixed: 'left', width: 70, label: '序号' },
{
prop: 'type',
label: '参数类型',
minWidth: 180,
align: 'left',
headerAlign: 'center'
},
{
prop: 'desc',
label: '参数描述',
minWidth: 220
},
{
prop: 'value',
label: '值',
minWidth: 150
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
// 打开 drawer(新增、编辑)
const openDialog = (titleType: string, row: Partial<TestSource.ParameterType> = {}) => {
parameterPopup.value?.open(titleType, row)
parameterPopup.value?.open(titleType, row)
}
// 批量删除源参数
const batchDelete = async (ids: string[]) => {
ElMessageBox.confirm(`是否批量删除检测源?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId);
if (parentIds.some(item => ids.includes(item))) {
ElMessage.error('不能删除父节点');
return;
}
// 直接过滤掉需要删除的项
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id));
emit('change-parameter', originalParameterArr);
tableData.value = getTreeData(originalParameterArr);
ElMessage({
type: "success",
message: `批量删除检测源成功!`
});
});
ElMessageBox.confirm(`是否批量删除检测源?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.some(item => ids.includes(item))) {
ElMessage.error('不能删除父节点')
return
}
// 直接过滤掉需要删除的项
originalParameterArr = originalParameterArr.filter(item => !ids.includes(item.id))
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
ElMessage({
type: 'success',
message: `批量删除检测源成功!`
})
})
}
// 删除源参数
const handleDelete = (id: string) => {
ElMessageBox.confirm(`是否删除检测源?`, "温馨提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId);
if (parentIds.includes(id)) {
ElMessage.error('不能删除父节点');
return;
}
originalParameterArr = originalParameterArr.filter(item => item.id !== id);
emit('change-parameter', originalParameterArr);
tableData.value = getTreeData(originalParameterArr);
ElMessage({
type: "success",
message: `删除检测源成功!`
});
});
ElMessageBox.confirm(`是否删除检测源?`, '温馨提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
draggable: true
}).then(async () => {
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.includes(id)) {
ElMessage.error('不能删除父节点')
return
}
originalParameterArr = originalParameterArr.filter(item => item.id !== id)
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
ElMessage({
type: 'success',
message: `删除检测源成功!`
})
})
}
// 复制源参数
const copyRow = (row) => {
delete row.children
let parentIds = originalParameterArr.map(item => item.pId)
const copyRow = row => {
delete row.children
let parentIds = originalParameterArr.map(item => item.pId)
if (parentIds.includes(row.id)) {
let newParameterId = generateUUID().replaceAll("-","")
let children = originalParameterArr.filter(item => item.pId == row.id).map(item => ({
...item,
id: generateUUID().replaceAll("-",""),
pId: newParameterId
}))
originalParameterArr.push({...row, id: newParameterId})
originalParameterArr.push(...children)
} else {
originalParameterArr.push({...row, id: generateUUID().replaceAll("-",""), pId: row.pId})
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
if (parentIds.includes(row.id)) {
let newParameterId = generateUUID().replaceAll('-', '')
let children = originalParameterArr
.filter(item => item.pId == row.id)
.map(item => ({
...item,
id: generateUUID().replaceAll('-', ''),
pId: newParameterId
}))
originalParameterArr.push({ ...row, id: newParameterId })
originalParameterArr.push(...children)
} else {
originalParameterArr.push({ ...row, id: generateUUID().replaceAll('-', ''), pId: row.pId })
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
const getParameter = (data: TestSource.ParameterType) => {
// if (originalParameterArr.some(item => item.type == data.type)) {
// ElMessage.error({message: '参数类型已存在！'})
// return;
// }
let index = originalParameterArr.findIndex(item => item.id === data.id)
// if (originalParameterArr.some(item => item.type == data.type)) {
// ElMessage.error({message: '参数类型已存在！'})
// return;
// }
let index = originalParameterArr.findIndex(item => item.id === data.id)
if (index === -1) {
data.id = generateUUID().replaceAll("-","")
// 新增
originalParameterArr.push(data)
ElMessage.success({message: '新增成功！'})
} else {
// 编辑
originalParameterArr[index] = data
ElMessage.success({message: '编辑成功！'})
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
if (index === -1) {
data.id = generateUUID().replaceAll('-', '')
// 新增
originalParameterArr.push(data)
ElMessage.success({ message: '新增成功！' })
} else {
// 编辑
originalParameterArr[index] = data
ElMessage.success({ message: '编辑成功！' })
}
emit('change-parameter', originalParameterArr)
tableData.value = getTreeData(originalParameterArr)
}
//清空数据
const clearData = () => {
originalParameterArr = []
tableData.value = []
originalParameterArr = []
tableData.value = []
}
defineExpose({
clearData
clearData
})
</script>
<style scoped>
</style>
<style scoped></style>

258
frontend/src/views/machine/testSource/components/testSourcePopup.vue
View File

@@ -1,49 +1,59 @@
<template>
<el-dialog :title="dialogTitle" v-model='dialogVisible' @close="close" v-bind="dialogBig" align-center>
<div >
<el-form :model="formContent" ref='dialogFormRef' :rules='rules' :disabled="tableIsDisable" label-width="auto" class="form-three">
<el-form-item label="设备类型" prop="devType" >
<el-select v-model='formContent.devType' placeholder="请选择源型号">
<el-option
v-for="item in dictStore.getDictData(dictTypeCode)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="检测源类型" prop="type" >
<el-select v-model='formContent.type' placeholder="请选择检测源类型">
<el-option
v-for="item in dictStore.getDictData('Pq_Source_Type')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<ParameterTable :parameterStr="formContent.parameter" @change-parameter="changeParameter" ref="parameterTable" :is-disable="tableIsDisable"/>
<template #footer>
<div>
<el-button :disabled="tableIsDisable" @click='close()'>取 消</el-button>
<el-button :disabled="tableIsDisable" type="primary" @click='save()'>保存</el-button>
</div>
</template>
</el-dialog>
<el-dialog :title="dialogTitle" v-model="dialogVisible" @close="close" v-bind="dialogBig" align-center>
<div>
<el-form
:model="formContent"
ref="dialogFormRef"
:rules="rules"
:disabled="tableIsDisable"
label-width="auto"
class="form-three"
>
<el-form-item label="设备类型" prop="devType">
<el-select v-model="formContent.devType" placeholder="请选择源型号">
<el-option
v-for="item in dictStore.getDictData(dictTypeCode)"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
<el-form-item label="检测源类型" prop="type">
<el-select v-model="formContent.type" placeholder="请选择检测源类型">
<el-option
v-for="item in dictStore.getDictData('Pq_Source_Type')"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-form>
</div>
<ParameterTable
:parameterStr="formContent.parameter"
@change-parameter="changeParameter"
ref="parameterTable"
:is-disable="tableIsDisable"
/>
<template #footer>
<div>
<el-button :disabled="tableIsDisable" @click="close()">取 消</el-button>
<el-button :disabled="tableIsDisable" type="primary" @click="save()">保存</el-button>
</div>
</template>
</el-dialog>
</template>
<script lang="ts" setup name="ErrorSystemDialog">
import {ElMessage, type FormItemRule} from 'element-plus'
import {computed, defineProps, Ref, ref} from 'vue';
import {dialogBig} from '@/utils/elementBind'
import {addTestSource, getTestSourceById, updateTestSource} from '@/api/device/testSource/index'
import {useDictStore} from '@/stores/modules/dict'
import {type TestSource} from '@/api/device/interface/testSource';
import { ElMessage, type FormItemRule } from 'element-plus'
import { computed, Ref, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import { addTestSource, getTestSourceById, updateTestSource } from '@/api/device/testSource/index'
import { useDictStore } from '@/stores/modules/dict'
import { type TestSource } from '@/api/device/interface/testSource'
// 定义弹出组件元信息
const dialogFormRef = ref()
const dictStore = useDictStore()
@@ -53,122 +63,116 @@ const parameterTable = ref()
const tableIsDisable = ref(true)
function useMetaInfo() {
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<TestSource.ResTestSource>({
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1,
})
return {dialogVisible, titleType, formContent}
const dialogVisible = ref(false)
const titleType = ref('add')
const formContent = ref<TestSource.ResTestSource>({
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1
})
return { dialogVisible, titleType, formContent }
}
const {dialogVisible, titleType, formContent} = useMetaInfo()
const { dialogVisible, titleType, formContent } = useMetaInfo()
// 清空formContent
const resetFormContent = () => {
formContent.value = {
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1,
}
formContent.value = {
id: '',
pattern: modeId.value,
parameter: '',
type: '',
devType: '',
state: 1
}
}
let dialogTitle = computed(() => {
switch (titleType.value) {
case 'add':
tableIsDisable.value = false
return '新增检测源';
case 'edit':
tableIsDisable.value = false
return '编辑检测源';
case 'view':
tableIsDisable.value = true
return '查看检测源';
default:
return ''; // 默认情况，可选
}
});
switch (titleType.value) {
case 'add':
tableIsDisable.value = false
return '新增检测源'
case 'edit':
tableIsDisable.value = false
return '编辑检测源'
case 'view':
tableIsDisable.value = true
return '查看检测源'
default:
return '' // 默认情况，可选
}
})
let dictTypeCode = computed(() => {
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
return 'S_Dev_Type_' + dictStore.getDictData('Pattern').find(item => item.id === modeId.value)?.code
})
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
name: [{required: true, message: '检测源名称必填！', trigger: 'blur'}],
devType: [{required: true, message: '请选择一项设备类型', trigger: 'change'},],
type: [{required: true, message: '请选择一项检测源类型', trigger: 'change '},]
});
name: [{ required: true, message: '检测源名称必填！', trigger: 'blur' }],
devType: [{ required: true, message: '请选择一项设备类型', trigger: 'change' }],
type: [{ required: true, message: '请选择一项检测源类型', trigger: 'change ' }]
})
// 关闭弹窗
const close = () => {
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
parameterTable.value?.clearData()
dialogVisible.value = false
// 清空dialogForm中的值
resetFormContent()
// 重置表单
dialogFormRef.value?.resetFields()
parameterTable.value?.clearData()
}
// 保存数据
const save = () => {
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功！`})
} else {
await addTestSource(formContent.value);
ElMessage.success({message: `${dialogTitle.value}成功！`})
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
try {
dialogFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
if (formContent.value.id) {
await updateTestSource(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
} else {
await addTestSource(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功！` })
}
close()
// 刷新表格
await props.refreshTable!()
}
})
} catch (err) {
console.error('验证过程中出现错误', err)
}
}
// 打开弹窗，可能是新增，也可能是编辑
const open = async (sign: string, data: TestSource.ResTestSource, currentMode: string) => {
titleType.value = sign
dialogVisible.value = true
mode.value = currentMode
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id;
if (data.id) {
const result = await getTestSourceById(data);
if (result && result.data) {
formContent.value = result.data as TestSource.ResTestSource;
titleType.value = sign
dialogVisible.value = true
mode.value = currentMode
modeId.value = dictStore.getDictData('Pattern').find(item => item.name === currentMode)?.id
if (data.id) {
const result = await getTestSourceById(data)
if (result && result.data) {
formContent.value = result.data as TestSource.ResTestSource
}
} else {
resetFormContent()
}
} else {
resetFormContent()
}
// 重置表单
dialogFormRef.value?.resetFields()
// 重置表单
dialogFormRef.value?.resetFields()
}
const changeParameter = (parameterArr: any) => {
formContent.value.parameter = JSON.stringify(parameterArr)
formContent.value.parameter = JSON.stringify(parameterArr)
}
// 对外映射
defineExpose({open})
defineExpose({ open })
const props = defineProps<{
refreshTable: (() => Promise<void>) | undefined;
refreshTable: (() => Promise<void>) | undefined
}>()
</script>
<style>
</style>
<style></style>

527
frontend/src/views/plan/autoTest/components/autoTestTable.vue Normal file
View File

@@ -0,0 +1,527 @@
<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)
console.log(window.innerHeight, '+++++++++')
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 }) => {
console.log(newIndex, oldIndex)
console.log(proTable.value?.tableData)
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(() => {
console.log(proTable.value?.tableData)
})
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>

0
frontend/src/views/plan/autoTest/components/tree.vue → frontend/src/views/plan/autoTest/components/autoTestTree.vue
View File

568
frontend/src/views/plan/autoTest/components/table.vue
View File

@@ -1,568 +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 { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import {
CirclePlus,
Delete,
EditPen,
Download,
Upload,
View,
Refresh,
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);
console.log(window.innerHeight, "+++++++++");
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;
}) => {
console.log(newIndex, oldIndex);
console.log(proTable.value?.tableData);
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(() => {
console.log(proTable.value?.tableData);
});
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;
}
}
// ::v-deep .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>

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

File diff suppressed because it is too large Load Diff

2
frontend/src/views/plan/planList/components/planPopup.vue
View File

@@ -383,7 +383,7 @@
<script lang="ts" setup>
import { type CascaderOption, ElMessage, type FormItemRule } from 'element-plus'
import { computed, defineProps, reactive, ref } from 'vue'
import { computed, reactive, ref } from 'vue'
import { dialogBig } from '@/utils/elementBind'
import { type Plan } from '@/api/plan/interface'
import {

696
frontend/src/views/plan/singlePlanList/index.vue
View File

@@ -1,90 +1,77 @@
<template>
<div class="table-box planList">
<ProTable
ref="proTable"
:columns="columns"
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
@drag-sort="sortTable"
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-form :model="searchForm">
<el-form-item label="检测时间">
<el-select
v-model="searchForm.intervalType"
style="width: 80px !important"
>
<el-option :value="0" label="按周">按周</el-option>
<el-option :value="1" label="按月">按月</el-option>
<el-option :value="2" label="按日">按日</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-date-picker
style="width: 220px"
v-model="searchForm.time"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
/>
</el-form-item>
<el-form-item label="检测状态">
<el-select v-model="searchForm.checkStatus">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="未检"></el-option>
<el-option :value="2" label="检测中"></el-option>
<el-option :value="3" label="检测完成"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测报告状态">
<el-select v-model="searchForm.checkReportStatus">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="未生成"></el-option>
<el-option :value="2" label="部分生成"></el-option>
<el-option :value="3" label="全部生成"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测结果">
<el-select v-model="searchForm.checkResult">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="/"></el-option>
<el-option :value="2" label="符合"></el-option>
<el-option :value="3" label="不符合"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch"
>查询</el-button
>
<el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Upload" @click="handleRefresh"
>导入</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Check" @click="handleRefresh"
>合并</el-button
>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Plus" @click="handleRefresh"
>新增</el-button
>
</el-form-item>
<el-form-item>
<el-button type="danger" :icon="Delete" @click="handleRefresh"
>删除</el-button
>
</el-form-item>
</el-form>
<!-- <el-button
<div class="table-box planList">
<ProTable
ref="proTable"
:columns="columns"
:request-api="getTableList"
:init-param="initParam"
:data-callback="dataCallback"
@drag-sort="sortTable"
>
<!-- 表格 header 按钮 -->
<template #tableHeader>
<el-form :model="searchForm">
<el-form-item label="检测时间">
<el-select v-model="searchForm.intervalType" style="width: 80px !important">
<el-option :value="0" label="按周">按周</el-option>
<el-option :value="1" label="按月">按月</el-option>
<el-option :value="2" label="按日">按日</el-option>
</el-select>
</el-form-item>
<el-form-item label="">
<el-date-picker
style="width: 220px"
v-model="searchForm.time"
type="daterange"
unlink-panels
range-separator="-"
start-placeholder="开始日期"
end-placeholder="结束日期"
:shortcuts="shortcuts"
/>
</el-form-item>
<el-form-item label="检测状态">
<el-select v-model="searchForm.checkStatus">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="未检"></el-option>
<el-option :value="2" label="检测中"></el-option>
<el-option :value="3" label="检测完成"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测报告状态">
<el-select v-model="searchForm.checkReportStatus">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="未生成"></el-option>
<el-option :value="2" label="部分生成"></el-option>
<el-option :value="3" label="全部生成"></el-option>
</el-select>
</el-form-item>
<el-form-item label="检测结果">
<el-select v-model="searchForm.checkResult">
<el-option :value="0" label="全部"></el-option>
<el-option :value="1" label="/"></el-option>
<el-option :value="2" label="符合"></el-option>
<el-option :value="3" label="不符合"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
<el-button :icon="Refresh" @click="handleRefresh">重置</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Upload" @click="handleRefresh">导入</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Check" @click="handleRefresh">合并</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" :icon="Plus" @click="handleRefresh">新增</el-button>
</el-form-item>
<el-form-item>
<el-button type="danger" :icon="Delete" @click="handleRefresh">删除</el-button>
</el-form-item>
</el-form>
<!-- <el-button
v-auth="'add'"
dictType="primary"
:icon="CirclePlus"
@@ -119,363 +106,316 @@
>
批量删除用户
</el-button> -->
</template>
<!-- Expand -->
<!-- <template #expand="scope">
</template>
<!-- Expand -->
<!-- <template #expand="scope">
{{ scope.row }}
</template> -->
<!-- 表格操作 -->
<template #operation="scope">
<el-button
type="primary"
link
:icon="View"
@click="handleDetails('查看', scope.row)"
>查看</el-button
>
<el-button
type="primary"
link
:icon="EditPen"
@click="openDrawer('编辑', scope.row)"
>导出</el-button
>
<el-button
type="primary"
link
:icon="Delete"
@click="deleteAccount(scope.row)"
>删除</el-button
>
</template>
</ProTable>
</div>
<plan-details ref="detailsRef"></plan-details>
<!-- 表格操作 -->
<template #operation="scope">
<el-button type="primary" link :icon="View" @click="handleDetails('查看', scope.row)">查看</el-button>
<el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">导出</el-button>
<el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
</template>
</ProTable>
</div>
<plan-details ref="detailsRef"></plan-details>
</template>
<script setup lang="tsx" name="useProTable">
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { User } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { ElMessage, ElMessageBox } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import planDetails from "./components/details.vue";
import {
CirclePlus,
Delete,
EditPen,
Download,
Upload,
View,
Check,
Plus,
Refresh,
Search,
} from "@element-plus/icons-vue";
import { getPlanList } from "@/api/plan/planList";
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 planDetails from './components/details.vue'
import { Check, Delete, EditPen, Plus, Refresh, Search, Upload, View } from '@element-plus/icons-vue'
import { getPlanList } from '@/api/plan/planList'
const router = useRouter();
const value1 = ref("");
const value2 = ref("");
const router = useRouter()
const value1 = ref('')
const value2 = ref('')
const shortcuts = [
{
text: "最近一周",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
return [start, end];
{
text: '最近一周',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
return [start, end]
}
},
},
{
text: "最近一个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
return [start, end];
{
text: '最近一个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
return [start, end]
}
},
},
{
text: "最近三个月",
value: () => {
const end = new Date();
const start = new Date();
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
return [start, end];
},
},
];
{
text: '最近三个月',
value: () => {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
return [start, end]
}
}
]
// 跳转详情页
const toDetail = () => {
router.push(
`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
);
};
router.push(`/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`)
}
const searchForm = ref({
intervalType: 0,
time: ["2024-08-20", "2024-08-27"],
searchBeginTime: "",
searchEndTime: "",
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0,
});
intervalType: 0,
time: ['2024-08-20', '2024-08-27'],
searchBeginTime: '',
searchEndTime: '',
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0
})
// ProTable 实例
const proTable = ref<ProTableInstance>();
const proTable = ref<ProTableInstance>()
// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 });
const initParam = reactive({ type: 1, pageNum: 1, pageSize: 10 })
// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
const tableList = ref([]);
const tableList = ref([])
const dataCallback = (data: any) => {
return {
list: data || data.data || data.list,
total: data.length || data.total,
};
};
return {
list: data || data.data || data.list,
total: data.length || data.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);
};
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 detailsRef: any = ref();
const detailsRef: any = ref()
const handleDetails = () => {
console.log(detailsRef.value, "+++++++++++++++");
detailsRef.value.open("查看计划");
};
console.log(detailsRef.value, '+++++++++++++++')
detailsRef.value.open('查看计划')
}
// 表格配置项
const columns = reactive<ColumnProps<User.ResUserList>[]>([
{ type: "selection", fixed: "left", width: 70 },
{ type: "sort", label: "Sort", width: 80 },
{ type: "expand", label: "Expand", width: 85 },
{
prop: "planName",
label: "计划名称",
width: 120,
},
{
prop: "checkMode",
label: "检测模式",
width: 120,
render: (scope) => {
return scope.row.checkMode == 0
? "模拟式"
: scope.row.checkMode == 1
? "比对式"
: scope.row.checkMode == 2
? "数字式"
: scope.row.checkMode;
{ type: 'selection', fixed: 'left', width: 70 },
{ type: 'sort', label: 'Sort', width: 80 },
{ type: 'expand', label: 'Expand', width: 85 },
{
prop: 'planName',
label: '计划名称',
width: 120
},
},
{
prop: "checkFrom",
label: "检测源",
width: 120,
render: (scope) => {
return scope.row.checkFrom == 0
? "标准源-福禄克-6100A"
: scope.row.checkFrom == 1
? "标准源-昂立-PF2"
: scope.row.checkFrom == 2
? "高精度设备-PQS882-1"
: scope.row.checkFrom;
{
prop: 'checkMode',
label: '检测模式',
width: 120,
render: scope => {
return scope.row.checkMode == 0
? '模拟式'
: scope.row.checkMode == 1
? '比对式'
: scope.row.checkMode == 2
? '数字式'
: scope.row.checkMode
}
},
},
{
prop: "numberFromName",
label: "源名称",
render: (scope) => {
return scope.row.numberFromName == 0
? "分钟统计数据最大值"
: scope.row.numberFromName == 1
? "分钟统计数据最小值"
: scope.row.numberFromName == 2
? "分钟统计数据CP95值"
: scope.row.numberFromName;
{
prop: 'checkFrom',
label: '检测源',
width: 120,
render: scope => {
return scope.row.checkFrom == 0
? '标准源-福禄克-6100A'
: scope.row.checkFrom == 1
? '标准源-昂立-PF2'
: scope.row.checkFrom == 2
? '高精度设备-PQS882-1'
: scope.row.checkFrom
}
},
},
{
prop: "checkExe",
label: "检测脚本",
width: 120,
render: (scope) => {
return scope.row.checkExe == 0
? "国网入网检测脚本（单影响量-模拟式）"
: scope.row.checkExe == 1
? "国网入网检测脚本"
: scope.row.checkExe == 2
? "/"
: scope.row.checkExe;
{
prop: 'numberFromName',
label: '源名称',
render: scope => {
return scope.row.numberFromName == 0
? '分钟统计数据最大值'
: scope.row.numberFromName == 1
? '分钟统计数据最小值'
: scope.row.numberFromName == 2
? '分钟统计数据CP95值'
: scope.row.numberFromName
}
},
},
{
prop: "wctx",
label: "误差体系",
width: 120,
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: 'checkExe',
label: '检测脚本',
width: 120,
render: scope => {
return scope.row.checkExe == 0
? '国网入网检测脚本（单影响量-模拟式）'
: scope.row.checkExe == 1
? '国网入网检测脚本'
: scope.row.checkExe == 2
? '/'
: scope.row.checkExe
}
},
},
{
type: "tag",
prop: "checkStatus",
label: "检测状态",
width: 120,
render: (scope) => {
return scope.row.checkStatus == 1
? "未检"
: scope.row.checkStatus == 2
? "检测中"
: scope.row.checkStatus == 3
? "检测完成"
: scope.row.checkStatus;
{
prop: 'wctx',
label: '误差体系',
width: 120,
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: "checkReport",
label: "检测报告",
width: 120,
render: (scope) => {
return scope.row.checkReport == 1
? "未生成"
: scope.row.checkReport == 2
? "部分生成"
: scope.row.checkReport == 3
? "全部生成"
: scope.row.checkReport;
{
type: 'tag',
prop: 'checkStatus',
label: '检测状态',
width: 120,
render: scope => {
return scope.row.checkStatus == 1
? '未检'
: scope.row.checkStatus == 2
? '检测中'
: scope.row.checkStatus == 3
? '检测完成'
: scope.row.checkStatus
}
},
},
{
prop: "checkResult",
label: "检测结果",
width: 120,
render: (scope) => {
return scope.row.checkReport == 1
? "/"
: scope.row.checkReport == 2
? "符合"
: scope.row.checkReport == 3
? "不符合"
: scope.row.checkReport;
{
prop: 'checkReport',
label: '检测报告',
width: 120,
render: scope => {
return scope.row.checkReport == 1
? '未生成'
: scope.row.checkReport == 2
? '部分生成'
: scope.row.checkReport == 3
? '全部生成'
: scope.row.checkReport
}
},
},
{ prop: "operation", label: "操作", fixed: "right", width: 250 },
]);
{
prop: 'checkResult',
label: '检测结果',
width: 120,
render: scope => {
return scope.row.checkReport == 1
? '/'
: scope.row.checkReport == 2
? '符合'
: scope.row.checkReport == 3
? '不符合'
: scope.row.checkReport
}
},
{ prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
//重置查询条件
const resetSearchForm = () => {
searchForm.value = {
intervalType: 0,
time: ["2024-08-20", "2024-08-27"],
searchBeginTime: "",
searchEndTime: "",
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0,
};
};
searchForm.value = {
intervalType: 0,
time: ['2024-08-20', '2024-08-27'],
searchBeginTime: '',
searchEndTime: '',
checkStatus: 0,
checkReportStatus: 0,
checkResult: 0
}
}
//查询
const handleSearch = () => {
proTable.value?.getTableList();
};
proTable.value?.getTableList()
}
//重置
const handleRefresh = () => {
proTable.value?.getTableList();
};
proTable.value?.getTableList()
}
// 表格拖拽排序
const sortTable = ({
newIndex,
oldIndex,
}: {
newIndex?: number;
oldIndex?: number;
}) => {
// console.log(newIndex, oldIndex);
//console.log(proTable.value?.tableData);
ElMessage.success("修改列表排序成功");
};
const sortTable = ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
// console.log(newIndex, oldIndex);
//console.log(proTable.value?.tableData);
ElMessage.success('修改列表排序成功')
}
// 删除用户信息
const deleteAccount = async (params: User.ResUserList) => {
await useHandleData(
deleteUser,
{ id: [params.id] },
`删除【${params.username}】`
);
proTable.value?.getTableList();
};
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();
};
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();
};
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();
};
await useHandleData(
changeUserStatus,
{ id: row.id, status: row.status == 1 ? 0 : 1 },
`切换【${row.username}】用户状态`
)
proTable.value?.getTableList()
}
onMounted(() => {
console.log(proTable.value?.tableData);
});
console.log(proTable.value?.tableData)
})
</script>
<style lang="scss" scoped>
.planList {
width: 100%;
// height: calc(100vh - 165px);
height: 100%;
width: 100%;
// height: calc(100vh - 165px);
height: 100%;
}
::v-deep .el-select {
width: 150px !important;
:deep(.el-select) {
width: 150px !important;
}
.el-form {
width: 100%;
display: flex;
flex-wrap: wrap;
.el-form-item {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.el-button {
margin: 0 !important;
margin-right: 10px !important;
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>