From 592d795e2b3b333cc2a5a5d37ed990a2560a558e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BB=B2=E4=B9=88=E4=BA=86?= <zhongchunyang@rocan.com.cn>
Date: Mon, 26 Feb 2024 19:17:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9A=82=E9=99=8D=E5=88=86=E5=B8=83=E7=BB=9F?=
 =?UTF-8?q?=E8=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/echarts/MyEchart.vue           |  94 +----
 .../dianyazanjiangbiaojimidu/index.vue        |   2 +-
 .../online/eventStatistics/index.vue          |   2 +-
 .../zanjiangfenbutongji/index.vue             | 323 ++++++++++++++++-
 .../zanjiangfuzhigailvfenbu/index.vue         | 333 +++++++++++++++++-
 5 files changed, 656 insertions(+), 98 deletions(-)

diff --git a/src/components/echarts/MyEchart.vue b/src/components/echarts/MyEchart.vue
index 782e68ed..fcb634a0 100644
--- a/src/components/echarts/MyEchart.vue
+++ b/src/components/echarts/MyEchart.vue
@@ -6,7 +6,7 @@
 import { onBeforeUnmount, onMounted, ref, defineExpose, watch } from 'vue'
 // import echarts from './echarts'
 import * as echarts from 'echarts' // 全引入
-import 'echarts-gl';
+import 'echarts-gl'
 import 'echarts/lib/component/dataZoom'
 
 const chartRef = ref<HTMLDivElement>()
