暂降方向统计页面联调

src/components/cockpit/directionStatistics/index.vue

@@ -1,14 +1,24 @@
 <template>
     <div>
         <!--暂降方向统计 -->
-        <TableHeader ref="TableHeaderRef" :showReset="false" @selectChange="selectChange" datePicker v-if="fullscreen"></TableHeader>
+        <TableHeader
-        <my-echart class="tall" :options="echartList" :style="{ width: prop.width, height: `calc(${prop.height} )` }" />
+            ref="TableHeaderRef"
+            :showReset="false"
+            @selectChange="selectChange"
+            datePicker
+            v-if="fullscreen"
+        ></TableHeader>
+        <my-echart
+            v-loading="tableStore.table.loading"
+            class="tall"
+            :options="echartList"
+            :style="{ width: prop.width, height: `calc(${prop.height} )` }"
+        />
     </div>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide, reactive, watch, h } from 'vue'
 import TableStore from '@/utils/tableStore'
-import Table from '@/components/table/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { getTime } from '@/utils/formatTime'
@@ -49,17 +59,42 @@ const fullscreen = computed(() => {
     }
 })
 
-const data = [
+const echartList = ref({})
-    {
+
-        name: '来自电网',
+// const data = [
-        value: 4
+//     {
+//         name: '来自电网',
+//         value: 4
+//     },
+//     {
+//         name: '来自负荷',
+//         value: 41
+//     }
+// ]
+
+const OverLimitDetailsRef = ref()
+const tableStore: any = new TableStore({
+    url: '/cs-harmonic-boot/csevent/getEventDirectionData',
+    method: 'POST',
+    showPage: false,
+    column: [],
+    beforeSearchFun: () => {
+        setTime()
     },
-    {
+    loadCallback: () => {
-        name: '来自负荷',
+        if (!tableStore.table.data || !Array.isArray(tableStore.table.data)) {
-        value: 41
+            return []
         }
-]
+        const chartData = ref(
-const echartList = ref({
+            tableStore.table.data.map((item: any) => ({
+                name: item.source === 'load' ? '来自负荷' : '来自电网',
+                value: item.times
+            }))
+        )
+
+        const total = chartData.value.reduce((sum: any, item: any) => sum + item.value, 0)
+
+        echartList.value = {
             title: {},
 
             tooltip: {
@@ -69,8 +104,9 @@ const echartList = ref({
                 orient: 'vertical',
                 top: 'center',
                 right: '5%',
-        formatter: function (e: any) {
+                formatter: function (name: string) {
-            return e + '   ' + data.filter(item => item.name == e)[0].value + '次'
+                    const item = chartData.value.find((i: any) => i.name === name)
+                    return item ? `${name}   ${item.value}次` : name
                 }
             },
             xAxis: {
@@ -92,7 +128,7 @@ const echartList = ref({
                         left: 'center'
                     },
                     {
-                text: data[0].value + data[1].value + '次',
+                        text: total + '次',
                         left: 'center',
                         top: 'center'
                     }
@@ -110,23 +146,12 @@ const echartList = ref({
                             }
                         },
                         name: '事件统计',
-                data: data
+                        data: chartData.value
                     }
                 ]
             }
-})
+        }
-const OverLimitDetailsRef = ref()
+    }
-const tableStore: any = new TableStore({
-    url: '/user-boot/dept/deptTree',
-    method: 'POST',
-
-    showPage: false,
-
-    column: [],
-    beforeSearchFun: () => {
-        setTime()
-    },
-    loadCallback: () => {}
 })
 
 const tableRef = ref()
@@ -156,7 +181,6 @@ const setTime = () => {
 // 点击行
 const cellClickEvent = ({ row, column }: any) => {
     if (column.field != 'name') {
-        console.log(row)
         OverLimitDetailsRef.value.open(row)
     }
 }
@@ -173,12 +197,7 @@ 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()
-        }
     },
     {
         deep: true