10 Commits

Author SHA1 Message Date
贾同学
666fb22c49 UPDATE: 优化客户端桌面窗口内容自适应 2025-10-10 15:29:54 +08:00
贾同学
b319a89501 UPDATE: 处理控制台警告问题 2025-10-10 13:23:40 +08:00
贾同学
8e0b3be438 Merge remote-tracking branch 'origin/master' 2025-10-10 08:24:55 +08:00
sjl
b0d92de738 微调 2025-10-09 15:51:45 +08:00
sjl
92b3e25989 冲突 2025-10-09 15:49:29 +08:00
sjl
43c75c96a7 录波数据 2025-10-09 15:47:00 +08:00
贾同学
da0aa0cd0f UPDATE: 调整超时时间到1200秒 2025-10-09 14:34:45 +08:00
贾同学
b0c88b9df2 UPDATE: 优化; 2025-09-30 08:42:45 +08:00
caozehui
7c0ec5844a 微调 2025-09-29 14:49:29 +08:00
贾同学
a4a64ef0f9 UPDATE: 优化; 2025-09-29 09:47:53 +08:00
56 changed files with 8207 additions and 8148 deletions

View File

@@ -25,10 +25,10 @@ module.exports = (appInfo) => {
*/
config.windowsOption = {
title: '自动检测平台',
width: 1600,
height: 950,
minWidth: 1600,
minHeight: 950,
width: 1920 /1.5,
height: 1080 /1.2,
minWidth: 1920 /1.5,
minHeight: 1080 /1.2,
webPreferences: {
//webSecurity: false,
contextIsolation: false, // false -> 可在渲染进程中使用electron的apitrue->需要bridge.js(contextBridge)

View File

@@ -9,7 +9,7 @@ module.exports = (appInfo) => {
/**
* 开发者工具
*/
config.openDevTools = true;
config.openDevTools = false;
/**
* 应用程序顶部菜单

View File

@@ -17,6 +17,7 @@
"@types/event-source-polyfill": "^1.0.5",
"@vue-flow/core": "^1.45.0",
"@vueuse/core": "^10.4.1",
"autofit.js": "^3.2.8",
"axios": "^1.7.3",
"crypto-js": "^4.2.0",
"dayjs": "^1.11.9",

View File

@@ -1,27 +1,25 @@
<template>
<!--element-plus语言国际化全局修改为中文-->
<el-config-provider
:locale='locale'
:size='assemblySize'
:button='buttonConfig'
>
<router-view />
</el-config-provider>
<!--element-plus语言国际化全局修改为中文-->
<el-config-provider :locale="locale" :size="assemblySize" :button="buttonConfig">
<router-view />
</el-config-provider>
</template>
<script lang='ts' setup>
defineOptions({
name: 'App',
})
<script lang="ts" setup>
import autofit from 'autofit.js'
import { useI18n } from 'vue-i18n'
import { getBrowserLang } from '@/utils'
import { useTheme } from '@/hooks/useTheme'
import { ElConfigProvider } from 'element-plus'
import { LanguageType } from './stores/interface'
import { type LanguageType } from './stores/interface'
import { useGlobalStore } from '@/stores/modules/global'
import en from 'element-plus/es/locale/lang/en'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
defineOptions({
name: 'App'
})
const globalStore = useGlobalStore()
// init theme
@@ -31,16 +29,26 @@ initTheme()
// init language
const i18n = useI18n()
onMounted(() => {
const language = globalStore.language ?? getBrowserLang()
i18n.locale.value = language
globalStore.setGlobalState('language', language as LanguageType)
const language = globalStore.language ?? getBrowserLang()
i18n.locale.value = language
globalStore.setGlobalState('language', language as LanguageType)
// 自动适配
autofit.init({
el: '#app',
//dh: 720 * 1,
//dw: 1280 * 1.2,
dw: 1920 / 1.5,
dh: 1080 / 1.2,
resize: true,
limit: 0.1
})
})
// element language
const locale = computed(() => {
if (globalStore.language == 'zh') return zhCn
if (globalStore.language == 'en') return en
return getBrowserLang() == 'zh' ? zhCn : en
if (globalStore.language == 'zh') return zhCn
if (globalStore.language == 'en') return en
return getBrowserLang() == 'zh' ? zhCn : en
})
// element assemblySize

View File

@@ -193,11 +193,13 @@ class RequestHttp {
* 针对excel的上传默认返回的是blob类型Excel没问题时返回json特殊处理
*/
uploadExcel(url: string, params?: object, _object = {}): Promise<BlobPart> {
return this.service.post(url, params, {
..._object,
headers: { 'Content-Type': 'multipart/form-data' },
responseType: 'blob'
}).then(res => res.data)
return this.service
.post(url, params, {
..._object,
headers: { 'Content-Type': 'multipart/form-data' },
responseType: 'blob'
})
.then(res => res.data)
}
// 添加SSE连接方法
@@ -220,8 +222,8 @@ class RequestHttp {
headers: {
Authorization: 'Bearer ' + userStore.accessToken
},
// 增加超时时间到120秒
heartbeatTimeout: 120000
// 增加超时时间到1200
heartbeatTimeout: 1200000
})
// 设置默认的Authorization头部

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>

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>

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>

View File

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

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>

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)
} 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
// }
// // 确保结束日期不超过今天
// 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 === '季度') {
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);
// // 确保结束日期不超过今天
// 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 === '年') {
startDate.value = new Date(today.value.getFullYear(), 0, 1);
endDate.value = new Date(today.value.getFullYear(), 11, 31);
// 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
// }
}
// 确保开始时间和结束时间不为空
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>

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'

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>

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>

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>

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>

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>

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>
</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 { useTabsStore } from '@/stores/modules/tabs'
const tabStore = useTabsStore()
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 showMenuFlag = computed(() => authStore.showMenuFlagGet);
// 注入刷新页面方法
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 }
);
// 监听布局变化,在 body 上添加相对应的 layout class
watch(
() => layout.value,
() => {
const body = document.body as HTMLElement;
body.setAttribute("class", layout.value);
},
{ immediate: true }
);
// 监听窗口大小变化,折叠侧边栏
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);
onBeforeUnmount(() => {
window.removeEventListener("resize", listeningWindow);
});
</script>
<style scoped lang="scss">
@import "./index.scss";
</style>
<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>
</template>
<script setup lang="ts">
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 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 showMenuFlag = computed(() => authStore.showMenuFlagGet)
// 注入刷新页面方法
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 }
)
// 监听布局变化,在 body 上添加相对应的 layout class
watch(
() => layout.value,
() => {
const body = document.body as HTMLElement
body.setAttribute('class', layout.value)
},
{ immediate: true }
)
// 监听窗口大小变化,折叠侧边栏
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)
onBeforeUnmount(() => {
window.removeEventListener('resize', listeningWindow)
})
</script>
<style scoped lang="scss">
@use './index.scss';
</style>

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>

