绘制离线地图

2024-12-23 09:29:59 +08:00
parent 8cdf4ca8b6
commit 1f94ac5267
26 changed files with 8578 additions and 101 deletions
--- a/src/views/pqs/panorama/components/details/temporaryState.vue
+++ b/src/views/pqs/panorama/components/details/temporaryState.vue
@@ -0,0 +1,153 @@
+<!-- 暂态 -->
+<template>
+    <el-dialog draggable title="暂态电能质量水平评估统计" v-model="dialogVisible" width="1400px">
+        <div>
+            <vxe-table v-bind="defaultAttribute" ref="vxeRef" height="360px" :data="tableData">
+                <vxe-column field="name" title="区域" />
+
+                <vxe-column sortable field="sagTimes" title="暂降次数" />
+                <vxe-column sortable field="swellTimes" title="暂升次数" />
+                <vxe-column sortable field="interruptTimes" title="短时中断次数" />
+
+                <vxe-colgroup title="暂态严重度占比">
+                    <vxe-column sortable field="rate90" title="SARFI-90" />
+                    <vxe-column sortable field="rate50" title="SARFI-50" />
+                    <vxe-column sortable field="rate20" title="SARFI-20" />
+                </vxe-colgroup>
+            </vxe-table>
+        </div>
+        <div style="margin-top: 10px; display: flex">
+            <!-- 
+            -->
+            <div class="statistics-main">
+                <div class="statistics-box">
+                    <MyEChart style="height: 250px" :options="picEChart" />
+
+                    <el-table size="small" height="250px" :data="descentData">
+                        <el-table-column prop="name" label="暂降原因" width="80px" align="center" />
+                        <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
+                    </el-table>
+                </div>
+
+                <div class="statistics-box">
+                    <MyEChart style="height: 250px" :options="picEChart1" />
+                    <el-table size="small" height="250px" :data="resembleData">
+                        <el-table-column prop="name" label="暂降类型" width="80px" align="center" />
+                        <el-table-column prop="value" label="暂降次数" width="80px" align="center" />
+                    </el-table>
+                </div>
+            </div>
+        </div>
+    </el-dialog>
+</template>
+<script setup lang="ts">
+import { ref } from 'vue'
+import MyEChart from '@/components/echarts/MyEchart.vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getEventReason, getEventDetailByList } from '@/api/device-boot/panorama'
+
+const dialogVisible: any = ref(false)
+
+const tableData: any = ref([])
+const descentData = ref([])
+const resembleData = ref([])
+
+const picEChart = ref({})
+const picEChart1 = ref({})
+const open = async (row: any) => {
+    getEventDetailByList({ ...row, deviceInfoParam: row }).then((res: any) => {
+        tableData.value = res.data
+    })
+    getEventReason(row).then(res => {
+        descentData.value = res.data.reason
+        resembleData.value = res.data.type
+        picEChart.value = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                left: '10px'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['60%', '50%'],
+                        radius: '50%',
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+                        data: res.data.reason
+                    }
+                ]
+            }
+        }
+        picEChart1.value = {
+            tooltip: {
+                trigger: 'item'
+            },
+            legend: {
+                orient: 'vertical',
+                left: '10px'
+            },
+            xAxis: {
+                show: false
+            },
+            yAxis: {
+                show: false
+            },
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+                        type: 'pie',
+                        center: ['60%', '50%'],
+                        radius: '50%',
+                        label: {
+                            show: false,
+                            position: 'outside',
+                            textStyle: {
+                                //数值样式
+                            }
+                        },
+                        data: res.data.type
+                    }
+                ]
+            }
+        }
+    })
+    dialogVisible.value = true
+}
+
+defineExpose({ open })
+</script>
+<style lang="scss" scoped>
+.statistics-main {
+    // height: 300px;
+    display: grid;
+    width: 100%;
+    grid-template-columns: 1fr 1fr;
+
+    .statistics-box {
+        // height: 300px;
+        // display: flex;
+        display: grid;
+        grid-template-columns: 2fr 1fr;
+    }
+}
+:deep(.el-dialog__body) {
+    max-height: none !important;
+}
+</style>