From bb67f6e06b696c670d0f62a7fbf787436a8a7781 Mon Sep 17 00:00:00 2001
From: GGJ <357021191@qq.com>
Date: Fri, 1 Nov 2024 11:17:12 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=B1=A1=E5=8C=BA=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 auto-imports.d.ts                             |   6 +-
 src/api/harmonic-boot/area.ts                 |  21 +
 src/components/echarts/MyEchart.vue           |  94 ++--
 .../dirtyAreas/components/provinceDetails.vue | 106 +++++
 .../dirtyAreas/components/ranking.vue         | 291 ++++++++++++
 .../detailed/dirtyAreas/index.vue             | 433 ++++++++++++++----
 6 files changed, 828 insertions(+), 123 deletions(-)
 create mode 100644 src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue
 create mode 100644 src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/ranking.vue

diff --git a/auto-imports.d.ts b/auto-imports.d.ts
index 0ce0ca81..a606bd4d 100644
--- a/auto-imports.d.ts
+++ b/auto-imports.d.ts
@@ -46,6 +46,7 @@ declare global {
   const onServerPrefetch: typeof import('vue')['onServerPrefetch']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const onWatcherCleanup: typeof import('vue')['onWatcherCleanup']
   const provide: typeof import('vue')['provide']
   const reactive: typeof import('vue')['reactive']
   const readonly: typeof import('vue')['readonly']
@@ -66,10 +67,13 @@ declare global {
   const useAttrs: typeof import('vue')['useAttrs']
   const useCssModule: typeof import('vue')['useCssModule']
   const useCssVars: typeof import('vue')['useCssVars']
+  const useId: typeof import('vue')['useId']
   const useLink: typeof import('vue-router')['useLink']
+  const useModel: typeof import('vue')['useModel']
   const useRoute: typeof import('vue-router')['useRoute']
   const useRouter: typeof import('vue-router')['useRouter']
   const useSlots: typeof import('vue')['useSlots']
+  const useTemplateRef: typeof import('vue')['useTemplateRef']
   const watch: typeof import('vue')['watch']
   const watchEffect: typeof import('vue')['watchEffect']
   const watchPostEffect: typeof import('vue')['watchPostEffect']
@@ -78,6 +82,6 @@ declare global {
 // for type re-export
 declare global {
   // @ts-ignore
-  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  export type { Component, ComponentPublicInstance, ComputedRef, DirectiveBinding, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, MaybeRef, MaybeRefOrGetter, VNode, WritableComputedRef } from 'vue'
   import('vue')
 }
diff --git a/src/api/harmonic-boot/area.ts b/src/api/harmonic-boot/area.ts
index 65aa3148..e2d77174 100644
--- a/src/api/harmonic-boot/area.ts
+++ b/src/api/harmonic-boot/area.ts
@@ -47,3 +47,24 @@ export function getOnlineRateData(data:any) {
         data: data
     })
 }
+export function getSubstationInfoById(data:any) {
+    return request({
+        url: '/harmonic-boot/PollutionSubstation/getSubstationInfoById',
+        method: 'post',
+        data: data
+    })
+}
+export function getLineInfoById(data:any) {
+    return request({
+        url: '/harmonic-boot/PollutionSubstation/getLineInfoById',
+        method: 'post',
+        data: data
+    })
+}
+export function getLineRank(data:any) {
+    return request({
+        url: 'harmonic-boot/PollutionSubstation/getLineRank',
+        method: 'post',
+        data: data
+    })
+}
diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 034dd63f..888b2cd2 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -1,9 +1,11 @@
 <template>
-    <div ref="chartRef" class="my-chart" />
+    <div class="chart">
+        <div ref="chartRef" class="my-chart" />
+    </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
+import { onBeforeUnmount, onMounted, ref, defineExpose, watch, nextTick } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
 import 'echarts-gl'
@@ -11,12 +13,15 @@ import 'echarts-liquidfill'
 import 'echarts/lib/component/dataZoom'
 import { color, gradeColor3 } from './color'
 import { useConfig } from '@/stores/config'
+import { saveAs } from 'file-saver'
+import { t } from 'vxe-table'
+// import { nextTick } from 'process'
 
 const config = useConfig()
 color[0] = config.layout.elementUiPrimary[0]
 const chartRef = ref<HTMLDivElement>()
 
-const props = defineProps(['options'])
+const props = defineProps(['options', 'isInterVal', 'pieInterVal'])
 let chart: echarts.ECharts | any = null
 const resizeHandler = () => {
     // 不在视野中的时候不进行resize
@@ -29,16 +34,18 @@ const resizeHandler = () => {
     })
 }
 const initChart = () => {
-    chart?.dispose()
-
+    if (!props.isInterVal && !props.pieInterVal) {
+        chart?.dispose()
+    }
+    // chart?.dispose()
     chart = echarts.init(chartRef.value as HTMLDivElement)
     const options = {
         title: {
             left: 'center',
-            textStyle: {
-                color: '#000',
-                fontSize: 18
-            },
+            // textStyle: {
+            color: '#000',
+            fontSize: 18,
+            // },
             ...(props.options?.title || null)
         },
         tooltip: {
@@ -58,23 +65,37 @@ const initChart = () => {
             },
             backgroundColor: 'rgba(0,0,0,0.35)',
             borderWidth: 0,
+            confine:true,
             ...(props.options?.tooltip || null)
         },
+        toolbox: {
+            right: 20,
+            top: 20,
+            feature: {
+                saveAsImage: {
+                    title: '保存图片',
+                },
+                ...(props.options?.toolbox?.featureProps || null),
+               
+            },
+            // },
+            ...(props.options?.toolbox || null)
+        },
         legend: {
             right: 20,
             top: 0,
             itemGap: 10,
             itemStyle: {},
-            textStyle: {
-                fontSize: 12,
-                padding: [2, 0, 0, 0] //[上、右、下、左]
-            },
+            // textStyle: {
+            fontSize: 12,
+            padding: [2, 0, 0, 0], //[上、右、下、左]
+            // },
             itemWidth: 15,
             itemHeight: 10,
             ...(props.options?.legend || null)
         },
         grid: {
-            top: '50px',
+            top: '60px',
             left: '30px',
             right: '70px',
             bottom: props.options?.options?.dataZoom === null ? '10px' : '40px',
@@ -98,14 +119,14 @@ const initChart = () => {
                 end: 100
             }
         ],
-        toolbox: props.options?.toolbox || {},
         color: props.options?.color || color,
         series: props.options?.series,
         ...props.options?.options
     }
     handlerBar(options)
     // 处理柱状图
-    chart.setOption(options)
+    chart.setOption(options,true)
+
     setTimeout(() => {
         chart.resize()
     }, 0)
@@ -151,7 +172,10 @@ const handlerYAxis = () => {
         },
         axisLabel: {
             color: '#000',
-            fontSize: 14
+            fontSize: 14,
+            formatter: function (value) {
+                return value.toFixed(0) // 格式化显示为一位小数
+            }
         },
         splitLine: {
             lineStyle: {
@@ -182,16 +206,16 @@ const handlerXAxis = () => {
         type: 'category',
         axisTick: { show: false },
         axisLine: {
-            lineStyle: {
-                color: '#000'
-            }
+            // lineStyle: {
+            color: '#000'
+            // }
         },
         axisLabel: {
-            textStyle: {
-                fontFamily: 'dinproRegular',
-                color: '#000',
-                fontSize: '12'
-            }
+            // textStyle: {
+            fontFamily: 'dinproRegular',
+            color: '#000',
+            fontSize: '12'
+            // }
         }
     }
     // props.options?.xAxis 是数组还是对象
@@ -209,6 +233,10 @@ const handlerXAxis = () => {
         }
     }
 }
+
+
+
+
 let throttle: ReturnType<typeof setTimeout>
 // 动态计算table高度
 const resizeObserver = new ResizeObserver(entries => {
@@ -239,8 +267,20 @@ watch(
 </script>
 
 <style lang="scss" scoped>
-.my-chart {
-    height: 100%;
+.chart {
     width: 100%;
+    height: 100%;
+    position: relative;
+
+    .el-button {
+        position: absolute;
+        right: 0px;
+        top: -60px;
+    }
+
+    .my-chart {
+        height: 100%;
+        width: 100%;
+    }
 }
 </style>
diff --git a/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue
new file mode 100644
index 00000000..1b90019e
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/provinceDetails.vue
@@ -0,0 +1,106 @@
+<template>
+
+    <el-dialog v-model="dialogVisible" :title="title" width="70%">
+        <vxe-table height="400px" auto-resize :data="tableData" v-loading="loading" v-bind="defaultAttribute"
+            :key="key">
+
+            <vxe-column field="name" title="名称"></vxe-column>
+            <vxe-column field="powerCompany" title="供电公司" v-if="voltageLevelFlag"></vxe-column>
+            <vxe-column field="substation" title="变电站" v-if="voltageLevelFlag"></vxe-column>
+            <vxe-column field="busBar" title="母线" v-if="voltageLevelFlag"></vxe-column>
+
+            <vxe-column field="voltageLevel" title="电压等级"
+                v-if="statisticalName == '谐波电压(%)' && !voltageLevelFlag"></vxe-column>
+            <vxe-column field="data" :title="statisticalName">
+                <template #default="scope">
+                    <span v-if="scope.row.data == -1" type="primary" size="small">暂无数据</span>
+                    <span v-if="scope.row.data !== -1" type="primary" size="small">
+                        {{ scope.row.data }}
+                    </span>
+                </template>
+            </vxe-column>
+            <vxe-column field="zd" title="评估">
+                <template #default="scope">
+                    <span v-if="
+                        0 <= scope.row.data &&
+                        scope.row.data < 1 &&
+                        scope.row.data !== 3.14159
+                    " style=" font-weight: bold;color: #339966;">
+                        无污染
+                    </span>
+                    <span v-if="
+                        1 <= scope.row.data &&
+                        scope.row.data < 1.2 &&
+                        scope.row.data !== 3.14159
+                    " style=" font-weight: bold;color: #3399ff;">
+                        轻微污染
+                    </span>
+                    <span v-if="
+                        1.2 <= scope.row.data &&
+                        scope.row.data < 1.6 &&
+                        scope.row.data !== 3.14159
+                    " style=" font-weight: bold;color: #ffcc33;">
+                        轻度污染
+                    </span>
+                    <span v-if="
+                        1.6 <= scope.row.data &&
+                        scope.row.data < 2 &&
+                        scope.row.data !== 3.14159
+                    " style=" font-weight: bold;color: #ff9900;">
+                        中度污染
+                    </span>
+                    <span v-if="
+                        2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
+                    " style=" font-weight: bold;color: #cc0000;">
+                        重度污染
+                    </span>
+                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
+                        暂无评估
+                    </span>
+                </template>
+            </vxe-column>
+        </vxe-table>
+
+    </el-dialog>
+
+</template>
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import { defaultAttribute } from '@/components/table/defaultAttribute'
+import { getSubstationInfoById, getLineInfoById } from '@/api/harmonic-boot/area'
+const dialogVisible = ref(false)
+const loading = ref(false)
+const voltageLevelFlag = ref(false)
+const tableData = ref([])
+const title = ref('')
+const key = ref(0)
+const statisticalName = ref('')
+const open = (row: any, flag: boolean, params: any) => {
+    voltageLevelFlag.value = flag
+    loading.value = true
+    title.value = row.name + '详情'
+    statisticalName.value = params.statisticalType.name + '(%)'
+    tableData.value = []
+    if (flag) {
+        getLineInfoById({ ...params, deptIndex: row.pid, id: row.id }).then((res: any) => {
+            tableData.value = res.data
+            loading.value = false
+        }).catch(() => {
+            loading.value = false
+        })
+
+    } else {
+        getSubstationInfoById({ ...params, deptIndex: row.id }).then((res: any) => {
+            tableData.value = res.data
+            loading.value = false
+        }).catch(() => {
+            loading.value = false
+        })
+    }
+
+    key.value += 1
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/ranking.vue b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/ranking.vue
new file mode 100644
index 00000000..36c7461b
--- /dev/null
+++ b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/components/ranking.vue
@@ -0,0 +1,291 @@
+<template>
+
+    <el-dialog v-model="dialogVisible" title="排名前10的监测点" width="1200">
+        <div style="height: 500px">
+            <my-echart class="tall" :options="echartList" />
+        </div>
+
+    </el-dialog>
+
+</template>
+<script setup lang='ts'>
+import { ref, reactive } from 'vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { getLineRank } from '@/api/harmonic-boot/area'
+import * as echarts from 'echarts/core'
+const dialogVisible = ref(false)
+
+const echartList = ref({})
+
+const open = (row: any,) => {
+    getLineRank({ ...row, reportFlag: 3, id: '' }).then((res: any) => {
+        echartList.value = {
+            title: {
+                text: '区域'
+            },
+            tooltip: {
+                formatter: function (params: any) {
+                    // console.log(params);
+                    var tips = ''
+                    for (var i = 0; i < params.length; i++) {
+                        tips += params[i].name + '</br/>'
+                        tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
+                    }
+                    return tips
+                }
+            },
+
+            xAxis: {
+                name: '监测点',
+                data: res.data.map((item: any) => item.name),
+                axisLabel: {
+                    fontFamily: 'dinproRegular',
+                    color: '#000',
+                    fontSize: '12',
+                    rotate: 30,
+                }
+            },
+            yAxis: {
+                name: '等级',// 给X轴加单位
+                min: 0,
+                max: 2,
+                interval: 0.2,
+                splitLine: {
+                    show: false
+                },
+
+                axisLabel: {
+                    show: true,
+
+                    // 这里重新定义就可以
+                    formatter: function (value, index) {
+                        var texts = []
+                        if (value === 1) {
+                            texts.push('1级')
+                        } else if (value === 1.2) {
+                            texts.push('2级')
+                        } else if (value === 1.4) {
+                            texts.push('3级')
+                        } else if (value === 1.6) {
+                            texts.push('4级')
+                        } else if (value === 2) {
+                            texts.push('5级')
+                        }
+                        return texts
+                    }
+
+                },
+            },
+
+            options: {
+                dataZoom: null,
+                series: [
+                    {
+
+                        type: 'bar',
+                        data: res.data.map((item: any) => {
+                            return item.data == 3.14159 ? 0.14159 : item.data
+                        }),
+                        barMaxWidth: 30,
+
+                        itemStyle: {
+                            normal: {
+                                // 随机显示
+                                //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+                                // 定制显示（按顺序）
+                                color: function (params) {
+                                    if (params.value == 0 || params.value == 0.14159) {
+                                        return '#ccc'
+                                    } else if (params.value > 2) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#CC0000'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (1.6 < params.value && params.value <= 2) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#FF9900'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (1.2 < params.value && params.value <= 1.6) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#FFCC33'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (1 < params.value && params.value <= 1.2) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#3399FF'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (
+                                        0 < params.value &&
+                                        params.value <= 1 &&
+                                        params.value >= 0 &&
+                                        params.value !== 0.05
+                                    ) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#339966'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    } else if (params.value == 0.05) {
+                                        return new echarts.graphic.LinearGradient(
+                                            0,
+                                            1,
+                                            0,
+                                            0,
+                                            [
+                                                {
+                                                    offset: 1,
+                                                    color: '#999999'
+                                                }
+                                            ],
+                                            false
+                                        )
+                                    }
+                                }
+                            }
+                        },
+                        markLine: {
+                            silent: false,
+                            symbol: 'circle',
+                            lineStyle: {
+                                color: 'red',
+                                width: 1
+                            },
+                            emphasis: {
+                                lineStyle: {
+                                    width: 1
+                                }
+                            },
+                            data: [
+                                {
+                                    name: '',
+                                    yAxis: 1,
+                                    lineStyle: {
+                                        color: '#339966'
+                                    },
+                                    label: {
+                                        //position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#339966'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 1.2,
+                                    lineStyle: {
+                                        color: '#3399FF'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#3399FF'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 1.4,
+                                    lineStyle: {
+                                        color: '#FFCC33'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#FFCC33'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 1.6,
+                                    lineStyle: {
+                                        color: '#FF9900'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#FF9900'
+                                        }
+                                    }
+                                },
+                                {
+                                    name: '',
+                                    yAxis: 2,
+                                    lineStyle: {
+                                        color: '#CC0000'
+                                    },
+                                    label: {
+                                        // position: "middle",
+                                        formatter: '{b}',
+                                        textStyle: {
+                                            color: '#CC0000'
+                                        }
+                                    }
+                                }
+                            ]
+                        },
+
+                    }
+                ]
+            }
+        }
+    })
+
+
+
+    dialogVisible.value = true
+}
+defineExpose({ open })
+</script>
+<style lang="scss" scoped></style>
diff --git a/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue
index 1a455c14..7aedcc97 100644
--- a/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue
+++ b/src/views/pqs/harmonicMonitoring/detailed/dirtyAreas/index.vue
@@ -8,7 +8,8 @@
                     </el-select>
                 </el-form-item>
                 <el-form-item>
-                    <el-button type="primary" icon="el-icon-DataAnalysis">排名前10监测点</el-button>
+                    <el-button type="primary" icon="el-icon-DataAnalysis"
+                        @click="rankingClick(null, true)">排名前10监测点</el-button>
                 </el-form-item>
             </template>
         </TableHeader>
@@ -29,36 +30,40 @@
                         <div class="mt10 cardBox">
                             <el-card v-for="(item, index) in tableStore.table.data" :key="index">
                                 <template #header>
-                                    <el-tag v-if="item.data == 3.14159 || item.data == 0"
-                                        style="background: #ccc; color: #fff" size="small">
-                                        无
-                                    </el-tag>
-                                    <el-tag v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
-                                        style="background: #339966; color: #fff" size="small">
-                                        1级
-                                    </el-tag>
-                                    <el-tag v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
-                                        style="background: #3399ff; color: #fff" size="small">
-                                        2级
-                                    </el-tag>
-                                    <el-tag v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
-                                        style="background: #ffcc33; color: #fff" size="small">
-                                        3级
-                                    </el-tag>
-                                    <el-tag v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
-                                        style="background: #ff9900; color: #fff" size="small">
-                                        4级
-                                    </el-tag>
-                                    <el-tag v-if="2 <= item.data && item.data && item.data !== 3.14159"
-                                        style="background: #cc0000; color: #fff" size="small">
-                                        5级
-                                    </el-tag>
-                                    <span>{{ item.name }}</span>
+                                    <div style="cursor: pointer;" @click="queryline(item, false)">
+                                        <el-tag v-if="item.data == 3.14159 || item.data == 0"
+                                            style="background: #ccc; color: #fff" size="small">
+                                            无
+                                        </el-tag>
+                                        <el-tag v-if="0 < item.data && item.data < 1 && item.data !== 3.14159"
+                                            style="background: #339966; color: #fff" size="small">
+                                            1级
+                                        </el-tag>
+                                        <el-tag v-if="1 <= item.data && item.data < 1.2 && item.data !== 3.14159"
+                                            style="background: #3399ff; color: #fff" size="small">
+                                            2级
+                                        </el-tag>
+                                        <el-tag v-if="1.2 <= item.data && item.data < 1.6 && item.data !== 3.14159"
+                                            style="background: #ffcc33; color: #fff" size="small">
+                                            3级
+                                        </el-tag>
+                                        <el-tag v-if="1.6 <= item.data && item.data < 2 && item.data !== 3.14159"
+                                            style="background: #ff9900; color: #fff" size="small">
+                                            4级
+                                        </el-tag>
+                                        <el-tag v-if="2 <= item.data && item.data && item.data !== 3.14159"
+                                            style="background: #cc0000; color: #fff" size="small">
+                                            5级
+                                        </el-tag>
+                                        <span>{{ item.name }}</span>
+                                    </div>
+
+
 
                                 </template>
                                 <div class="card-content">
                                     <div class="card-item" v-for="(item1, index1) in item.children" :key="index1"
-                                        @click="queryline(item1.id, item1.pid, item1.name)">
+                                        @click="queryline(item1, true)">
                                         <el-tag v-if="item1.data == 3.14159 || item1.data == 0"
                                             style="background: #ccc; color: #fff" size="small">
                                             无
@@ -84,9 +89,9 @@
                                             5级
                                         </el-tag>
                                         <span class="xdf">
-                                            <el-tooltip  :open-delay="3000" effect="light"  show-arrow
-                                                :content="item1.name" popper-class="atooltip" placement="bottom-start">
-                                             
+                                            <el-tooltip :show-arrow="false" :offset="-0" :content="item1.name"
+                                                popper-class="atooltip" placement="bottom-start">
+
                                                 <div class="tooltipText">
                                                     {{ item1.name }}
                                                 </div>
@@ -105,26 +110,69 @@
                 <el-col :span="12">
                     <my-echart class="tall" :options="echartList" />
                     <div class="tall">
-                        <vxe-table height="auto" auto-resize :data="distributionData" v-bind="defaultAttribute">
-                            >
-                            <vxe-column field="qy" :title="titleA == '电压等级'
-                                ? '电压等级'
-                                : titleA == '终端厂家'
-                                    ? '终端厂家'
-                                    : titleA == '干扰源类型'
-                                        ? '干扰源类型'
-                                        : titleA == '电网拓扑'
-                                            ? '区域'
-                                            : ''
-                                " show-overflow-tooltip></vxe-column>
-                            <vxe-column field="jcd" title="监测点数(个数)"></vxe-column>
-                            <vxe-column field="zc" title="通讯正常(个数)" sortable></vxe-column>
-                            <vxe-column field="zd" title="通讯中断(个数)" sortable></vxe-column>
+                        <vxe-table height="auto" auto-resize :data="tableStore.table.data" v-bind="defaultAttribute">
+
+                            <vxe-column field="name" title="名称"></vxe-column>
+                            <vxe-column field="zc" title="污染值">
+                                <template #default="scope">
+                                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
+                                        暂无数据
+                                    </span>
+                                    <span v-if="scope.row.data !== 3.14159" style="color: #000;">
+                                        {{ scope.row.data }}
+                                    </span>
+                                </template>
+                            </vxe-column>
+                            <vxe-column field="zd" title="评估">
+                                <template #default="scope">
+                                    <span v-if="
+                                        0 <= scope.row.data &&
+                                        scope.row.data < 1 &&
+                                        scope.row.data !== 3.14159
+                                    " style=" font-weight: bold;color: #339966;">
+                                        无污染
+                                    </span>
+                                    <span v-if="
+                                        1 <= scope.row.data &&
+                                        scope.row.data < 1.2 &&
+                                        scope.row.data !== 3.14159
+                                    " style=" font-weight: bold;color: #3399ff;">
+                                        轻微污染
+                                    </span>
+                                    <span v-if="
+                                        1.2 <= scope.row.data &&
+                                        scope.row.data < 1.6 &&
+                                        scope.row.data !== 3.14159
+                                    " style=" font-weight: bold;color: #ffcc33;">
+                                        轻度污染
+                                    </span>
+                                    <span v-if="
+                                        1.6 <= scope.row.data &&
+                                        scope.row.data < 2 &&
+                                        scope.row.data !== 3.14159
+                                    " style=" font-weight: bold;color: #ff9900;">
+                                        中度污染
+                                    </span>
+                                    <span v-if="
+                                        2 <= scope.row.data && scope.row.data && scope.row.data !== 3.14159
+                                    " style=" font-weight: bold;color: #cc0000;">
+                                        重度污染
+                                    </span>
+                                    <span v-if="scope.row.data == 3.14159" style="color: #000;">
+                                        暂无评估
+                                    </span>
+                                </template>
+                            </vxe-column>
                         </vxe-table>
                     </div>
+
                 </el-col>
             </el-row>
         </div>
+        <!-- 详情 -->
+        <provinceDetails ref="provinceDetailsRef" />
+        <!-- 排名前10的监测点 -->
+        <ranking ref="rankingRef" />
     </div>
 </template>
 <script setup lang="ts">
@@ -132,32 +180,34 @@ import TableHeader from '@/components/table/header/index.vue'
 
 import { useDictData } from '@/stores/dictData'
 import { defaultAttribute } from '@/components/table/defaultAttribute'
-
+import provinceDetails from './components/provinceDetails.vue'
+import ranking from './components/ranking.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import TableStore from '@/utils/tableStore'
 import { ref, onMounted, provide } from 'vue'
 import { mainHeight } from '@/utils/layout'
+import * as echarts from 'echarts/core'
 defineOptions({
     name: 'Region/distribution'
 })
 
 const dictData = useDictData()
 const echartList = ref({})
-const titleA = ref('')
+const provinceDetailsRef = ref()
+const rankingRef = ref()
+
 const header = ref()
-const distributionData: any = ref([])
 const options = dictData.getBasicData('Pollution_Statis', ['I_Neg', 'V_Inharm', 'V_Dev', 'V_Unbalance', 'Plt', 'Freq_Dev'])
 const tableStore = new TableStore({
     url: '/harmonic-boot/PollutionSubstation/deptSubstationRelations',
     method: 'POST',
     column: [],
     loadCallback: () => {
-        titleA.value = tableStore.table.params.statisticalType.name
-        header.value.areaRef.change()
-        // 处理地图数据
-        map(tableStore.table.data)
-
         histogram(tableStore.table.data)
+        header.value.areaRef.change()
+
+
+
 
     }
 })
@@ -167,35 +217,28 @@ tableStore.table.params.deptIndex = dictData.state.area[0].id
 tableStore.table.params.statisticalType = options[0]
 tableStore.table.params.monitorFlag = 2
 tableStore.table.params.powerFlag = 2
-tableStore.table.params.reportFlag = 2
+tableStore.table.params.reportFlag = 3
 tableStore.table.params.serverName = 'event-boot'
 
 
 
 
 // 地图数处理
-const map = (res: any) => {
-
+const rankingClick = () => {
+    rankingRef.value.open(tableStore.table.params)
 }
-const queryline = (id: any, pid: any, name: any) => {
-
+const queryline = (row: any, flag: boolean) => {
+    provinceDetailsRef.value.open(row, flag, tableStore.table.params)
 }
 
 // 表格数据处理
 // 柱状图数据处理
 const histogram = (res: any) => {
+    console.log(123);
+
     echartList.value = {
         title: {
-            text:
-                titleA.value == '电压等级'
-                    ? '电压等级'
-                    : titleA.value == '终端厂家'
-                        ? '终端厂家'
-                        : titleA.value == '干扰源类型'
-                            ? '干扰源类型'
-                            : titleA.value == '电网拓扑'
-                                ? header.value.areaRef.areaName
-                                : '' // 给X轴加单位
+            text: '区域'
         },
         tooltip: {
             formatter: function (params: any) {
@@ -203,49 +246,245 @@ const histogram = (res: any) => {
                 var tips = ''
                 for (var i = 0; i < params.length; i++) {
                     tips += params[i].name + '</br/>'
-                    tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + params[i].value + '</br/>'
+                   tips += '监测点数' + ':' + '&nbsp' + '&nbsp' + (params[i].value == 0.14159 ? '暂无数据' : params[i].value) + '</br/>'
                 }
                 return tips
             }
         },
 
         xAxis: {
-            name:
-                titleA.value == '电压等级'
-                    ? '(电压\n等级)'
-                    : titleA.value == '终端厂家'
-                        ? '(终端\n厂家)'
-                        : titleA.value == '干扰源类型'
-                            ? '(干扰\n源类型)'
-                            : titleA.value == '电网拓扑'
-                                ? '(区域)'
-                                : '', // 给X轴加单位
-            data: distributionData.value.map((item: any) => item.qy)
+            name: '区域',
+            data: res.map((item: any) => item.name)
         },
         yAxis: {
-            name: '监测点数（个）' // 给X轴加单位
+            name: '等级',// 给X轴加单位
+            min: 0,
+            max: 2,
+            interval: 0.2,
+            splitLine: {
+                show: false
+            },
+            axisLabel: {
+                show: true,
+
+                // 这里重新定义就可以
+                formatter: function (value, index) {
+                    var texts = []
+                    if (value === 1) {
+                        texts.push('1级')
+                    } else if (value === 1.2) {
+                        texts.push('2级')
+                    } else if (value === 1.4) {
+                        texts.push('3级')
+                    } else if (value === 1.6) {
+                        texts.push('4级')
+                    } else if (value === 2) {
+                        texts.push('5级')
+                    }
+                    return texts
+                }
+            },
         },
+
         options: {
+            dataZoom: null,
             series: [
                 {
-                    //   name: '暂降次数',
+
                     type: 'bar',
-                    data: distributionData.value.map((item: any) => item.jcd),
+                    data: res.map((item: any) => {
+                        return item.data == 3.14159 ? 0.14159 : item.data
+                    }),
                     barMaxWidth: 30,
+
                     itemStyle: {
                         normal: {
-                            color: '#07CCCA'
+                            // 随机显示
+                            //color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
+
+                            // 定制显示（按顺序）
+                            color: function (params) {
+                                if (params.value == 0 || params.value == 0.14159) {
+                                    return '#ccc'
+                                } else if (params.value > 2) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#CC0000'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                } else if (1.6 < params.value && params.value <= 2) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#FF9900'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                } else if (1.2 < params.value && params.value <= 1.6) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#FFCC33'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                } else if (1 < params.value && params.value <= 1.2) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#3399FF'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                } else if (
+                                    0 < params.value &&
+                                    params.value <= 1 &&
+                                    params.value >= 0 &&
+                                    params.value !== 0.05
+                                ) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#339966'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                } else if (params.value == 0.05) {
+                                    return new echarts.graphic.LinearGradient(
+                                        0,
+                                        1,
+                                        0,
+                                        0,
+                                        [
+                                            {
+                                                offset: 1,
+                                                color: '#999999'
+                                            }
+                                        ],
+                                        false
+                                    )
+                                }
+                            }
                         }
                     },
-                    label: {
-                        show: true,
-                        position: 'top',
-                        textStyle: {
-                            //数值样式
-                            color: '#000'
+                    markLine: {
+                        silent: false,
+                        symbol: 'circle',
+                        lineStyle: {
+                            color: 'red',
+                            width: 1
                         },
-                        fontSize: 12
-                    }
+                        emphasis: {
+                            lineStyle: {
+                                width: 1
+                            }
+                        },
+                        data: [
+                            {
+                                name: '',
+                                yAxis: 1,
+                                lineStyle: {
+                                    color: '#339966'
+                                },
+                                label: {
+                                    //position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#339966'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.2,
+                                lineStyle: {
+                                    color: '#3399FF'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#3399FF'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.4,
+                                lineStyle: {
+                                    color: '#FFCC33'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FFCC33'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 1.6,
+                                lineStyle: {
+                                    color: '#FF9900'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#FF9900'
+                                    }
+                                }
+                            },
+                            {
+                                name: '',
+                                yAxis: 2,
+                                lineStyle: {
+                                    color: '#CC0000'
+                                },
+                                label: {
+                                    // position: "middle",
+                                    formatter: '{b}',
+                                    textStyle: {
+                                        color: '#CC0000'
+                                    }
+                                }
+                            }
+                        ]
+                    },
+
                 }
             ]
         }
@@ -294,8 +533,12 @@ const layout1 = mainHeight(93) as any
         .el-card__header {
             padding: 10px !important;
             color: #fff;
-            display: flex;
-            justify-content: space-between;
+
+            div {
+                display: flex;
+                justify-content: space-between;
+            }
+
         }
 
         .el-card__body {
@@ -314,6 +557,7 @@ const layout1 = mainHeight(93) as any
                 margin-bottom: 20px;
                 width: 50%;
                 display: flex;
+                cursor: pointer;
 
             }
 
@@ -337,5 +581,4 @@ const layout1 = mainHeight(93) as any
     }
 
 }
-
 </style>