Merge branch 'main' of http://192.168.1.22:3000/Web/admin-govern

修改组件管理时间线配置

src/api/cs-harmonic-boot/recruitment.ts

@@ -25,3 +25,12 @@ export function offlineDataUploadMakeUp(data: any) {
         data
     })
 }
+//设备补召操作
+// 根据id集合获取敏感负荷用户列表
+export function getListByIds() {
+    return createAxios({
+        url: '/cs-harmonic-boot/pqSensitiveUser/getListByIds',
+        method: 'POST',
+        
+    })
+}

src/api/system-boot/csDictData.ts

@@ -116,3 +116,11 @@ export const start = (params: any) => {
         params
     })
 }
+// 查询监测对象类型
+export const getDicDataByTypeCode = (params: any) => {
+    return request({
+        url: '/system-boot/dictData/getDicDataByTypeCode',
+        method: 'get',
+        params
+    })
+}

src/components/cockpit/indicatorDetails/index.vue

@@ -8,6 +8,7 @@
             datePicker
             v-if="fullscreen"
             :timeCacheFlag="false"
+            :timeKeyList="['3']"
         ></TableHeader>
         <el-calendar
             v-model="value"
@@ -44,6 +45,7 @@ import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import TableStore from '@/utils/tableStore'
 import TableHeader from '@/components/table/header/index.vue'
 import { dayjs } from 'element-plus'
+import { getTime } from '@/utils/formatTime'
 
 const prop = defineProps({
     w: { type: [String, Number] },
@@ -51,7 +53,8 @@ const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
     timeKey: { type: [String, Number] },
-    timeValue: { type: Object }
+    timeValue: { type: Object },
+    interval: { type: Number }
 })
 
 const headerHeight = ref(57)
