多监测点

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%'>
-        <el-form :inline='true'>
-            <el-form-item label='日期'>
-                <DatePicker ref='datePickerRef'></DatePicker>
+    <div style="display: flex; flex-direction: column; height: 100%">
+        <el-form :inline="true">
+            <el-form-item label="多监测点">
+                <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'>
-            <my-echart :options='options' />
+        <div style="flex: 1" class="mt10">
+            <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,14 +33,19 @@ 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(
-        (res: any) => {
+    getProbabilityDistribution(formData).then((res: any) => {
         let data = res.data
         let sisttime = data.sisttime
         let persisttime = data.persisttime
@@ -160,14 +169,11 @@ const init = () => {
         nextTick(() => {
             loading.value = false
         })
+    })
 }
-    )
-}
-
 
 onMounted(() => {
     init()
 })
-
 </script>
 <style></style>