UPDATE: 处理控制台警告问题

frontend/src/components/ErrorMessage/403.vue

@@ -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>

frontend/src/components/ErrorMessage/404.vue

@@ -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>

frontend/src/components/ErrorMessage/500.vue

@@ -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>

frontend/src/components/Loading/index.vue

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

frontend/src/components/SelectIcon/index.vue

@@ -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>

frontend/src/components/TimeControl/index.vue

@@ -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>
-

frontend/src/components/echarts/line/index.vue

@@ -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'

frontend/src/layouts/LayoutClassic/index.vue

@@ -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>

frontend/src/layouts/LayoutColumns/index.vue

@@ -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>

frontend/src/layouts/LayoutTransverse/index.vue

@@ -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>

frontend/src/layouts/LayoutVertical/index.vue

@@ -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>

frontend/src/layouts/components/Footer/index.vue

@@ -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>

frontend/src/layouts/components/Main/index.vue

@@ -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>

frontend/src/layouts/components/Tabs/components/MoreButton.vue

@@ -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>

frontend/src/layouts/components/Tabs/index.vue

@@ -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>

frontend/src/layouts/components/ThemeDrawer/index.vue

@@ -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>

frontend/src/views/authority/resource/components/resourcePopup.vue

@@ -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>

frontend/src/views/home/components/channelsTestTable.vue

@@ -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>

frontend/src/views/home/components/compareDataCheckSingleChannelSingleTestPopup.vue

@@ -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,15 +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
         // 设置录波数据相关的选项
@@ -275,7 +282,7 @@ const initGetResult = async () => {
             label: item.scriptName,
             value: item.scriptName
         }))
-        
+
         // 默认选中第一个选项
         if (scriptNameOptions.value.length > 0) {
             selectedScriptName.value = scriptNameOptions.value[0].value
@@ -292,7 +299,6 @@ const initGetResult = async () => {
     }
 }
 