@@ -95,11 +98,22 @@ const tableStore: any = new TableStore({
     method: 'POST',
     showPage: false,
     column: [],
+    // beforeSearchFun: () => {
+    //     if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
+    //         tableStore.table.params.searchBeginTime = prop.timeValue[0]
+    //         tableStore.table.params.searchEndTime = prop.timeValue[1]
+    //     }
+    // },
     beforeSearchFun: () => {
-        if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
-            tableStore.table.params.searchBeginTime = prop.timeValue[0]
-            tableStore.table.params.searchEndTime = prop.timeValue[1]
-        }
+        const time = getTime(
+            prop.interval ?? 0,
+            prop.timeKey,
+            tableStore.table.params.searchBeginTime && tableStore.table.params.searchEndTime
+                ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+                : prop.timeValue
+        )
+        tableStore.table.params.searchBeginTime = time[0]
+        tableStore.table.params.searchEndTime = time[1]
     },
     loadCallback: () => {
         value.value = tableStore.table.params.searchBeginTime
@@ -144,11 +158,24 @@ provide('tableStore', tableStore)
 
 onMounted(() => {
     nextTick(() => {
-        if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
-            TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
-        }
+        // if (TableHeaderRef.value && typeof TableHeaderRef.value.setDatePicker === 'function') {
+        //     TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
+        // }
         if (fullscreen.value) {
-            TableHeaderRef.value.setInterval(3)
+            if (prop.interval == 3) {
+                const time = getTime(
+                    prop.interval ?? 0,
+                    prop.timeKey,
+                    tableStore.table.params.searchBeginTime && tableStore.table.params.searchEndTime
+                        ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+                        : prop.timeValue
+                )
+                tableStore.table.params.searchBeginTime = time[0]
+                tableStore.table.params.searchEndTime = time[1]
+                TableHeaderRef.value.setTimeInterval(prop.timeValue)
+            } else {
+                TableHeaderRef.value.setInterval(3)
+            }
         }
         tableStore.index()
     })
@@ -161,18 +188,14 @@ watch(
 )
 watch(
     () => prop.timeValue,
-    // (newVal, oldVal) => {
-    //     // 当外部时间值变化时，更新表格的时间参数
-    //     if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
-    //         tableStore.table.params.searchBeginTime = newVal[0]
-    //         tableStore.table.params.searchEndTime = newVal[1]
-    //         tableStore.index()
-    //     }
-    // },
-    val => {
-        tableStore.index()
+    (newVal, oldVal) => {
+        // 当外部时间值变化时，更新表格的时间参数
+        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+            tableStore.table.params.searchBeginTime = newVal[0]
+            tableStore.table.params.searchEndTime = newVal[1]
+            tableStore.index()
+        }
     },
-
     {
         deep: true
     }

src/components/cockpit/indicatorDistribution/index.vue

@@ -21,7 +21,7 @@
                 :options="echartList"
                 :style="{
                     width: prop.width,
-                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
+                    height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`,
                 }"
             />
             <my-echart
@@ -187,43 +187,19 @@ const initProbabilityData = () => {
                         type: 'category',
                         name: '越限程度',
                         nameLocation: 'middle',
-                        nameGap: 30,
+                       nameGap: 50,
                         data: ['0-20%', '20-40%', '40-60%', '60-80%', '80-100%'],
-                        axisLine: {
-                            lineStyle: {
-                                color: '#111'
-                            }
-                        },
-                        axisLabel: {
-                            color: '#111',
-                            margin: 15
-                        },
-                        nameTextStyle: {
-                            color: '#111'
-                        }
+                        
                     },
                     yAxis3D: {
                         type: 'category',
                         name: '指标类型',
                         nameLocation: 'middle',
-                        nameGap: 30,
+                        nameGap: 50,
                         data: yAxisData,
-                        nameTextStyle: {
-                            color: '#111'
-                        },
-                        axisLine: {
-                            show: true,
-                            lineStyle: {
-                                color: '#111'
-                            }
-                        },
-                        axisLabel: {
-                            color: '#111',
-                            margin: 15
-                        },
+                     
                         splitLine: {
                             lineStyle: {
-                                color: ['#111'],
                                 type: 'dashed',
                                 opacity: 0.5
                             }
@@ -234,19 +210,8 @@ const initProbabilityData = () => {
                         name: '越限次数',
                         nameLocation: 'middle',
                         nameGap: 30,
-                        nameTextStyle: {
-                            color: '#111'
-                        },
-                        axisLine: {
-                            lineStyle: {
-                                color: '#111'
-                            }
-                        },
-                        axisLabel: {
-                            color: '#111'
-                        },
-                        min: 0,
-                        max: zAxisMax // 使用计算出的最大值加5
+                        minInterval: 10,
+                       
                         // max: 100
                     },
                     grid3D: {

src/components/cockpit/indicatorFittingChart/index.vue

@@ -22,11 +22,10 @@ import { ref, onMounted, provide, reactive, watch, nextTick } from 'vue'
 import TableStore from '@/utils/tableStore'
 import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
-import { getTimeOfTheMonth } from '@/utils/formatTime'
+import { getTime } from '@/utils/formatTime'
 import OverLimitDetails from '@/components/cockpit/indicatorFittingChart/components/overLimitDetails.vue'
 import { useRoute } from 'vue-router'
 import { useTimeCacheStore } from '@/stores/timeCache'
-import { log } from 'console'
 
 const prop = defineProps({
     w: { type: [String, Number] },
@@ -34,7 +33,8 @@ const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
     timeKey: { type: [String, Number] },
-    timeValue: { type: Object }
+    timeValue: { type: Object },
+    interval: { type: Number }
 })
 const OverLimitDetailsRef = ref()
 const headerHeight = ref(57)
@@ -104,8 +104,18 @@ const tableStore: any = new TableStore({
         { title: '主要存在的电能质量问题', field: 'problems', minWidth: '150', showOverflow: true }
     ],
     beforeSearchFun: () => {
-        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
-        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+        // tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
+        // tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+
+        const time = getTime(
+            prop.interval ?? 0,
+            prop.timeKey,
+            tableStore.table.params.searchBeginTime && tableStore.table.params.searchEndTime
+                ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+                : prop.timeValue
+        )
+        tableStore.table.params.searchBeginTime = time[0]
+        tableStore.table.params.searchEndTime = time[1]
     },
     loadCallback: () => {
         tableStore.table.height = `calc(${prop.height} - 80px)`

src/components/cockpit/listOfMainMonitoringPoints/index.vue

@@ -1,7 +1,13 @@
 <template>
     <div>
         <!--指标拟合图 -->
-        <TableHeader datePicker @selectChange="selectChange" v-if="fullscreen">
+        <TableHeader
+            datePicker
+            @selectChange="selectChange"
+            v-if="fullscreen"
+            ref="TableHeaderRef"
+            :timeKeyList="['4', '5']"
+        >
             <template v-slot:select>
                 <el-form-item label="监测点">
                     <el-select v-model="tableStore.table.params.lineId" placeholder="请选择监测点" clearable>
@@ -75,6 +81,7 @@ import { useConfig } from '@/stores/config'
 import { cslineList, fittingData } from '@/api/harmonic-boot/cockpit/cockpit'
 import { queryByCode, queryCsDictTree } from '@/api/system-boot/dictTree'
 import { ElMessage } from 'element-plus'
+import { getTime } from '@/utils/formatTime'
 
 const prop = defineProps({
     w: { type: [String, Number] },
@@ -82,9 +89,12 @@ const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
     timeKey: { type: [String, Number] },
-    timeValue: { type: Object }
+    timeValue: { type: Object },
+    interval: { type: Number }
 })
 
+const TableHeaderRef = ref()
+
 const config = useConfig()
 
 const lineList: any = ref()
@@ -131,7 +141,6 @@ const echartList = ref()
 const headerHeight = ref(57)
 const selectChange = (showSelect: any, height: any, datePickerValue?: any) => {
     headerHeight.value = height
-
     if (datePickerValue && datePickerValue.timeValue) {
         // 更新时间参数
         tableStore.table.params.searchBeginTime = datePickerValue.timeValue[0]
@@ -255,6 +264,7 @@ const initCode = () => {
             tableStore.table.params.power = powerList.value[0].id
             tableStore.table.params.indicator = indicatorList.value[0].id
             nextTick(() => {
+                // setTime()
                 tableStore.index()
             })
         })
@@ -268,9 +278,19 @@ const tableStore: any = new TableStore({
     exportName: '主要监测点列表',
     column: [],
     beforeSearchFun: () => {
+        setTime()
         // 设置时间参数
-        tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
-        tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+        // tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
+        // tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
+        // const time = getTime(
+        //     prop.interval ?? 0,
+        //     prop.timeKey,
+        //     tableStore.table.params.searchBeginTime && tableStore.table.params.searchEndTime
+        //         ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+        //         : prop.timeValue
+        // )
+        // tableStore.table.params.searchBeginTime = time[0]
+        // tableStore.table.params.searchEndTime = time[1]
 
         // 只有当 lineList 已加载且有数据时才设置默认 lineId
         if (!tableStore.table.params.lineId && lineList.value && lineList.value.length > 0) {
@@ -373,25 +393,57 @@ watch(
 )
 
 onMounted(() => {
+    // if (fullscreen.value) {
+    //     if (prop.interval == 4 || prop.interval == 5) {
+    //         const time = getTime(
+    //             prop.interval ?? 0,
+    //             prop.timeKey,
+    //             tableStore.table.params.searchBeginTime && tableStore.table.params.searchEndTime
+    //                 ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+    //                 : prop.timeValue
+    //         )
+    //         tableStore.table.params.searchBeginTime = time[0]
+    //         tableStore.table.params.searchEndTime = time[1]
+    //         TableHeaderRef.value.setTimeInterval(prop.timeValue)
+    //     } else {
+    //         TableHeaderRef.value.setInterval(5)
+    //     }
+    // }
     initLineList().then(() => {
         initCode()
     })
 })
+
 watch(
     () => prop.timeKey,
     val => {
         tableStore.index()
     }
 )
+const setTime = () => {
+    const time = getTime(
+        (TableHeaderRef.value?.datePickerRef.interval || prop.interval) ?? 0,
+        prop.timeKey,
+        fullscreen.value
+            ? [tableStore.table.params.searchBeginTime, tableStore.table.params.searchEndTime]
+            : prop.timeValue
+    )
+    console.log("🚀 ~ setTime ~ time:", time)
+
+    tableStore.table.params.searchBeginTime = time[0]
+    tableStore.table.params.searchEndTime = time[1]
+    TableHeaderRef.value?.setInterval(time[2] - 0)
+    TableHeaderRef.value?.setTimeInterval([time[0], time[1]])
+}
+
 watch(
     () => prop.timeValue,
     (newVal, oldVal) => {
         // 当外部时间值变化时，更新表格的时间参数
-        if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
-            tableStore.table.params.searchBeginTime = newVal[0]
-            tableStore.table.params.searchEndTime = newVal[1]
-            tableStore.index()
-        }
+        // if (newVal && (!oldVal || newVal[0] !== oldVal[0] || newVal[1] !== oldVal[1])) {
+        tableStore.index()
+
+        // }
     },
     {
         deep: true

src/components/cockpit/transientDetails/index.vue

@@ -68,7 +68,8 @@ const prop = defineProps({
     width: { type: [String, Number] },
     height: { type: [String, Number] },
     timeKey: { type: [String, Number] },
-    timeValue: { type: Object }
+    timeValue: { type: Object },
+    interval: { type: [String, Number] }
 })
 
 const headerHeight = ref(57)
@@ -119,9 +120,14 @@ const tableStore: any = new TableStore({
     column: [],
 
     beforeSearchFun: () => {
-        if (!fullscreen.value && prop.timeValue && Array.isArray(prop.timeValue)) {
-            tableStore.table.params.searchBeginTime = prop.timeValue[0]
-            tableStore.table.params.searchEndTime = prop.timeValue[1]
+        if (!fullscreen.value) {
+            if (prop.interval == 3 && prop.timeValue && Array.isArray(prop.timeValue)) {
+                tableStore.table.params.searchBeginTime = prop.timeValue[0]
+                tableStore.table.params.searchEndTime = prop.timeValue[1]
+            } else {
+                tableStore.table.params.searchBeginTime = '2025-12-1'
+                tableStore.table.params.searchEndTime = '2025-12-31'
+            }
         }
     },
 
@@ -152,7 +158,13 @@ onMounted(() => {
             TableHeaderRef.value.setDatePicker([{ label: '月份', value: 3 }])
         }
         if (fullscreen.value) {
-            TableHeaderRef.value.setInterval(3)
+            if (prop.interval == 3 && prop.timeValue && Array.isArray(prop.timeValue)) {
+                tableStore.table.params.searchBeginTime = prop.timeValue[0] || tableStore.table.params.searchBeginTime
+                tableStore.table.params.searchEndTime = prop.timeValue[1] || tableStore.table.params.searchEndTime
+                TableHeaderRef.value.setTimeInterval(prop.timeValue)
+            } else {
+                TableHeaderRef.value.setInterval(3)
+            }
         }
         tableStore.index()
     })
@@ -160,7 +172,16 @@ onMounted(() => {
 watch(
     () => prop.timeKey,
     val => {
-        tableStore.index()
+        // tableStore.index()
+    }
+)
+
+watch(
+    () => prop.interval,
+    val => {
+        if (val == 3) {
+            tableStore.index()
+        }
     }
 )
 watch(
@@ -183,7 +204,7 @@ watch(
 )
 
 // 电压暂降点击事件
-const descentClick = (item:any) => {
+const descentClick = (item: any) => {
     transientListRef.value.open(item.name)
 }
 </script>

src/components/cockpit/transientDistribution/index.vue

@@ -302,34 +302,17 @@ const tableStore: any = new TableStore({
                     type: 'category',
                     name: '特征幅值',
                     data: xLabels,
-                    axisLine: {
-                        lineStyle: {
-                            color: '#111'
-                        }
-                    },
-                    axisLabel: {
-                        color: '#111'
-                    }
+                      nameGap: 40,
+                   
                 },
                 yAxis3D: {
                     type: 'category',
                     name: '持续时间',
                     data: yLabels,
-                    nameTextStyle: {
-                        color: '#111'
-                    },
-                    axisLine: {
-                        show: true,
-                        lineStyle: {
-                            color: '#111'
-                        }
-                    },
-                    axisLabel: {
-                        color: '#111'
-                    },
+                     nameGap: 40,
+                  
                     splitLine: {
                         lineStyle: {
-                            color: ['#111'],
                             type: 'dashed',
                             opacity: 0.5
                         }
@@ -337,15 +320,16 @@ const tableStore: any = new TableStore({
                 },
                 zAxis3D: {
                     type: 'value',
-                    splitNumber: 10,
                     minInterval: 10,
-                    name: '暂态事件次数'
+                    name: '暂态事件次数',
+                       nameGap: 30,
                 },
                 grid3D: {
                     viewControl: {
                         projection: 'perspective',
                         distance: 250
                     },
+                     
                     boxWidth: 200,
                     boxDepth: 80,
                     light: {
@@ -369,20 +353,8 @@ const tableStore: any = new TableStore({
                                 borderWidth: 1
                             }
                         },
-                        itemStyle: {
-                            opacity: 1
-                        },
-                        emphasis: {
-                            label: {
-                                textStyle: {
-                                    fontSize: 20,
-                                    color: '#900'
-                                }
-                            },
-                            itemStyle: {
-                                color: '#900'
-                            }
-                        }
+                      
+                        
                     }
                 ]
             }

src/components/form/datePicker/index.vue

@@ -5,7 +5,7 @@
             style="min-width: 90px; width: 90px; margin-right: 10px"
             @change="timeChange"
         >
-            <el-option v-for="item in timeOptions" :key="item.value" :label="item.label" :value="item.value" />
+            <el-option v-for="item in filteredTimeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
         <el-date-picker
             v-model.trim="timeValue"
@@ -35,13 +35,15 @@ interface Props {
     theCurrentTime?: boolean
     initialInterval?: number
     initialTimeValue?: any
+    timeKeyList?: string[]  //日期下拉
 }
 
 const props = withDefaults(defineProps<Props>(), {
     nextFlag: false,
     theCurrentTime: true,
     initialInterval: 3,
-    initialTimeValue: undefined
+    initialTimeValue: undefined,
+    timeKeyList: () => []
 })
 
 const emit = defineEmits(['change'])
@@ -89,6 +91,19 @@ const shortcuts = [
         }
     }
 ]
+
+// 计算过滤后的 timeOptions
+const filteredTimeOptions = computed(() => {
+    if (!props.timeKeyList || props.timeKeyList.length === 0) {
+        return timeOptions.value
+    }
+    
+    return timeOptions.value.filter((option: any) => 
+        props.timeKeyList.includes(option.value.toString())
+    )
+
+})
+
 onMounted(() => {
     // 使用传入的初始值
     if (props.initialInterval !== undefined) {

src/components/table/header/index.vue

@@ -15,6 +15,7 @@
                         :nextFlag="nextFlag"
                         :theCurrentTime="theCurrentTime"
                         @change="handleDatePickerChange"
+                        :timeKeyList="props.timeKeyList"
                     ></DatePicker>
                 </el-form-item>
 
@@ -89,6 +90,7 @@ interface Props {
     showReset?: boolean //是否显示重置
     showExport?: boolean //导出控制
     timeCacheFlag?: boolean //是否取缓存时间
+    timeKeyList?: Array<string> //日期下拉列表
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -99,7 +101,8 @@ const props = withDefaults(defineProps<Props>(), {
     theCurrentTime: true,
     showReset: true,
     showExport: false,
-    timeCacheFlag: true
+    timeCacheFlag: true,
+    timeKeyList: () => [] // 修改为箭头函数返回空数组
 })
 
 // 处理 DatePicker 值变化事件

src/utils/formatTime.ts

@@ -352,6 +352,7 @@ export function getTimeOfTheMonth(key: any): [string, string] {
             const dayOfWeek = now.getDay() // 0是周日
             const diff = now.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1) // 调整为周一
             const weekStart = new Date(year, month, diff)
+            console.log("🚀 ~ getTimeOfTheMonth ~ weekStart:", weekStart)
             return [formatDate(weekStart, 'YYYY-MM-DD'), formatDate(now, 'YYYY-MM-DD')]
 
         case '5': // 日
@@ -361,3 +362,37 @@ export function getTimeOfTheMonth(key: any): [string, string] {
             throw new Error('Invalid key')
     }
 }
+
+/**
+ * 获取当月时间
+ * @param interval 组件外部时间 1 年 2 季 3 月 4 周 5 日
+ * @param timeList 组件勾选时间 []
+ * @param externalTime //外部传入时间
+ * @param fullscreen // 全屏是否全屏
+ */
+export function getTime(interval: number | 3, timeList: any , externalTime: any, ) {
+    console.log("🚀 ~ getTime ~ timeList:", timeList)
+    // 1、先匹配时间
+    // 检查 interval 是否在 timeList 中
+    if (timeList && timeList.includes(interval.toString())) {
+        return [externalTime[0], externalTime[1], interval]
+
+        // 匹配上了，返回外部传入时间 externalTime
+        // if (externalTime && externalTime.length >= 2) {
+        //     return [externalTime[0], externalTime[1]]
+        // } else {
+        //     // 如果 externalTime 无效，回退到默认逻辑
+        //     return getTimeOfTheMonth(interval.toString())
+        // }
+    } else {
+        return [...getTimeOfTheMonth(timeList[0]), timeList[0], ]
+        // 没有匹配上，返回 timeList 中最后一项的时间范围
+        // if (timeList && timeList.length > 0) {
+        //     const lastItem = timeList[timeList.length - 1]
+        //     return getTimeOfTheMonth(lastItem)
+        // } else {
+        //     // 如果 timeList 为空，使用 interval 参数
+        //     return getTimeOfTheMonth(interval.toString())
+        // }
+    }
+}

src/views/pqs/cockpit/homePage/index.vue

@@ -16,7 +16,6 @@
                 <el-button type="primary" icon="el-icon-Tools" @click="settings">设置</el-button>
             </template>
         </TableHeader>
-
         <GridLayout
             v-model:layout="layout"
             :row-height="rowHeight"
@@ -26,6 +25,7 @@
             :vertical-compact="false"
             prevent-collision
             :col-num="12"
+            :style="{ zoom: zoom }"
         >
             <template #item="{ item }">
                 <div class="box">
@@ -34,8 +34,8 @@
                             <Icon class="HelpFilled" :name="(item as LayoutItem).icon" />
                             {{ (item as LayoutItem).name }}
                         </div>
-                        <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="zoom(item)" /> -->
-                        <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="zoom(item)" />
+                        <!-- <FullScreen class="HelpFilled" style="cursor: pointer" @click="setZoom(item)" /> -->
+                        <img :src="flag ? img : img1" style="cursor: pointer; height: 16px" @click="setZoom(item)" />
                     </div>
                     <div>
                         <component
@@ -46,7 +46,7 @@
                             :timeValue="datePickerRef?.timeValue || 3"
                             :height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
                             :width="rowWidth * item.w - 30 + 'px'"
-                            :timeKey="(item as LayoutItem).timeKey"
+                            :timeKey="(item as LayoutItem).timeKeys"
                             :interval="datePickerRef?.interval"
                             :w="item.w"
                             :h="item.h"
@@ -80,13 +80,14 @@ const timeCacheStore = useTimeCacheStore()
 defineOptions({
     // name: 'dashboard/index'
 })
+
 // 定义类型
 interface LayoutItem {
     x: number
     y: number
     w: number
     h: number
-    timeKey: number | string
+    timeKeys: any
     i: string | number
     name: string
     path: string
@@ -95,6 +96,7 @@ interface LayoutItem {
     loading?: boolean
     error?: any
 }
+const zoom = ref(1)
 const RoutingConfigRef = ref()
 const key = ref(0)
 const img = new URL(`@/assets/img/amplify.png`, import.meta.url).href
@@ -120,13 +122,16 @@ const componentMap = reactive(new Map<string, Component | string>())
 const dataList: any = ref({})
 // 获取主内容区域高度
 const getMainHeight = () => {
-    const elMain = document.querySelector('.el-main')
-    return (elMain?.offsetHeight || 0) - 70
+    const elMain = document.querySelector('.el-main') as HTMLElement | null
+    zoom.value =
+        layout.value.length == 1 ? 1 : (elMain?.offsetHeight ?? 0) > 1080 ? 1 : (elMain?.offsetHeight ?? 0) / 1080
+    // console.log('🚀 ~ getMainHeight ~ elMain:', elMain?.offsetHeight)
+    return ((elMain?.offsetHeight || 0) - 70) / zoom.value
 }
 // 获取主内容区域高度
 const getMainWidth = () => {
-    const elMain = document.querySelector('.el-main')
-    return (elMain?.offsetWidth || 0) - 20
+    const elMain = document.querySelector('.el-main') as HTMLElement | null
+    return ((elMain?.offsetWidth || 0) - 20) / zoom.value
 }
 
 // 初始化行高
@@ -170,8 +175,9 @@ const registerComponent = (path: string): Component | string | null => {
         return null
     }
 }
+
 // 缩放
-const zoom = (value: any) => {
+const setZoom = (value: any) => {
     if (flag.value) {
         layout.value = [{ ...value, x: 0, y: 0, w: 12, h: 6 }]
     } else {
@@ -181,7 +187,6 @@ const zoom = (value: any) => {
             component: registerComponent(item.path)
         }))
     }
-        console.log("🚀 ~ zoom ~ layout.value:", layout.value)
 
     flag.value = !flag.value
 

src/views/pqs/cockpit/setUp/components/popup.vue

@@ -337,7 +337,7 @@ function dragEnd(row: any) {
         name: row.name,
         path: row.path,
         icon: row.icon,
-        timeKey: row.timeKey
+        timeKeys: row.timeKeys
     })
     gridLayout.value.dragEvent('dragend', dragItem.i, dragItem.x, dragItem.y, dragItem.h, dragItem.w)
     const item = gridLayout.value.getItem(dropId)

src/views/pqs/cockpit/setUp/components/view.vue

@@ -43,7 +43,7 @@
                             :timeValue="datePickerRef.timeValue"
                             :height="rowHeight * item.h - seRowHeight(item.h) + 'px'"
                             :width="rowWidth * item.w - 30 + 'px'"
-                            :timeKey="item.timeKey"
+                            :timeKey="item.timeKeys"
                         />
                         <div v-else class="pd10">组件加载失败...</div>
                     </div>

src/views/setting/dictionary/component/add.vue

@@ -1,14 +1,25 @@
 <template>
-    <el-dialog draggable class="cn-operate-dialog" v-model="dialogVisible" width="1000px" :title="title"
-        @close="cancel">
+    <el-dialog
+        draggable
+        class="cn-operate-dialog"
+        v-model="dialogVisible"
+        width="1000px"
+        :title="title"
+        @close="cancel"
+    >
         <div style="display: flex">
             <el-form :inline="false" :model="form" label-width="auto" :rules="rules" ref="formRef" style="flex: 1">
                 <el-form-item class="top" label="组件名称" prop="name">
                     <el-input v-model="form.name" placeholder="请输入组件名称"></el-input>
                 </el-form-item>
                 <el-form-item class="top" label="父组件节点" prop="system">
-                    <el-cascader v-model="form.system" :options="customDeptOption" :props="props" placeholder="请选择父组件节点"
-                        style="width: 100%" />
+                    <el-cascader
+                        v-model="form.system"
+                        :options="customDeptOption"
+                        :props="props"
+                        placeholder="请选择父组件节点"
+                        style="width: 100%"
+                    />
                 </el-form-item>
                 <el-form-item label="组件图标" prop="icon">
                     <IconSelector v-model="form.icon" placeholder="请选择图标" />
@@ -19,24 +30,39 @@
                 <el-form-item class="top" label="组件路径" prop="path">
                     <el-input v-model="form.path" placeholder="请输入组件路径"></el-input>
                 </el-form-item>
-                <!-- <el-form-item class="top" label="组件查询时间">
-                    <el-radio-group v-model="form.timeKey" style="width: 100%">
+                <el-form-item class="top" label="组件查询时间" prop="timeKeys">
+                    <!-- <el-radio-group v-model="form.timeKeys" style="width: 100%">
                         <el-radio-button label="年" value="1" />
                         <el-radio-button label="季" value="2" />
                         <el-radio-button label="月" value="3" />
                         <el-radio-button label="周" value="4" />
                         <el-radio-button label="日" value="5" />
-                    </el-radio-group>
-                </el-form-item> -->
+                    </el-radio-group> -->
+                    <el-checkbox-group v-model="form.timeKeys">
+                        <el-checkbox-button value="1">年</el-checkbox-button>
+                        <el-checkbox-button value="2">季</el-checkbox-button>
+                        <el-checkbox-button value="3">月</el-checkbox-button>
+                        <el-checkbox-button value="4">周</el-checkbox-button>
+                        <el-checkbox-button value="5">日</el-checkbox-button>
+                    </el-checkbox-group>
+                </el-form-item>
                 <el-form-item class="top" label="组件排序" prop="sort">
                     <el-input v-model="form.sort" placeholder="请输入组件排序"></el-input>
                 </el-form-item>
             </el-form>
             <div style="width: 600px; height: 390px; overflow: hidden">
                 <div class="ml10" style="font-weight: 600">组件展示</div>
-                <component :is="registerComponent(form.path)" v-if="registerComponent(form.path)"
-                    class="pd10 GridLayout" :key="form.path" :height="'350px'" :width="'580px'"
-                    :timeKey="form.timeKey" :w="12" :h="6"/>
+                <component
+                    :is="registerComponent(form.path)"
+                    v-if="registerComponent(form.path)"
+                    class="pd10 GridLayout"
+                    :key="form.path"
+                    :height="'350px'"
+                    :width="'580px'"
+                    :timeKey="form.timeKeys"
+                    :w="12"
+                    :h="6"
+                />
                 <!-- <div  class="pd10">组件加载失败...</div> -->
                 <el-empty v-else description="未查询到组件" style="height: 350px; width: 533px" />
             </div>
@@ -57,7 +83,7 @@ import { useDictData } from '@/stores/dictData'
 import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
 import IconSelector from '@/components/baInput/components/iconSelector.vue'
 import html2canvas from 'html2canvas'
-const emit = defineEmits(['cancel','submit'])
+const emit = defineEmits(['cancel', 'submit'])
 const dictData = useDictData()
 const dialogVisible = ref(false)
 const title = ref('')
@@ -67,7 +93,7 @@ const form = ref<anyObj>({
     name: '',
     sort: 100,
     system: [],
-    timeKey: '3',
+    timeKeys: ['1', '2', '3', '4', '5'],
     code: '',
     path: ''
 })
@@ -78,7 +104,8 @@ const rules = {
     system: [{ required: true, message: '请先择父组件节点', trigger: 'change' }],
     icon: [{ required: true, message: '请先择组件图标', trigger: 'change' }],
     path: [{ required: true, message: '请输入组件路径', trigger: 'blur' }],
-    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }]
+    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
+    timeKeys: [{ required: true, message: '请选择组件查询时间', trigger: 'change' }]
 }
 const customDeptOption: any = ref([])
 onMounted(() => {
@@ -98,6 +125,8 @@ const open = (text: string, data?: anyObj) => {
         let Data = JSON.parse(JSON.stringify(data))
         form.value = Data
         form.value.system = [Data.systemType, Data.pid]
+        // form.value.timeKeys = Data.timeKeys.split(',').map(Number)
+        form.value.timeKeys = Data.timeKeys || []
     }
 }
 const submit = () => {
@@ -105,7 +134,6 @@ const submit = () => {
         if (valid) {
             let url = ''
 
-            
             await html2canvas(document.querySelector('.GridLayout'), {
                 scale: 2
             }).then(canvas => {
@@ -117,6 +145,7 @@ const submit = () => {
                     systemType: form.value.system[0],
                     pid: form.value.system[1],
                     image: url
+                   
                 }).then(res => {
                     ElMessage.success('新增成功!')
                     emit('submit')
@@ -130,7 +159,7 @@ const submit = () => {
                     image: url
                 }).then(res => {
                     ElMessage.success('修改成功!')
-                       emit('submit')
+                    emit('submit')
                     cancel()
                 })
             }

src/views/setting/dictionary/component/addTree.vue

@@ -38,6 +38,7 @@ import { useDictData } from '@/stores/dictData'
 import { getFatherComponent, componentAdd, componentEdit } from '@/api/user-boot/dept'
 
 import { componentTree } from '@/api/user-boot/user'
+import { pid } from 'process'
 const dictData = useDictData()
 const emit = defineEmits(['cancel', 'submit'])
 const dialogVisible = ref(false)
@@ -47,7 +48,10 @@ const formRef = ref()
 const form = ref<anyObj>({
     name: '',
     sort: 100,
-    system: ''
+    system: [],
+    timeKey: '3',
+    code: 'base',
+   
 })
 const props = { label: 'name', value: 'id', checkStrictly: true }
 const rules = {
@@ -78,7 +82,7 @@ const getFather = () => {
 }
 
 // 递归删除path不为null的数据
-function deletePathNotNull(data:any) {
+function deletePathNotNull(data: any) {
     // 若为数组，遍历处理每个元素
     if (Array.isArray(data)) {
         const filtered = []
@@ -110,7 +114,7 @@ const submit = () => {
                 await componentAdd({
                     ...form.value,
                     systemType: form.value.system[0],
-                    pid: form.value.system[1]
+                    pid: form.value.system?.at(-1)
                 }).then(res => {
                     ElMessage.success('新增成功!')
                     emit('submit')

src/views/setting/dictionary/component/index.vue

@@ -90,13 +90,11 @@ const tableStore = new TableStore({
                         title: '确定删除？'
                     },
                     click: row => {
-                        if (row.path == '' || row.path == null) {
-                        } else {
+                    
                             deleteSubassembly({ id: row.id }).then(() => {
                                 ElMessage.success('删除成功!')
                                 tableStore.index()
                             })
-                        }
                     }
                 }
             ]