View File

@@ -1,121 +1,119 @@
<template>
<div class="tabs-box">
<div class="tabs-menu">
<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
<el-tab-pane
v-for="item in tabsMenuList"
:key="item.path"
:label="item.title"
:name="item.path"
:closable="item.close"
>
<template #label>
<el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
<component :is="item.icon"></component>
</el-icon>
{{ item.title }}
</template>
</el-tab-pane>
</el-tabs>
<MoreButton />
</div>
</div>
</template>
<script setup lang="ts">
import Sortable from 'sortablejs'
import { ref, computed, watch, onMounted } 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 MoreButton from './components/MoreButton.vue'
const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const tabsMenuValue = ref(route.fullPath)
const tabsMenuList = computed(() => tabStore.tabsMenuList)
const tabsIcon = computed(() => globalStore.tabsIcon)
onMounted(() => {
tabsDrop()
initTabs()
})
// 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue
watch(
() => route.fullPath,
() => {
if (route.meta.isFull) return
if (route.meta.hideTab) {
tabsMenuValue.value = route.meta.parentPath as string
} else {
tabsMenuValue.value = route.fullPath
const tabsParams = {
icon: route.meta.icon as string,
title: route.meta.title as string,
path: route.fullPath,
name: route.name as string,
close: !route.meta.isAffix,
isKeepAlive: route.meta.isKeepAlive as boolean
}
tabStore.addTabs(tabsParams)
}
},
{ immediate: true }
)
// 初始化需要固定的 tabs
const initTabs = () => {
authStore.flatMenuListGet.forEach(item => {
if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
const tabsParams = {
icon: item.meta.icon,
title: item.meta.title,
path: item.path,
name: item.name,
close: !item.meta.isAffix,
isKeepAlive: item.meta.isKeepAlive,
unshift: true
}
tabStore.addTabs(tabsParams)
}
})
}
// tabs 拖拽排序
const tabsDrop = () => {
Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
draggable: '.el-tabs__item',
animation: 300,
onEnd({ newIndex, oldIndex }) {
const tabsList = [...tabStore.tabsMenuList]
const currRow = tabsList.splice(oldIndex as number, 1)[0]
tabsList.splice(newIndex as number, 0, currRow)
tabStore.setTabs(tabsList)
}
})
}
// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
const fullPath = tabItem.props.name as string
router.push(fullPath)
}
// 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';
</style>
<template>
<div class="tabs-box">
<div class="tabs-menu">
<el-tabs v-model="tabsMenuValue" type="card" @tab-click="tabClick" @tab-remove="tabRemove">
<el-tab-pane
v-for="item in tabsMenuList"
:key="item.path"
:label="item.title"
:name="item.path"
:closable="item.close"
>
<template #label>
<el-icon v-show="item.icon && tabsIcon" class="tabs-icon">
<component :is="item.icon"></component>
</el-icon>
{{ item.title }}
</template>
</el-tab-pane>
</el-tabs>
<MoreButton />
</div>
</div>
</template>
<script setup lang="ts">
import Sortable from 'sortablejs'
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 { TabPaneName, TabsPaneContext } from 'element-plus'
import MoreButton from './components/MoreButton.vue'
const route = useRoute()
const router = useRouter()
const tabStore = useTabsStore()
const authStore = useAuthStore()
const globalStore = useGlobalStore()
const tabsMenuValue = ref(route.fullPath)
const tabsMenuList = computed(() => tabStore.tabsMenuList)
const tabsIcon = computed(() => globalStore.tabsIcon)
onMounted(() => {
tabsDrop()
initTabs()
})
// 监听路由的变化(防止浏览器后退/前进不变化 tabsMenuValue
watch(
() => route.fullPath,
() => {
if (route.meta.isFull) return
if (route.meta.hideTab) {
tabsMenuValue.value = route.meta.parentPath as string
} else {
tabsMenuValue.value = route.fullPath
const tabsParams = {
icon: route.meta.icon as string,
title: route.meta.title as string,
path: route.fullPath,
name: route.name as string,
close: !route.meta.isAffix,
isKeepAlive: route.meta.isKeepAlive as boolean
}
tabStore.addTabs(tabsParams)
}
},
{ immediate: true }
)
// 初始化需要固定的 tabs
const initTabs = () => {
authStore.flatMenuListGet.forEach(item => {
if (item.meta.isAffix && !item.meta.isHide && !item.meta.isFull) {
const tabsParams = {
icon: item.meta.icon,
title: item.meta.title,
path: item.path,
name: item.name,
close: !item.meta.isAffix,
isKeepAlive: item.meta.isKeepAlive,
unshift: true
}
tabStore.addTabs(tabsParams)
}
})
}
// tabs 拖拽排序
const tabsDrop = () => {
Sortable.create(document.querySelector('.el-tabs__nav') as HTMLElement, {
draggable: '.el-tabs__item',
animation: 300,
onEnd({ newIndex, oldIndex }) {
const tabsList = [...tabStore.tabsMenuList]
const currRow = tabsList.splice(oldIndex as number, 1)[0]
tabsList.splice(newIndex as number, 0, currRow)
tabStore.setTabs(tabsList)
}
})
}
// Tab Click
const tabClick = (tabItem: TabsPaneContext) => {
const fullPath = tabItem.props.name as string
router.push(fullPath)
}
// Remove Tab
const tabRemove = (fullPath: TabPaneName) => {
tabStore.removeTabs(fullPath as string, fullPath == route.fullPath || '/machine/testScriptAdd' == route.fullPath)
}
</script>
<style scoped lang="scss">
@use './index.scss';
</style>

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>

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>
<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 = {
</template>
<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: '编码必填!' }]
})
// 定义规则
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: '组件地址必填!' }]
}
}
)
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>