-
 // 查询大项树
 const initScriptData = async () => {
     let response: any = await getScriptList({
@@ -300,7 +306,7 @@ const initScriptData = async () => {
         chnNum: formContent.chnNum,
         num: formContent.num
     })
-    
+
     // 格式化脚本数据
     let temp = response.data.map((item: any) => {
         return {
@@ -313,11 +319,10 @@ const initScriptData = async () => {
     scriptData.value = temp
 
     // 查找code为"录波"的项
-    let luoboItem = response.data.find((item: any) => item.code === 'wave_data');
+    let luoboItem = response.data.find((item: any) => item.code === 'wave_data')
     // 如果找到了"录波"项，则使用其subitems，否则使用空数组
-    let temp2 = [];
+    let temp2 = []
     if (luoboItem && luoboItem.subItems) {
-
         // 格式化脚本数据
         temp2 = luoboItem.subItems.map((item: any) => {
             return {
@@ -328,10 +333,8 @@ const initScriptData = async () => {
     }
     selectScript.value = temp2
 
-
     // 只有在sourceKey == 2时才设置rowList和tree相关属性
     if (sourceKey.value === 2 && temp.length > 0) {
-       
         rowList.value.scriptName = temp[0].scriptName
         rowList.value.scriptType = temp[0].id
         selectedScriptName.value = temp[0].scriptName
@@ -339,8 +342,6 @@ const initScriptData = async () => {
             treeRef.value?.setCurrentKey(temp[0].id)
         }, 0)
     }
-
-   
 }
 
 // 获取基本信息
@@ -348,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()
     // }
@@ -369,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) {
             // 获取当前通道号对应的检测次数数组，并设置为最后一个值（最大值）
@@ -389,8 +390,6 @@ const getBasicInformation = async (scriptType: any) => {
             formContent.num = numList[numList.length - 1]
         }
         waveNumCount.value = res.data.waveNumTotal
-        
-        
     } catch (error) {
         console.error('获取基本信息失败:', error)
     }
@@ -414,7 +413,7 @@ const handleNumChange = async (value: string) => {
 const handleCommonChange = async () => {
     // 重新初始化脚本数据（更新左侧树）
     await initScriptData()
-    
+
     // 触发当前选中节点的点击事件，保持界面状态一致
     if (sourceKey.value === 2 && scriptData.value.length > 0) {
         // 查找当前选中的节点
@@ -431,7 +430,7 @@ const handleCommonChange = async () => {
         const tempNode = {
             scriptName: rowList.value.scriptName,
             id: rowList.value.scriptType,
-            code: rowList.value.scriptName === "录波数据" ? 'wave_data' : ''
+            code: rowList.value.scriptName === '录波数据' ? 'wave_data' : ''
         }
         handleNodeClick(tempNode)
     }
@@ -450,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
@@ -464,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)
     }
@@ -495,8 +492,8 @@ const getResults = async (code: any) => {
         deviceId: formContent.deviceId,
         chnNum: formContent.chnNum,
         num: formContent.num == '' ? null : formContent.num,
-        waveNum:  isWaveDataRequest ?  waveNumber.value : null,
-        isWave:  isWaveDataRequest ,
+        waveNum: isWaveDataRequest ? waveNumber.value : null,
+        isWave: isWaveDataRequest,
         patternId: pattern.value
     }).then((res: any) => {
         let list: string[] = []
@@ -507,8 +504,6 @@ const getResults = async (code: any) => {
         tesList.value = list
         checkResultData.value = res.data.resultMap
         rawTableData.value = res.data.rawDataMap
-
-       
     })
 }
 
@@ -541,39 +536,35 @@ const close = async () => {
 }
 
 const handleErrorSysChange = async () => {
-  changeErrorSystem({
-    planId: checkStore.plan.id,
-    scriptId: '',
-    errorSysId: formContent.errorSysId,
-    deviceId: formContent.deviceId,
-    code: checkStore.plan.code + '',
-    patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '',
-  }).then((res) => {
-    if (res.code === ResultEnum.SUCCESS) {
-      ElMessage.success('切换误差体系成功')
-      handleChnNumChange(formContent.chnNum)
-    }
-  })
+    changeErrorSystem({
+        planId: checkStore.plan.id,
+        scriptId: '',
+        errorSysId: formContent.errorSysId,
+        deviceId: formContent.deviceId,
+        code: checkStore.plan.code + '',
+        patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
+    }).then(res => {
+        if (res.code === ResultEnum.SUCCESS) {
+            ElMessage.success('切换误差体系成功')
+            handleChnNumChange(formContent.chnNum)
+        }
+    })
 }
 
-
-
 const handleReCalculate = async () => {
-  reCalculate({
-    planId: checkStore.plan.id,
-    scriptId: '',
-    errorSysId: formContent.errorSysId,
-    deviceId: formContent.deviceId,
-    code: checkStore.plan.code + '',
-    patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? '',
-  }).then((res) => {
-    if (res.code === ResultEnum.SUCCESS) {
-      ElMessage.success('重新计算成功！')
-      handleChnNumChange(formContent.chnNum)
-  
-    }
-   
-  })
+    reCalculate({
+        planId: checkStore.plan.id,
+        scriptId: '',
+        errorSysId: formContent.errorSysId,
+        deviceId: formContent.deviceId,
+        code: checkStore.plan.code + '',
+        patternId: dictStore.getDictData('Pattern').find(item => item.name === modeStore.currentMode)?.id ?? ''
+    }).then(res => {
+        if (res.code === ResultEnum.SUCCESS) {
+            ElMessage.success('重新计算成功！')
+            handleChnNumChange(formContent.chnNum)
+        }
+    })
 }
 
 defineExpose({

frontend/src/views/home/components/comparePreTest.vue

@@ -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()

frontend/src/views/home/components/compareTestPopup.vue

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

frontend/src/views/home/components/dataCheckResultTable.vue

@@ -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>

frontend/src/views/home/components/preTest.vue

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

frontend/src/views/home/components/resultPopup.vue

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

frontend/src/views/login/components/LoginForm.vue

@@ -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>

frontend/src/views/login/index.vue

@@ -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>

frontend/src/views/machine/controlSource/components/controlSourceDetail.vue

@@ -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

frontend/src/views/machine/controlSource/components/machineTree.vue

@@ -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]; // id为tree的node-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]; // id为tree的node-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>

frontend/src/views/machine/device/components/monitorTab.vue

@@ -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>

frontend/src/views/machine/errorSystem/components/errorStandardPopup.vue

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

frontend/src/views/machine/errorSystem/components/errorSystemDetailTable.vue

@@ -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>

frontend/src/views/machine/errorSystem/components/errorSystemPopup.vue

@@ -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>

frontend/src/views/machine/testScript/components/testScriptDetail.vue

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

frontend/src/views/machine/testScript/components/testScriptTree.vue

@@ -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>

frontend/src/views/machine/testSource/components/parameterPopup.vue

@@ -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>

frontend/src/views/machine/testSource/components/parameterTable.vue

@@ -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>

frontend/src/views/machine/testSource/components/testSourcePopup.vue

@@ -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>

frontend/src/views/plan/autoTest/components/autoTestTable.vue

@@ -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>

frontend/src/views/plan/autoTest/components/table.vue

@@ -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>

frontend/src/views/plan/planList/components/planPopup.vue

@@ -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 {

frontend/src/views/plan/singlePlanList/index.vue

@@ -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>