多监测点

src/components/tree/pms/pointTree.vue

@@ -14,7 +14,7 @@
             ></el-option>
         </el-select>
         <div style="flex: 1; overflow: hidden">
-            <Tree ref="treRef" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
+            <Tree ref="c" :data="tree" style="width: 100%; height: 100%" :canExpand="false" v-bind="$attrs" />
         </div>
     </div>
 </template>

src/stores/monitoringPoint.ts

@@ -4,6 +4,8 @@ import { defineStore } from 'pinia'
 interface MonitoringPoint {
     lineId: string
     lineName: string
+    lineIds: string[]
+    showCheckBox: boolean
 }
 
 export const useMonitoringPoint = defineStore(
@@ -12,11 +14,21 @@ export const useMonitoringPoint = defineStore(
         const state: MonitoringPoint = reactive({
             lineId: '',
             lineName: '',
+            lineIds: [],
+            showCheckBox: false
         })
-        const setValue = (key: keyof MonitoringPoint, val: any) => {
+        const setValue = (key: keyof Pick<MonitoringPoint, 'lineId' | 'lineName' | 'lineIds'>, val: any) => {
             state[key] = val
         }
-        return { state, setValue }
+        const setShowCheckBox = (val: boolean) => {
+            if (!val) {
+                state.lineIds = []
+            } else {
+                state.lineIds = [state.lineId]
+            }
+            state.showCheckBox = val
+        }
+        return { state, setValue, setShowCheckBox }
     },
     {
         persist: true

src/views/pqs/harmonicMonitoring/monitoringPoint/online/index.vue

@@ -3,9 +3,13 @@
         <splitpanes :style="height" class="default-theme" id="navigation-splitpanes">
             <pane :size="size">
                 <PointTree
+                    ref="pointTree"
                     :default-expand-all="false"
                     :default-expanded-keys="monitoringPoint.state.lineId ? [monitoringPoint.state.lineId] : []"
                     :current-node-key="monitoringPoint.state.lineId"
+                    :show-checkbox="monitoringPoint.state.showCheckBox"
+                    :default-checked-keys="monitoringPoint.state.lineIds"
+                    @check-change="handleCheckChange"
                     @node-click="handleNodeClick"
                     @init="handleNodeClick"
                 ></PointTree>
@@ -62,10 +66,11 @@ defineOptions({
 })
 
 const monitoringPoint = useMonitoringPoint()
+const pointTree = ref()
 const size = ref(0)
 const isReload = ref(false)
 const height = mainHeight(40)
-const activeName = ref('2')
+const activeName = ref('3')
 onMounted(() => {
     const dom = document.getElementById('navigation-splitpanes')
     if (dom) {
@@ -77,6 +82,10 @@ const handleNodeClick = (data: any, node: any) => {
         monitoringPoint.setValue('lineId', data.id)
     }
 }
+const handleCheckChange = (data: any, node: any) => {
+    // let checkNodes = pointTree.value.getCheckedNodes()
+    // console.log(checkNodes)
+}
 watch(
     () => router.currentRoute.value.query.lineId,
     (newLineId, oldLineId) => {

src/views/pqs/harmonicMonitoring/monitoringPoint/online/wentaishujufenxi/index.vue

@@ -1,19 +1,22 @@
 <template>
-    <div style='display: flex;flex-direction: column;height: 100%'>
+    <div style="display: flex; flex-direction: column; height: 100%">
-        <el-form :inline='true'>
+        <el-form :inline="true">
-            <el-form-item label='日期'>
+            <el-form-item label="多监测点">
-                <DatePicker ref='datePickerRef'></DatePicker>
+                <el-checkbox v-model="checked"  @change="checkChange" />
+            </el-form-item>
+            <el-form-item label="日期">
+                <DatePicker ref="datePickerRef"></DatePicker>
             </el-form-item>
             <el-form-item>
-                <el-button type='primary' @click='init'>查询</el-button>
+                <el-button type="primary" @click="init">查询</el-button>
             </el-form-item>
         </el-form>
-        <div style='flex: 1;' class='mt10'>
+        <div style="flex: 1" class="mt10">
-            <my-echart :options='options' />
+            <my-echart :options="options" />
         </div>
     </div>
 </template>
-<script setup lang='ts'>
+<script setup lang="ts">
 import { nextTick, onMounted, reactive, ref } from 'vue'
 import DatePicker from '@/components/form/datePicker/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
@@ -22,6 +25,7 @@ import { getProbabilityDistribution } from '@/api/event-boot/monitor'
 
 const datePickerRef = ref()
 const monitoringPoint = useMonitoringPoint()
+const checked = ref(false)
 const loading = ref(true)
 const formData = reactive({
     lineIndex: monitoringPoint.state.lineId,
@@ -29,145 +33,147 @@ const formData = reactive({
     endTime: ''
 })
 const options = ref({})
-
+const checkChange = () => {
+    if (checked.value) {
+        monitoringPoint.setShowCheckBox(true)
+    } else {
+        monitoringPoint.setShowCheckBox(false)
+    }
+}
 const init = () => {
     loading.value = true
     formData.lineIndex = monitoringPoint.state.lineId
     formData.startTime = datePickerRef.value.timeValue[0]
     formData.endTime = datePickerRef.value.timeValue[1]
-    getProbabilityDistribution(formData).then(
+    getProbabilityDistribution(formData).then((res: any) => {
-        (res: any) => {
+        let data = res.data
-            let data = res.data
+        let sisttime = data.sisttime
-            let sisttime = data.sisttime
+        let persisttime = data.persisttime
-            let persisttime = data.persisttime
+        options.value = {
-            options.value = {
+            backgroundColor: '#fff', //背景色,
-                backgroundColor: '#fff', //背景色,
+            title: {
-                title: {
+                text: '持续时间的概率分布函数',
-                    text: '持续时间的概率分布函数',
+                x: 'center'
-                    x: 'center'
+            },
-                },
+            legend: {
-                legend: {
+                show: true,
-                    show: true,
+                left: 10,
-                    left: 10,
+                data: ['概率分布', '占比'],
-                    data: ['概率分布', '占比'],
 
-                    textStyle: {
+                textStyle: {
-                        rich: {
+                    rich: {
-                            a: {
+                        a: {
-                                verticalAlign: 'middle'
+                            verticalAlign: 'middle'
-                            }
-                        },
-
-                        padding: [2, 0, 0, 0] //[上、右、下、左]
-                    }
-                },
-
-                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
-                },
-                calculable: true,
-                xAxis: [
-                    {
-                        type: 'category',
-                        name: '暂降幅值',
-                        nameGap: 10,
-                        nameTextStyle: {
-                            fontSize: 12
-                        },
-                        data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
-                    }
-                ],
-                yAxis: [
-                    {
-                        type: 'value',
-                        name: '概率分布',
-                        nameTextStyle: {
-                            fontSize: 15
-                        },
-                        axisLabel: {
-                            formatter: '{value}%'
-                        },
-                        axisLine: {
-                            show: true
-                        },
-                        splitLine: {
-                            lineStyle: {
-                                // 使用深浅的间隔色
-                                type: 'dashed',
-                                opacity: 0.5
-                            }
-                        }
-                    },
-                    {
-                        type: 'value',
-                        name: '占比',
 
-                        nameTextStyle: {
+                    padding: [2, 0, 0, 0] //[上、右、下、左]
-                            fontSize: 15
-                        },
-                        axisLine: {
-                            show: true
-                        },
-
-                        splitLine: {
-                            lineStyle: {
-                                type: 'dashed',
-                                opacity: 0.5
-                            }
-                        }
-                    }
-                ],
-                series: [
-                    {
-                        name: '概率分布',
-                        type: 'line',
-                        data: sisttime,
-                        itemStyle: {
-                            normal: { show: true }
-                        }
-                    },
-                    {
-                        name: '占比',
-                        type: 'bar',
-                        data: persisttime,
-                        barWidth: 30,
-                        itemStyle: {
-                            normal: { show: true }
-                        }
-                    }
-                ],
-                options: {
-                    dataZoom: null
                 }
-            }
+            },
-            nextTick(() => {
-                loading.value = false
-            })
-        }
-    )
-}
 
+            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
+            },
+            calculable: true,
+            xAxis: [
+                {
+                    type: 'category',
+                    name: '暂降幅值',
+                    nameGap: 10,
+                    nameTextStyle: {
+                        fontSize: 12
+                    },
+                    data: ['0.01', '0.1', '0.25', '0.5', '1', '3', '20', '60', '180']
+                }
+            ],
+            yAxis: [
+                {
+                    type: 'value',
+                    name: '概率分布',
+                    nameTextStyle: {
+                        fontSize: 15
+                    },
+                    axisLabel: {
+                        formatter: '{value}%'
+                    },
+                    axisLine: {
+                        show: true
+                    },
+                    splitLine: {
+                        lineStyle: {
+                            // 使用深浅的间隔色
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
+                },
+                {
+                    type: 'value',
+                    name: '占比',
+
+                    nameTextStyle: {
+                        fontSize: 15
+                    },
+                    axisLine: {
+                        show: true
+                    },
+
+                    splitLine: {
+                        lineStyle: {
+                            type: 'dashed',
+                            opacity: 0.5
+                        }
+                    }
+                }
+            ],
+            series: [
+                {
+                    name: '概率分布',
+                    type: 'line',
+                    data: sisttime,
+                    itemStyle: {
+                        normal: { show: true }
+                    }
+                },
+                {
+                    name: '占比',
+                    type: 'bar',
+                    data: persisttime,
+                    barWidth: 30,
+                    itemStyle: {
+                        normal: { show: true }
+                    }
+                }
+            ],
+            options: {
+                dataZoom: null
+            }
+        }
+        nextTick(() => {
+            loading.value = false
+        })
+    })
+}
 
 onMounted(() => {
     init()
 })
-
 </script>
 <style></style>