@@ -24,90 +24,6 @@ const initChart = () => {
     chart?.dispose()
 
     chart = echarts.init(chartRef.value as HTMLDivElement)
-    console.log({
-        title: {
-            left: 'center',
-            textStyle: {
-                color: '#000',
-                fontSize: 18
-            },
-            ...(props.options.title || null)
-        },
-        tooltip: {
-            trigger: 'axis',
-
-            axisPointer: {
-                type: 'shadow',
-                label: {
-                    color: '#fff',
-                    fontSize: 16
-                }
-            },
-            textStyle: {
-                color: '#fff',
-                fontStyle: 'normal',
-                opacity: 0.35,
-                fontSize: 14
-            },
-            backgroundColor: 'rgba(0,0,0,0.35)',
-            borderWidth: 0,
-            ...(props.options.tooltip || null)
-        },
-        legend: {
-            right: 20,
-            top: 0,
-            itemGap: 10,
-            itemStyle: {},
-            textStyle: {
-                fontSize: 12,
-                padding: [2, 0, 0, 0] //[上、右、下、左]
-            },
-            itemWidth: 15,
-            itemHeight: 10,
-            ...(props.options.legend || null)
-        },
-        grid: {
-            top: '50px',
-            left: '10px',
-            right: '60px',
-            bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
-            containLabel: true
-        },
-        xAxis: handlerXAxis(),
-        yAxis: handlerYAxis(),
-        dataZoom: [
-            {
-                type: 'inside',
-                height: 13,
-                start: 0,
-                bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom || null)
-            },
-            {
-                start: 0,
-                height: 13,
-                bottom: '20px',
-                end: 100,
-                ...(props.options.dataZoom || null)
-            }
-        ],
-        color: [
-            ...(props.options.color || ''),
-            '#07CCCA ',
-            '#00BFF5',
-            '#FFBF00',
-            '#77DA63',
-            '#D5FF6B',
-            '#Ff6600',
-            '#FF9100',
-            '#5B6E96',
-            '#66FFCC',
-            '#B3B3B3'
-        ],
-        series: props.options.series,
-        ...props.options.options
-    })
     chart.setOption({
         title: {
             left: 'center',
@@ -157,8 +73,8 @@ const initChart = () => {
             bottom: props.options.options?.dataZoom === null ? '10px' : '40px',
             containLabel: true
         },
-        xAxis: handlerXAxis(),
-        yAxis: handlerYAxis(),
+        xAxis: props.options.xAxis ? handlerXAxis() : null,
+        yAxis: props.options.yAxis ? handlerYAxis() : null,
         dataZoom: [
             {
                 type: 'inside',
@@ -178,7 +94,7 @@ const initChart = () => {
         ],
         color: [
             ...(props.options.color || ''),
-            '#07CCCA ',
+            '#07CCCA',
             '#00BFF5',
             '#FFBF00',
             '#77DA63',
@@ -194,7 +110,7 @@ const initChart = () => {
     })
     setTimeout(() => {
         chart.resize()
-    },0)
+    }, 0)
 }
 const handlerYAxis = () => {
     let temp = {
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
index 9335cbc1..4493784a 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/dianyazanjiangbiaojimidu/index.vue
@@ -47,7 +47,7 @@
                 <div class='mb10'>IEC61000-2-8(公共用电暂降测量统计)</div>
                 <div style='flex: 1;overflow: hidden'>
                     <vxe-table v-bind='defaultAttribute' height='100%' size='mini' :data='thirdData'>
-                        <vxe-colgroup title='剩余电压' field='name' width='80px'></vxe-colgroup>
+                        <vxe-colgroup title='剩余电压' field='name' width='120px'></vxe-colgroup>
                         <vxe-colgroup title='持续事件'>
                             <vxe-column field='q' title='0.01-0.1s' align='center'></vxe-column>
                             <vxe-column field='w' title='0.1-0.25s' align='center'></vxe-column>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
index 37b0860d..2ec49d21 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/index.vue
@@ -30,7 +30,7 @@ import Zanjiangfenbutongji from './zanjiangfenbutongji/index.vue'
 import Zanjiangfuzhigailvfenbu from './zanjiangfuzhigailvfenbu/index.vue'
 import Chixushijiangailvfenbu from './chixushijiangailvfenbu/index.vue'
 
-const activeName = ref('1')
+const activeName = ref('5')
 const height = mainHeight(84)
 
 </script>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
index 381890af..7f995f97 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfenbutongji/index.vue
@@ -1,10 +1,325 @@
 <template>
-    <div class='default-main'>
-
+    <div style='display: flex;flex-direction: column;height: 100%' v-loading='loading'>
+        <el-form :inline='true'>
+            <el-form-item label='时间间隔'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <div style='flex: 1;' class='mt10 zanjiangfenbutongji'>
+            <my-echart :options='firstOptions' style='flex: 1;height: 100%' />
+            <div style='width: 712px;height: 100%;display: flex;flex-direction: column'>
+                <my-echart :options='secondOptions' style='flex: 1' />
+                <my-echart :options='thirdOptions' style='flex: 1' />
+            </div>
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getReasonTypeTime, getStatistic } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const loading = ref(true)
+const monitoringPoint = useMonitoringPoint()
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: '',
+    flag: 1
+})
+const firstOptions = ref<any>({})
+const secondOptions = ref<any>({})
+const thirdOptions = ref<any>({})
+const firstData = ref<any>([])
+const secondData = ref<any>([])
+const thirdData = ref<any>([])
+
+
+const init = () => {
+
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    formData.flag = datePickerRef.value.interval
+    Promise.all([getReasonTypeTime(formData), getStatistic(formData)]).then(res => {
+        firstData.value = res[0].data
+        secondData.value = res[1].data.reason
+        thirdData.value = res[1].data.types
+        initFirst()
+        initSecond()
+        initThird()
+        loading.value = false
+    })
+}
+const initFirst = () => {
+    let months = new Array()
+    let handle = new Array()
+    for (let i = 0; i < firstData.value.length; i++) {
+        if ((firstData.value[i].month == '01') || (i == 0)) {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        } else {
+            if (formData.flag == 0) {
+                months[i] = firstData.value[i].month
+            } else {
+                months[i] = firstData.value[i].month + '-' + firstData.value[i].day
+            }
+        }
+        handle[i] = firstData.value[i].times
+    }
+
+    firstOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        title: {
+            text:
+                formData.flag == 3
+                    ? '月份统计'
+                    : formData.flag == 2
+                        ? '季度统计'
+                        : formData.flag == 1
+                            ? '年份统计'
+                            : '',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: function(params: any) {
+                let tips = ''
+                tips += '<font>时间:' + params[0].name + '</font><br/>'
+                tips += '<font>暂降次数:' + params[0].data + '</font>'
+                return tips
+            }
+        },
+        legend: {
+            data: ['暂降次数'],
+            x: 'right'
+        },
+        xAxis: [
+            {
+                type: 'category',
+                data: months,
+                name: '时间'
+            }
+        ],
+        yAxis: [
+            {
+                type: 'value',
+                name: '次',
+                minInterval: 1
+            }
+        ],
+        series: [
+            {
+                name: '暂降次数',
+                type: 'bar',
+                barMaxWidth: 30,
+                barMinHeight: 5,
+                itemStyle: {
+                    normal: {
+                        color: function(params: any) {
+                            if (params.data == 0) {
+                                return '#ccc'
+                            } else {
+                                return '#07CCCA'
+                            }
+                        },
+                        label: {
+                            show: true,
+                            textStyle: {
+                                label: { show: true, position: 'top' },
+                                color: '#8B008B'
+                            }
+                        }
+                    }
+                },
+                data: handle
+            }
+        ]
+    }
+}
+const initSecond = () => {
+    let reaArray = []
+    let valueArray = []
+    secondData.value.reverse()
+    for (let i = 0; i < secondData.value.length; i++) {
+        reaArray.push(secondData.value[i].reason)
+        valueArray.push({
+            name: secondData.value[i].reason,
+            value: secondData.value[i].times
+        })
+    }
+    secondOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降原因',
+            x: 'center'
+        },
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: reaArray
+        },
+        series: [
+            {
+                name: '暂降原因',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '53%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+const initThird = () => {
+    let typeArray = []
+    let valueArray = []
+    for (let i = 0; i < thirdData.value.length; i++) {
+        typeArray.push(thirdData.value[i].type)
+        valueArray.push({
+                name: thirdData.value[i].type,
+                value: thirdData.value[i].times
+            }
+        )
+    }
+    thirdOptions.value = {
+        backgroundColor: '#fff', //背景色,
+        animation: false,
+        title: {
+            text: '暂降类型',
+            x: 'center'
+        },
+
+        tooltip: {
+            trigger: 'item',
+            axisPointer: {
+                type: 'shadow',
+                label: {
+                    color: '#fff',
+                    fontSize: 16
+                }
+            },
+            textStyle: {
+                color: '#fff',
+                fontStyle: 'normal',
+                opacity: 0.35,
+                fontSize: 14
+            },
+            backgroundColor: 'rgba(0,0,0,0.35)',
+            formatter: '{a} <br/>{b} : {c} ({d}%)'
+        },
+        legend: {
+            orient: 'vertical',
+            left: 'left',
+            data: typeArray
+        },
+        series: [
+            {
+                name: '暂降类型',
+                type: 'pie',
+                radius: '70%',
+                center: ['50%', '60%'],
+                label: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                lableLine: {
+                    normal: {
+                        show: false
+                    },
+                    emphasis: {
+                        show: true
+                    }
+                },
+                data: valueArray,
+                itemStyle: {
+                    emphasis: {
+                        shadowBlur: 10,
+                        shadowOffsetX: 0,
+                        shadowColor: 'rgba(0, 0, 0, 0.5)'
+                    }
+                }
+            }
+        ]
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
-<style></style>
+<style lang='scss'>
+.zanjiangfenbutongji {
+    display: flex;
+    overflow: hidden;
+}
+</style>
diff --git a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
index 381890af..e8a462ba 100644
--- a/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
+++ b/src/views/pms/voltageSags/monitoringPoint/online/eventStatistics/zanjiangfuzhigailvfenbu/index.vue
@@ -1,10 +1,337 @@
 <template>
-    <div class='default-main'>
-
+    <div style='display: flex;flex-direction: column;height: 100%'>
+        <el-form :inline='true'>
+            <el-form-item label='时间间隔'>
+                <DatePicker ref='datePickerRef'></DatePicker>
+            </el-form-item>
+            <el-form-item>
+                <el-button type='primary' @click='init'>查询</el-button>
+            </el-form-item>
+        </el-form>
+        <el-descriptions
+            class='mt2'
+            direction='vertical'
+            :column='4'
+            border
+        >
+            <el-descriptions-item align='center' label='名称'>{{ data.name }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='事件总数'>{{ data.gs }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='可容忍'>{{ data.krr }}</el-descriptions-item>
+            <el-descriptions-item align='center' label='不可容忍'> {{ data.bkrr }}</el-descriptions-item>
+        </el-descriptions>
+        <div style='flex: 1;' class='mt10'>
+            <my-echart :options='options' />
+        </div>
     </div>
 </template>
 <script setup lang='ts'>
-import { ref } from 'vue'
+import { nextTick, onMounted, reactive, ref } from 'vue'
+import DatePicker from '@/components/form/datePicker/index.vue'
+import MyEchart from '@/components/echarts/MyEchart.vue'
+import { useMonitoringPoint } from '@/views/pms/voltageSags/monitoringPoint/online/store'
+import { getPlot } from '@/api/event-boot/monitor'
+
+const datePickerRef = ref()
+const monitoringPoint = useMonitoringPoint()
+const loading = ref(true)
+const formData = reactive({
+    lineIndex: monitoringPoint.state.lineId,
+    startTime: '',
+    endTime: ''
+})
+const data = reactive({
+    name: '事件个数',
+    gs: 0,
+    krr: 0,
+    bkrr: 0
+})
+const options = ref({})
+
+const init = () => {
+    loading.value = true
+    formData.startTime = datePickerRef.value.timeValue[0]
+    formData.endTime = datePickerRef.value.timeValue[1]
+    getPlot(formData).then(
+        (res: any) => {
+            const gongData = gongfunction(res.data.voltageToleranceCurveDataList)
+            data.gs = res.data.voltageToleranceCurveDataList.length
+            data.krr = gongData.pointI.length
+            data.bkrr = gongData.pointIun.length
+            console.log(gongData)
+            options.value = {
+                // backgroundColor: "#f9f9f9", //地图背景色深蓝
+                title: {
+                    text: `SEMI F47曲线`
+                },
+                legend: {
+                    data: ['上限', '下限', '可容忍事件', '不可容忍事件'],
+                    x: 'left'
+                },
+                tooltip: {
+                    trigger: 'item',
+                    show: true,
+                    axisPointer: {
+                        type: 'shadow',
+                        label: {
+                            color: '#fff',
+                            fontSize: 16
+                        }
+                    },
+                    textStyle: {
+                        color: '#fff',
+                        fontStyle: 'normal',
+                        opacity: 0.35,
+                        fontSize: 14
+                    },
+                    backgroundColor: 'rgba(0,0,0,0.35)',
+                    borderWidth: 0,
+                    formatter: function(a: any) {
+                        var relVal = ''
+                        relVal =
+                            '<font style=\'color:' +
+                            '\'>发生时间:' +
+                            a.value[2] +
+                            '</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>持续时间:' +
+                            a.value[0] +
+                            's</font><br/>'
+                        relVal +=
+                            '<font style=\'color:' +
+                            '\'>特征幅值:' +
+                            a.value[1].toFixed(2) +
+                            '%</font>'
+                        return relVal
+                    }
+                },
+                xAxis: [
+                    {
+                        type: 'log',
+                        min: 0.001,
+                        max: 1000,
+                        splitLine: {
+                            show: false
+                        },
+                        name: 's'
+                    }
+                ],
+                yAxis: [
+                    {
+                        type: 'value',
+                        max: function(value: any) {
+                            return value.max + 20
+                        },
+                        splitNumber: 10,
+                        minInterval: 0.1,
+                        name: '%'
+                    }
+                ],
+                options: {
+                    dataZoom: null,
+                    series: [
+                        {
+                            name: '边界线',
+                            type: 'line',
+                            data: [
+                                [0.05, 0],
+                                [0.05, 50],
+                                [0.2, 50],
+                                [0.2, 70],
+                                [0.5, 70],
+                                [0.5, 80],
+                                [10, 80],
+                                [1000, 80]
+                            ],
+                            showSymbol: false,
+                            tooltips: {
+                                show: false
+                            }
+                        },
+                        {
+                            name: '可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointI
+                        },
+                        {
+                            name: '不可容忍事件',
+                            type: 'scatter',
+                            symbol: 'circle',
+                            data: gongData.pointIun
+                        }
+                    ]
+                }
+            }
+            nextTick(() => {
+                loading.value = false
+            })
+        }
+    )
+}
+
+function gongfunction(arr: any) {
+    let standI = 0
+    let unstandI = 0
+    let standF = 0
+    let unstandF = 0
+    let total = 0
+    let pointIun = []
+    let pointI = []
+    let pointF = []
+    let pointFun = []
+    total = arr.length
+    if (total == 0) {
+    } else {
+        for (let i = 0; i < arr.length; i++) {
+            let point = []
+            let xx = arr[i].persistTime
+            let yy = arr[i].eventValue
+            let time = arr[i].time
+            let eventId = arr[i].eventId
+            // let index =arr[i].eventDetailIndex;
+            point = [xx, yy, time, eventId]
+
+            if (xx <= 0.003) {
+                let line = 0
+                line = 250 - 30000 * xx
+                if (yy > line) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.02) {
+                if (yy > 120) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 0.5) {
+                if (yy > 120 || yy < 70) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else if (xx <= 10) {
+                if (yy > 110 || yy < 80) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            } else {
+                if (yy > 110 || yy < 90) {
+                    unstandI++
+                    pointIun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                } else {
+                    standI++
+                    pointI.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                }
+            }
+
+            if (xx < 0.05) {
+                standF++
+                pointF.push({
+                    value: point,
+                    itemStyle: { normal: { color: 'green' } }
+                })
+            } else if (xx < 0.2) {
+                if (yy > 50) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else if (xx < 0.5) {
+                if (yy > 70) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            } else {
+                if (yy > 80) {
+                    standF++
+                    pointF.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'green' } }
+                    })
+                } else {
+                    unstandF++
+                    pointFun.push({
+                        value: point,
+                        itemStyle: { normal: { color: 'red' } }
+                    })
+                }
+            }
+        }
+    }
+    return {
+        standI,
+        unstandI,
+        pointI,
+        pointIun,
+        standF,
+        unstandF,
+        pointF,
+        pointFun
+    }
+}
+
+onMounted(() => {
+    init()
+})
 
 </script>
 <style></style>