View File

@@ -1,348 +1,386 @@
<template>
<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">
<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">
<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>

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,48 +72,48 @@
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'时显示下拉框 -->
<el-select
v-if="isWaveData"
v-model="selectedScriptName"
<el-select
v-if="isWaveData"
v-model="selectedScriptName"
style="width: 200px"
@change="handleScriptNameChange"
>
<el-option
v-for="item in scriptNameOptions"
:key="item.value"
:label="item.label"
:value="item.value"
<el-option
v-for="item in scriptNameOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
<!-- 否则显示原来的文本 -->
<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%);"
label="录波次数"
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
style="margin-left: 280px; margin-bottom: 0px !important; width: 300px"
label="测试项"
label="测试项"
>
<el-select v-model="currentCheckItem">
<el-option
@@ -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,14 +248,14 @@ 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] : []
}
}
}
// 检测数据查询进入---不区分检测数据查询和正式检测
await initScriptData()
visible.value = true
@@ -259,16 +266,15 @@ const open = async (row: any, chnNum: string, deviceId: string | null, source: n
// 获取误差体系
let { data: resPqErrorList } = await getPqErrSysList()
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
// 设置录波数据相关的选项
@@ -276,7 +282,7 @@ const initGetResult = async () => {
label: item.scriptName,
value: item.scriptName
}))
// 默认选中第一个选项
if (scriptNameOptions.value.length > 0) {
selectedScriptName.value = scriptNameOptions.value[0].value
@@ -293,7 +299,6 @@ const initGetResult = async () => {
}
}
// 查询大项树
const initScriptData = async () => {
let response: any = await getScriptList({
@@ -301,7 +306,7 @@ const initScriptData = async () => {
chnNum: formContent.chnNum,
num: formContent.num
})
// 格式化脚本数据
let temp = response.data.map((item: any) => {
return {
@@ -314,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 {
@@ -329,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
@@ -340,8 +342,6 @@ const initScriptData = async () => {
treeRef.value?.setCurrentKey(temp[0].id)
}, 0)
}
}
// 获取基本信息
@@ -349,14 +349,14 @@ const getBasicInformation = async (scriptType: any) => {
checkResultData.value = []
rawTableData.value = []
const scriptType2 = ref('')
if(sourceKey.value == 1){
scriptType2.value = scriptType
}else{
scriptType2.value = ''
}
//确保scriptData已初始化
if (sourceKey.value == 1) {
scriptType2.value = scriptType
} else {
scriptType2.value = ''
}
//确保scriptData已初始化
// if (scriptData.value.length === 0) {
// await initScriptData()
// }
@@ -370,19 +370,19 @@ const getBasicInformation = async (scriptType: any) => {
num: formContent.num == '' ? null : parseInt(formContent.num),
patternId: pattern.value
})
formContent.dataRule = res.data.dataRule
formContent.deviceName = res.data.deviceName
formContent.errorSysId = res.data.errorSysId
chnMapList.value = res.data.chnMap
let chnMap: string[] = []
for (let key in res.data.chnMap) {
chnMap.push(key)
}
chnList.value = chnMap
formContent.chnNum = formContent.chnNum == null ? chnList.value[0] : formContent.chnNum
// 设置检测次数默认值为chnMap数组的最后一位
if (chnMapList.value[formContent.chnNum] && chnMapList.value[formContent.chnNum].length > 0) {
// 获取当前通道号对应的检测次数数组,并设置为最后一个值(最大值)
@@ -390,8 +390,6 @@ const getBasicInformation = async (scriptType: any) => {
formContent.num = numList[numList.length - 1]
}
waveNumCount.value = res.data.waveNumTotal
} catch (error) {
console.error('获取基本信息失败:', error)
}
@@ -415,7 +413,7 @@ const handleNumChange = async (value: string) => {
const handleCommonChange = async () => {
// 重新初始化脚本数据(更新左侧树)
await initScriptData()
// 触发当前选中节点的点击事件,保持界面状态一致
if (sourceKey.value === 2 && scriptData.value.length > 0) {
// 查找当前选中的节点
@@ -432,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)
}
@@ -451,7 +449,7 @@ const updateCheckNumForChn = (chnNum: string) => {
const handleNodeClick = (data: any) => {
rowList.value.scriptName = data.scriptName
rowList.value.scriptType = data.id
// 判断是否为录波数据
if (data.code === 'wave_data') {
isWaveData.value = true
@@ -465,19 +463,17 @@ const handleNodeClick = (data: any) => {
// 每次选中录波数据时都重置为第一个选项并触发getResults
if (scriptNameOptions.value.length > 0) {
selectedScriptName.value = scriptNameOptions.value[0].value
// 更新rowList并触发getResults
rowList.value.scriptName = selectedScriptName.value
const selectedItem = selectScript.value.find(item => item.scriptName === selectedScriptName.value)
if (selectedItem) {
rowList.value.scriptType = selectedItem.id
getResults('wave_data')
}
}
} else {
isWaveData.value = false
getResults(data.code)
}
@@ -489,15 +485,15 @@ const getResults = async (code: any) => {
// 判断是否为录波数据请求
const isWaveDataRequest = code === 'wave_data' || isWaveData.value
console.log('isWaveDataRequest:', rowList.value.scriptType)
getContrastResult({
planId: checkStore.plan.id,
scriptType: rowList.value.scriptType,
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[] = []
@@ -508,8 +504,6 @@ const getResults = async (code: any) => {
tesList.value = list
checkResultData.value = res.data.resultMap
rawTableData.value = res.data.rawDataMap
})
}
@@ -542,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({

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()
@@ -226,184 +226,161 @@ watch(webMsgSend, function (newValue, oldValue) {
}
switch (newValue.requestId) {
case 'yjc_sbtxjy':
switch (newValue.operateCode) {
case 'INIT_GATHER$02':
if (newValue.code == 10200) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
} else if (newValue.code == 10201) {
step1.value = 'process'
step1InitLog.value = [{
type: 'wait',
log: '正在进行设备通讯校验.....',
}];
} else if (newValue.code == 10551) {
step1InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 10552) {
step1InitLog.value = [{
type: 'error',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测!',
}];
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 25001) {
activeIndex.value = 1
step1.value = 'success'
step2.value = 'process'
}
break;
case 'INIT_GATHER$03':
if (newValue.code == 10200) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
}else if (newValue.code == 25001) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
activeIndex.value = 1
step1.value = 'success'
step2.value = 'process'
}
break;
case 'DATA_REQUEST$03':
if (newValue.code == 25001) {
activeIndex.value = 1
step1.value = 'success'
step2.value = 'process'
}
break;
if (newValue.code == 10200) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
}
if (newValue.code == 10201) {
step1.value = 'process'
step1InitLog.value = [{
type: 'wait',
log: '正在进行设备通讯校验.....',
}];
}
if (newValue.code == 10551) {
step1InitLog.value.push({
type: 'error',
log: newValue.data + '设备触发报告异常!',
})
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 10552) {
step1InitLog.value = [{
type: 'error',
log: '存在已经初始化步骤,执行自动关闭,请重新发起检测!',
}];
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25001) {
step1InitLog.value.push({
type: 'info',
log: newValue.data,
})
activeIndex.value = 1
step1.value = 'success'
step2.value = 'process'
}
break;
case 'record_wave_step1':
switch (newValue.operateCode) {
case 'DATA_REQUEST$03':
if (newValue.code == 25002) { //某一路录波校验失败
step1InitLog.value.push({
type: 'error',
log: newValue.data ,
})
}else if (newValue.code == 25003) { //最终失败
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25002) { //某一路录波校验失败
step1InitLog.value.push({
type: 'error',
log: newValue.data,
})
} else if (newValue.code == 25003) { //最终失败
step1.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
case 'yjc_mxyzxjy':
switch (newValue.operateCode){
case 'DATA_REQUEST$02':
if (newValue.code == 10200) { //单个监测点成功
step2InitLog.value.push({
type: 'info',
log: newValue.data + '模型一致性检验成功!',
})
}else if (newValue.code == 10201) {
step2.value = 'process'
step2InitLog.value = [{
type: 'wait',
log: '正在进行模型一致性校验.....',
}];
} else if (newValue.code == 25002) { //单个监测点失败
step2InitLog.value.push({
type: 'error',
log: newValue.data +'模型一致性检验失败!',
})
}else if (newValue.code == 25001) { //最终成功
step2.value = 'success'
step3.value = 'process'
activeIndex.value = 2
}else if (newValue.code == 25003) { //最终失败
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
if (newValue.code == 10200) { //单个监测点成功
step2InitLog.value.push({
type: 'info',
log: newValue.data + '模型一致性检验成功!',
})
}
break;
if (newValue.code == 10201) {
step2.value = 'process'
step2InitLog.value = [{
type: 'wait',
log: '正在进行模型一致性校验.....',
}];
}
if (newValue.code == 25002) { //单个监测点失败
step2InitLog.value.push({
type: 'error',
log: newValue.data + '模型一致性检验失败!',
})
}
if (newValue.code == 25001) { //最终成功
step2.value = 'success'
step3.value = 'process'
activeIndex.value = 2
}
if (newValue.code == 25003) { //最终失败
step2.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
break;
case 'yjc_align':
switch (newValue.operateCode){
case 'DATA_REQUEST$02':
if (newValue.code == 10200) { //单个监测点成功
step3InitLog.value.push({
type: 'info',
log: newValue.data +'实时数据对齐检验成功!',
})
}else if (newValue.code == 10201) {
step3.value = 'process'
step3InitLog.value = [{
type: 'wait',
log: '正在进行实时数据对齐检验.....',
}];
}else if (newValue.code == 25002) { //单个监测点失败
step3InitLog.value.push({
type: 'error',
log: newValue.data + '实时数据对齐检验失败!',
})
}else if (newValue.code == 25001 && newValue.data) { //最终成功
isShowDialog.value = true
step3.value = 'success'
step4.value = 'process'
activeIndex.value = 3
testDataStructure.value = newValue.data
}else if (newValue.code == 25003) { //最终失败
isShowDialog.value = true
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
testDataStructure.value = newValue.data
}
break;
if (newValue.code == 10200) { //单个监测点成功
step3InitLog.value.push({
type: 'info',
log: newValue.data + '数据对齐检验成功!',
})
}
break;
if (newValue.code == 10201) {
step3.value = 'process'
step3InitLog.value = [{
type: 'wait',
log: '正在进行数据对齐检验.....',
}];
}
if (newValue.code == 25002) { //单个监测点失败
step3InitLog.value.push({
type: 'error',
log: newValue.data + '数据对齐检验失败!',
})
}
if (newValue.code == 25001 && newValue.data) { //最终成功
isShowDialog.value = true
step3.value = 'success'
step4.value = 'process'
activeIndex.value = 3
testDataStructure.value = newValue.data
}
if (newValue.code == 25003) { //最终失败
isShowDialog.value = true
step3.value = 'error'
ts.value = 'error'
step5.value = 'error'
testDataStructure.value = newValue.data
}
break;
case 'YJC_xujy':
switch (newValue.operateCode) {
case 'DATA_REQUEST$02':
if (newValue.code == 10200) {
step4InitLog.value.push({
type: 'info',
log: newValue.data,
})
}else if (newValue.code == 10201) {
step4.value = 'process'
step4InitLog.value = [{
type: 'wait',
log: '正在进行相序性检.....',
}];
} else if(newValue.code == 25002){
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
} else if (newValue.code == 25003) {
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
step4.value = 'error'
ts.value = 'error'
step5.value = 'error'
} else if (newValue.code == 25001) {
step4.value = 'success'
step5.value = 'success'
ts.value = 'success'
activeIndex.value = 4
}
break
if (newValue.code == 10200) {
step4InitLog.value.push({
type: 'info',
log: newValue.data,
})
}
if (newValue.code == 10201) {
step4.value = 'process'
step4InitLog.value = [{
type: 'wait',
log: '正在进行相序性检.....',
}];
}
if (newValue.code == 25002) {
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
}
if (newValue.code == 25003) {
step4InitLog.value.push({
type: 'error',
log: newValue.data,
})
step4.value = 'error'
ts.value = 'error'
step5.value = 'error'
}
if (newValue.code == 25001) {
step4.value = 'success'
step5.value = 'success'
ts.value = 'success'
activeIndex.value = 4
}
break;
case 'quit':

View File

@@ -131,6 +131,7 @@ import {getBigTestItem} from '@/api/check/test'
import {getAutoGenerate} from '@/api/user/login'
import {useModeStore} from '@/stores/modules/mode' // 引入模式 store
import {useDictStore} from '@/stores/modules/dict'
import { ca } from 'element-plus/es/locale'
const checkStore = useCheckStore()
const modeStore = useModeStore()
@@ -394,31 +395,24 @@ watch(
setLogList('error', '设备主动关闭连接!')
stopTimeCount()
break
case 'yjc_xyjy' :
switch (newValue.operateCode) {
case 'INIT_GATHER$03':
if (newValue.code == 10552) {
ElMessageBox.alert('重复的初始化操作!', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
setLogList('error', '重复的初始化操作!')
stopTimeCount()
}
}
break;
case 'yjc_xyjy' :
if (newValue.code == 10552) {
ElMessageBox.alert('重复的初始化操作!', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
setLogList('error', '重复的初始化操作!')
stopTimeCount()
}
break;
case 'yjc_sbtxjy' :
switch (newValue.operateCode) {
case 'INIT_GATHER$02':
ElMessageBox.alert('重复的初始化操作!', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
setLogList('error', '重复的初始化操作!')
stopTimeCount()
}
break;
ElMessageBox.alert('重复的初始化操作!', '检测失败', {
confirmButtonText: '确定',
type: 'error',
})
setLogList('error', '重复的初始化操作!')
stopTimeCount()
break;
}
if (checkStore.selectTestItems.preTest == false && newValue.requestId != 'formal_real') {
if (testLogList[0].log == '正在检测,请稍等...' || testLogList[0].log == '暂无数据,等待检测开始') {
@@ -431,7 +425,7 @@ watch(
: newValue.requestId == 'yjc_mxyzxjy'
? '模型一致性检验'
: newValue.requestId == 'yjc_align'
? '实时数据对齐检验'
? '数据对齐检验'
: newValue.requestId == 'YJC_xujy'
? '相序校验'
: ''
@@ -461,13 +455,17 @@ watch(
}
switch (newValue.code) {
case 25001:
case 25006:
case 25005:
{
let result: CheckData.ScriptChnItem[] = []
let message = JSON.parse(newValue.data)
// 当收到 25005 消息时录波项目开始loading
if (newValue.code == 25005) {
// 当收到 25005/25006 消息时录波项目开始loading
if (newValue.code == 25005 || newValue.code == 25006) {
// 设置录波项目为LOADING状态
const waveResultItem = checkResult.find(item => item.code === 'wave_data')
@@ -487,7 +485,8 @@ watch(
}
// 特殊处理录波项目 - 如果是25005消息且当前项目是录波项目则使用已设置的状态
if (newValue.code == 25005 && item.code === 'wave_data') {
if ((newValue.code == 25005 || newValue.code == 25006) && item.code === 'wave_data') {
const existingWaveItem = checkResult.find(checkItem => checkItem.scriptType === 'wave_data')
if (existingWaveItem) {
temp.devices = [...existingWaveItem.devices] // 保留已设置的devices
@@ -536,6 +535,9 @@ watch(
if(newValue.code == 25005){
setLogList("error", '实时数据校验失败!开始录波校验...')
}
if(newValue.code == 25006){
setLogList("error", '统计数据校验失败!开始录波校验...')
}
break
}

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;
}

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>

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'
// ==================== 日志数据存储 ====================
// 各步骤的日志数据,用于在右侧折叠面板中显示实时日志

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';
const props = defineProps<{
visible: boolean;
}>();
<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 emit = defineEmits<{
(e: 'update:visible', value: boolean): void;
(e: 'submit', data: any): void;
}>();
const props = defineProps<{
visible: boolean
}>()
const testScriptName = ref('Q/GDW 10650.4-2021 模拟式');
const errorSysName = ref('Q/GDW 10650.2-2021');
const dataRule = ref('所有值');
const DataCheckDialogVisible = ref(false);
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 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;
};
const handleCancel = () => {
emit('update:visible', false); // 关闭对话框
};
DataCheckDialogVisible.value = true
}
</script>
<style scoped>
.result-dialog{
const handleCancel = () => {
emit('update:visible', false) // 关闭对话框
}
</script>
<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;
}

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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>

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>

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

View File

@@ -1,165 +1,165 @@
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
//
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
//
const getParentNodes = (node, parents) => {
if (node.parent) {
//
parents.push(node.parent.data)
//
getParentNodes(node.parent, parents)
}
return parents
}
// childActiveName
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // scriptTypeCode
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // children
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
//
const checked = [data.id]; // idtreenode-key
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
//
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
//
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// //
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
:highlight-current="true"
@node-click="handleNodeClick"
show-checkbox
:check-strictly="true"
@check-change="handleCheckChange"
ref="treeRef"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch, nextTick } from 'vue'
import { CheckData } from '@/api/check/interface'
import { da } from 'element-plus/es/locale'
import { on } from 'events'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const activeIndex = ref()
const treeRef = ref()
const handleNodeClick = (data, node) => {
if(data.index!= null){
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
//
if (activeName.value != active || childActiveName.value != childActive || activeIndex.value != data.index) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive,
activeIndex:data.index
})
}
}
}
//
const getParentNodes = (node, parents) => {
if (node.parent) {
//
parents.push(node.parent.data)
//
getParentNodes(node.parent, parents)
}
return parents
}
// childActiveName
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // scriptTypeCode
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // children
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
function handleCheckChange(data,isChecked) {
if (isChecked)
{
//
const checked = [data.id]; // idtreenode-key
treeRef.value?.setCheckedKeys(checked);
emit('setTab', {
activeName: data.scriptType,
childActiveName: data.scriptTypeCode,
activeIndex:data.index
})
}
}
//
function findFirstLeafNode(node: any): any {
if (node.children && node.children.length > 0) {
return findFirstLeafNode(node.children[0]);
}
return node;
}
const checkTree = () => {
console.log('checkTree11')
console.log('checkTree22',props.treeData.length)
console.log('checkTree33',treeRef.value)
if (props.treeData.length > 0 && treeRef.value) {
console.log('checkTree44')
const firstNode = props.treeData[0];
const firstLeafNode = findFirstLeafNode(firstNode);
const firstLeafNodeId = firstLeafNode.id;
treeRef.value.setCheckedKeys([firstLeafNodeId]);
}
}
//
onMounted(() => {
console.log('onMounted',props.treeData);
nextTick(() => {
checkTree()
});
});
// //
defineExpose({ checkTree })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>

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>
<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';
</div>
<MonitorPopup @getParameter="getParameter" ref="monitorPopup" />
</template>
// 定义 props
const props = defineProps<{
DevFormContent:Device.ResPqDev,
tableHeight?: number, // 接收外部传入的高度
selectOptions: Record<string, Device.SelectOption[]>,
}>();
<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'
// ProTable 实例
const proTable = ref<ProTableInstance>()
const dictStore = useDictStore()
const monitorPopup = ref()
const tableData = ref<any[]>([])
const title_Type = ref('add')
// 定义 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')
// 表格配置项
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>

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">注1UN测量的标称电压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">
注1UN测量的标称电压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>

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>

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"/>
</el-select>
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>
@@ -33,44 +52,45 @@
</div>
</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([]); // 修改这里
const handleTableDataUpdate = (newTableData: ErrorSystem.ErrorSystemDetail[]) => {
tableData.value = newTableData;
};
function useMetaInfo() {
<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
}
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 =[]
}
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
})
tableData.value = []
}
// 定义规则
const rules: Ref<Record<string, Array<FormItemRule>>> = ref({
let dialogTitle = computed(() => {
return titleType.value === 'add' ? '新增误差体系' : '编辑误差体系'
})
// 定义规则
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);
ElMessage.success({ message: `${dialogTitle.value}成功!` })
}
} else {
await addPqErrSys(formContent.value)
ElMessage.success({ message: `${dialogTitle.value}成功!` })
}
close()
// 刷新表格
await props.refreshTable!()
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>

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">
@@ -41,7 +42,7 @@
:formContent="props.formContent"
:options="props.options"
style="width: 360px"
:shrink="props.shrink"
:shrink="props.shrink"
:disabled="tab.children.length == 0 ? false : true"
ref="communRef"
/>
@@ -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;
}

View File

@@ -1,106 +1,106 @@
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { CheckData } from '@/api/check/interface'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const handleNodeClick = (data, node) => {
console.log('handleNodeClick', data, node)
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
//
if (activeName.value != active || childActiveName.value != childActive) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive
})
}
}
//
const getParentNodes = (node, parents) => {
if (node.parent) {
//
parents.push(node.parent.data)
//
getParentNodes(node.parent, parents)
}
return parents
}
// childActiveName
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // scriptTypeCode
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // children
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
onMounted(() => {})
// //
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>
<template>
<el-tree
node-key="id"
default-expand-all
:data="props.treeData"
:props="defaultProps"
style="width: 100%"
:expand-on-click-node="false"
@node-click="handleNodeClick"
>
<template #default="{ node, data }">
<el-tooltip effect="dark" :content="data.sourceDesc || data.scriptTypeName" placement="top" :hide-after="0">
<div class="custom-tree-node">
{{ data.scriptTypeName || data.sourceDesc }}
</div>
</el-tooltip>
</template>
</el-tree>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { CheckData } from '@/api/check/interface'
const props = defineProps({
treeData: {
type: Array,
required: true
}
})
const emit = defineEmits(['setTab'])
const dataTree = ref<CheckData.TreeItem[]>([])
const defaultProps = {
children: 'children',
label: 'scriptTypeName',
pid: 'pid'
}
const activeName = ref('')
const childActiveName = ref('')
const handleNodeClick = (data, node) => {
console.log('handleNodeClick', data, node)
let code = ['Base', 'VOL', 'Freq', 'Harm', 'Base_0_10', 'Base_20_85', 'Base_110_200']
const parents = getParentNodes(node, [])
parents.pop()
parents.unshift(node.data)
parents.reverse()
let active = parents[0].scriptTypeCode
let childActive = findTargetCodes(parents, code)[0] || ''
//
if (activeName.value != active || childActiveName.value != childActive) {
activeName.value = active
childActiveName.value = childActive
emit('setTab', {
activeName: active,
childActiveName: childActive
})
}
}
//
const getParentNodes = (node, parents) => {
if (node.parent) {
//
parents.push(node.parent.data)
//
getParentNodes(node.parent, parents)
}
return parents
}
// childActiveName
function findTargetCodes(data: any[], targetCodes: string[]) {
let result: string[] = []
data.forEach(item => {
if (item.scriptTypeCode != null) {
if (targetCodes.includes(item.scriptTypeCode)) {
result.push(item.scriptTypeCode)
}
}
})
return result
// for (let item of data) {
// // scriptTypeCode
// if (item.scriptTypeCode !=null && targetCodes.includes(item.scriptTypeCode)) {
// result.push(item.scriptTypeCode)
// return result
// }
// // children
// if (item.children && item.children.length > 0) {
// result = result.concat(findTargetCodes(item.children, targetCodes))
// }
// }
// return result
}
onMounted(() => {})
// //
// defineExpose({ init })
</script>
<style lang="scss" scoped>
.custom-tree-node {
max-width: 230px;
overflow-x: hidden !important;
white-space: nowrap !important;
text-overflow: ellipsis !important;
}
</style>

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>

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>

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>

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>

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>

File diff suppressed because it is too large Load Diff

View File

@@ -416,7 +416,7 @@ const renderTabs = () => {
})
}
// 子计划 tabs
if (planFormContent.value?.children?.length > 0) {
if (planFormContent.value && planFormContent.value.children && planFormContent.value.children?.length > 0) {
planFormContent.value.children.forEach((child, index) => {
tabs.push({
title: child.name,
@@ -445,7 +445,8 @@ const unbindDevice = (row: any) => {
await subPlanBindDev({ planId: row.planId, devIds: [row.id], bindFlag: 0 }) //解绑 0 绑定 1
// 👇 更新数据(例如清空 state 字段)
row.state = '/'
proTable.value?.getTableList()
await proTable.value?.getTableList()
await props.refreshTable!()
// 可选:刷新表格或提交接口
ElMessage.success('解绑成功')
})
@@ -500,6 +501,7 @@ const distribute = (childPlan: Plan.ResPlan, scope: any) => {
.then(async () => {
await subPlanBindDev({ planId: childPlan.id, devIds: scope.selectedListIds, bindFlag: 1 }) //解绑 0 绑定 1
proTable.value?.getTableList()
await props.refreshTable!()
ElMessage.success('分配成功')
})
.catch(() => {

View File

@@ -367,6 +367,7 @@ const initTree = (data: Device[]) => {
filter.value.groupBy
)
defaultCheckedKeys.value = data.filter(item => item.checked).map(item => item.id)
modelValue.value = defaultCheckedKeys.value
// 统计数据
statistics.value.checked = defaultCheckedKeys.value.length
statistics.value.total = data.length

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 {
@@ -460,8 +460,10 @@ const generateData = () => {
i.manufacturer = manufacturer.name
}
}
i.checked = boundPqDevIds.includes(i.id)
i.disabled = i.checkState != 0
i.checked = boundPqDevIds.length > 0 ? boundPqDevIds.includes(i.id) : false
if (i.checkState && i.checkState != 0) {
i.disabled = true
}
if (allDisabled.value) {
i.disabled = true
}
@@ -668,12 +670,12 @@ const save = () => {
if (planType.value == 1) {
formContent.fatherPlanId = formContent.id
formContent.id = ''
formContent.memberIds = [formContent.memberIds?.toString()]
formContent.memberIds = formContent.memberIds ? [formContent.memberIds?.toString()] : []
await addPlan(formContent)
emit('update:tab')
// 编辑子计划
} else if (planType.value == 2) {
formContent.memberIds = [formContent.memberIds?.toString()]
formContent.memberIds = formContent.memberIds ? [formContent.memberIds?.toString()] : []
await updatePlan(formContent)
emit('update:tab')
console.log('更新子计划', formContent)
@@ -947,6 +949,13 @@ const open = async (sign: string, data: Plan.ReqPlan, currentMode: string, plan:
...user,
disabled: childrenMembers.includes(user.id) || formContent.leader === user.id
}))
const subPlanIds = data.children.map((item: any) => item.id)
const subBoundDev_Result = await getBoundPqDevList({ planIdList: subPlanIds })
const subBoundDevData = Array.isArray(subBoundDev_Result.data) ? subBoundDev_Result.data : []
const subBoundDevIds = subBoundDevData.map((item: any) => item.id)
boundPqDevList.value.forEach((item: any) => {
item.disabled = subBoundDevIds.includes(item.id)
})
}
} else if (planType.value === 1) {
unboundPqDevList.value = boundData.filter((i: any) => !i.boundPlanName) as Device.ResPqDev[]

View File

@@ -103,7 +103,7 @@
type="primary"
v-auth.plan="'analysis'"
link
:icon="List"
icon="DataLine"
v-if="scope.row.testState == '2'"
@click="statisticalAnalysis(scope.row)"
>
@@ -149,7 +149,7 @@
<script setup lang="tsx" name="useProTable">
import ProTable from '@/components/ProTable/index.vue'
import type { ColumnProps, ProTableInstance } from '@/components/ProTable/interface'
import { CirclePlus, Delete, Download, List, Upload } from '@element-plus/icons-vue'
import { CirclePlus, Delete, Download, Upload } from '@element-plus/icons-vue'
import {
deletePlan,
downloadTemplate,
@@ -365,7 +365,7 @@ const columns = reactive<ColumnProps<Plan.ReqPlan>[]>([
<el-progress
text-inside={true}
stroke-width={20}
percentage={(scope.row.progress ?? 0) * 100}
percentage={Number(((scope.row.progress ?? 0) * 100).toFixed(2))}
status="success"
/>
)

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>