修改测试问题

src/components/cockpit/indicatorCrossingTime/index.vue

@@ -1,47 +1,32 @@
 <template>
-    <div>
+    <div class="device-control">
         <!--指标越限时间分布
          -->
-        <TableHeader
-            :showReset="false"
-            :timeKeyList="prop.timeKey"
-            ref="TableHeaderRef"
-            @selectChange="selectChange"
-            datePicker
-            v-if="fullscreen"
-        >
-            <template v-slot:select>
-                <el-form-item label="监测点">
-                    <el-select size="small" filterable v-model="tableStore.table.params.lineId">
-                        <el-option
-                            v-for="item in lineList"
-                            :key="item.lineId"
-                            :label="item.name"
-                            :value="item.lineId"
-                        />
-                    </el-select>
-                </el-form-item>
-            </template>
-        </TableHeader>
-        <div v-loading="tableStore.table.loading">
-            <my-echart
-                class="tall"
-                v-if="lineShow"
-                :options="echartList1"
-                :style="{
-                    width: prop.width,
+        <div v-show="fullscreen">
+            <PointTree :height="flag ? 106 : 50" @node-click="nodeClick" @pointTypeChange="pointTypeChange"></PointTree>
+        </div>
+        <div>
+            <TableHeader :showReset="false" :timeKeyList="prop.timeKey" ref="TableHeaderRef"
+                @selectChange="selectChange" datePicker v-if="fullscreen">
+                <!-- <template v-slot:select>
+                    <el-form-item label="监测点">
+                        <el-select size="small" filterable v-model="tableStore.table.params.lineId">
+                            <el-option v-for="item in lineList" :key="item.lineId" :label="item.name"
+                                :value="item.lineId" />
+                        </el-select>
+                    </el-form-item>
+                </template> -->
+            </TableHeader>
+            <div v-loading="tableStore.table.loading">
+                <my-echart class="tall" v-if="lineShow" :options="echartList1" :style="{
+                   width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <el-empty
-                v-else
-                description="暂无监测点"
-                :style="{
-                    width: prop.width,
+                }" />
+                <el-empty v-else description="暂无监测点" :style="{
+                   width: `calc(${prop.width} - ${fullscreen ? 290 : 0}px)`,
                     height: `calc(${prop.height} - ${headerHeight}px + ${fullscreen ? 0 : 56}px)`
-                }"
-            />
-            <!-- <my-echart
+                }" />
+                <!-- <my-echart
                 class="mt10"
                 :options="echartList1"
                 :style="{
@@ -49,6 +34,7 @@
                     height: `calc(${prop.height} / 2 - ${headerHeight / 2}px + ${fullscreen ? 0 : 28}px )`
                 }"
             /> -->
+            </div>
         </div>
     </div>
 </template>
@@ -59,7 +45,7 @@ import TableHeader from '@/components/table/header/index.vue'
 import MyEchart from '@/components/echarts/MyEchart.vue'
 import { limitProbabilityData, cslineList } from '@/api/harmonic-boot/cockpit/cockpit'
 import { getTime } from '@/utils/formatTime'
-
+import PointTree from '@/components/tree/govern/pointTree.vue'
 const prop = defineProps({
     w: { type: [String, Number] },
     h: { type: [String, Number] },
@@ -67,7 +53,8 @@ const prop = defineProps({
     height: { type: [String, Number] },
     timeKey: { type: Array as () => string[] },
     timeValue: { type: Object },
-    interval: { type: Number }
+    interval: { type: Number },
+    flag: { type: Boolean }
 })
 
 // const options = ref(JSON.parse(window.localStorage.getItem('lineIdList') || '[]'))
@@ -106,17 +93,28 @@ const echartList1 = ref()
 
 const probabilityData = ref()
 
-const initLineList = async () => {
-    cslineList({}).then(res => {
-        if (res.data.length == 0) {
-            lineShow.value = false
-            return (tableStore.table.loading = false)
-        }
-        lineShow.value = true
-        lineList.value = res.data
-        tableStore.table.params.lineId = lineList.value[0].lineId
+// const initLineList = async () => {
+//     cslineList({}).then(res => {
+//         if (res.data.length == 0) {
+//             lineShow.value = false
+//             return (tableStore.table.loading = false)
+//         }
+//         lineShow.value = true
+//         lineList.value = res.data
+//         tableStore.table.params.lineId = lineList.value[0].lineId
+//         tableStore.index()
+//     })
+// }
+const nodeClick = (e: any) => {
+    if (e == undefined) {
+    }
+    if (e.level == 3) {
+        tableStore.table.params.lineId = e.id
         tableStore.index()
-    })
+    }
+}
+const pointTypeChange = (val: any, obj: any) => {
+    nodeClick(obj)
 }
 
 // 越限程度概率分布
@@ -438,7 +436,7 @@ const tableStore: any = new TableStore({
 provide('tableStore', tableStore)
 
 onMounted(() => {
-    initLineList()
+    // initLineList()
 })
 
 const setTime = () => {
@@ -475,6 +473,14 @@ watch(
     }
 )
 
-const addMenu = () => {}
+const addMenu = () => { }
 </script>
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.device-control {
+    display: flex;
+}
+
+:deep(.cn-tree) {
+    padding: 0 10px 0 0 !important;
+}
+</style>