指标越限明细联调

src/components/cockpit/indicatorDetails/index.vue

@@ -14,18 +14,16 @@
                     <p :class="data.isSelected ? 'is-selected' : ''">
                         {{ data.day.split('-').slice(2).join('-') }}
                     </p>
-                    <el-tooltip
-                        effect="dark"
-                        placement="top"
-                        :hide-after="0"
-                        v-if="list?.filter(item => item.time == data.day)[0]?.text || false"
-                    >
+                    <el-tooltip effect="dark" placement="top" :hide-after="0" v-if="getTextForDate(data.day)">
                         <template #content>
-                            <span v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"></span>
+                            <span v-html="getTextForDate(data.day)"></span>
                         </template>
                         <div
-                            :style="{ height: `calc(${prop.height} / 5 - 47px)`, overflow: 'auto' }"
-                            v-html="list?.filter(item => item.time == data.day)[0]?.text || ''"
+                            :style="{
+                                height: `calc((${prop.height} - 57px) / 5) `,
+                                overflow: 'auto'
+                            }"
+                            v-html="getTextForDate(data.day)"
                         ></div>
                     </el-tooltip>
                 </div>
@@ -37,12 +35,8 @@
 import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import TableStore from '@/utils/tableStore'
 import TableHeader from '@/components/table/header/index.vue'
-import { getTimeOfTheMonth } from '@/utils/formatTime'
 import { dayjs } from 'element-plus'
 
-import { useRoute } from 'vue-router'
-import { useTimeCacheStore } from '@/stores/timeCache'
-
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -54,8 +48,7 @@ const prop = defineProps({
 
 const headerHeight = ref(57)
 
-const route = useRoute()
-const timeCacheStore = useTimeCacheStore()
+const list = ref()
 
 dayjs.en.weekStart = 1 //设置日历的周起始日为星期一
 const value = ref(new Date())
@@ -82,80 +75,88 @@ const fullscreen = computed(() => {
     }
 })
 
-const list = ref([
-    {
-        time: '2025-11-01',
-        key: 81,
-        text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
-    },
-    {
-        time: '2025-10-31',
-        key: 81,
-        text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
-    },
-    {
-        time: '2025-11-08',
-        key: 20,
-        text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
-    },
-    {
-        time: '2025-11-16',
-        key: 20,
-        text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
-    },
-    {
-        time: '2025-11-23',
-        key: 20,
-        text: '3次谐波越限<br/>5次谐波越限<br/>三相不平衡越限'
-    },
-    {
-        time: '2025-11-04',
-        key: 0,
-        text: ''
-    },
-    {
-        time: '2025-10-05',
-        key: 0,
-        text: ''
-    }
-])
+const getTextForDate = (date: string) => {
+    const item = list.value?.find((item: any) => item.time === date)
+    return item ? item.text : ''
+}
+
 const tableStore: any = new TableStore({
-    url: '/user-boot/dept/deptTree',
+    // url: '/user-boot/role/selectRoleDetail?id=0',
+    url: '/harmonic-boot/limitRateDetailD/limitCalendarData',
     method: 'POST',
-
     showPage: false,
-
     column: [],
     beforeSearchFun: () => {
         tableStore.table.params.searchBeginTime = tableStore.table.params.searchBeginTime || prop.timeValue?.[0]
         tableStore.table.params.searchEndTime = tableStore.table.params.searchEndTime || prop.timeValue?.[1]
     },
     loadCallback: () => {
-        tableStore.table.data = []
+        // 将后端返回的数据整合到 list 中
+        //     tableStore.table.data = [
+        //     {
+        //         "time": "2025-11-13",
+        //         "items": [
+        //             "闪变越限",
+        //             "谐波电流越限"
+        //         ],
+        //         "status": 1
+        //     },
+        //     {
+        //         "time": "2025-11-14",
+        //         "items": [
+        //             "频率偏差越限",
+        //             "三相电压不平衡越限",
+        //             "谐波电压越限",
+        //             "谐波电流越限",
+        //              "频率偏差越限",
+        //             "三相电压不平衡越限",
+        //             "谐波电压越限",
+        //             "谐波电流越限",
+        //              "频率偏差越限",
+        //             "三相电压不平衡越限",
+        //             "谐波电压越限",
+        //             "谐波电流越限"
+        //         ],
+        //         "status": 2
+        //     }
+        // ]
+        if (tableStore.table.data && tableStore.table.data.length > 0) {
+            list.value = tableStore.table.data.map((item: any) => {
+                // 将 items 数组转换为带换行的文本
+                const text = item.items && item.items.length > 0 ? item.items.join('<br/>') : ''
+
+                return {
+                    time: item.time,
+                    key: item.status || 0,
+                    text: text
+                }
+            })
+        } else {
+            list.value = []
+        }
     }
 })
 
-const tableRef = ref([])
-
 const setBackground = (value: string) => {
-    let data = []
-    data = list.value?.filter(item => item.time == value)
+    const data = list.value?.find((item: any) => item.time === value)
 
-    if (data && data?.length > 0) {
-        if (data[0].key < 10) {
-            return '#33996690'
-        } else if (data[0].key < 80) {
-            return '#FFCC3390'
-        } else if (data[0].key <= 100) {
-            return '#Ff660090'
+    if (data) {
+        // 根据 status 值返回对应的颜色
+        switch (data.key) {
+            case 0: // 无越限
+                return '#33996690'
+            case 1: // 一般越限
+                return '#FFCC3390'
+            case 2: // 严重越限
+                return '#Ff660090'
+            default:
+                return '#fff' // 默认白色背景
         }
     }
 
-    return '#fff'
+    return '#fff' // 默认白色背景
 }
 
-provide('tableRef', tableRef)
-
 provide('tableStore', tableStore)
 
 onMounted(() => {