1.监控中心 - 设备监测 左侧树与右侧组件联动

2.对接设备类型接口

hx-ai-intelligent/src/view/monitor/deviceMonitor/index.vue

@@ -1,80 +1,19 @@
+<!-- eslint-disable vue/multi-word-component-names -->
 <template>
-  <a-row type="flex">
-    <a-col :span="4">
-      <div style="padding: 0 20px; width: 100%; height: 100%">
-        <tree ref="treeRef" />
-      </div>
-    </a-col>
-    <a-col :span="20">
-      <div style="width: 100%; height: 100%">
-        <div class="ns-right-title">
-          <span>历史数据</span>
-          <div class="button">
-            <ns-icon name="xiazai" size="18" style="margin-right: 10px" @click="downloadChart" />
-            <ns-icon :name="iconName" size="18" style="margin-right: 10px" @click="change" />
-          </div>
-        </div>
-        <graph ref="graphRef" v-if="isGraph" />
-        <environment-table ref="tableRef" v-else />
-      </div>
-    </a-col>
-  </a-row>
+  <page />
 </template>
 
-<script lang="ts" setup>
-  import { ref } from 'vue';
-  import tree from './tree/index.vue';
-  import graph from './graph/index.vue';
-  import environmentTable from './table/index.vue';
+<script setup>
+  import { reactive, provide } from 'vue';
+  import page from './page.vue';
 
-  const iconName = ref('biaoge');
-
-  const treeRef = ref();
-  const graphRef = ref();
-  const tableRef = ref();
-
-  let isGraph = ref(true);
-
-  defineOptions({
-    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  // 创建一个响应式对象
+  const pageData = reactive({
+    tableList: [],
+    tableColumns: [],
+    graphList: [],
   });
 
-  const downloadChart = () => {
-    if (isGraph.value) {
-      if (graphRef.value) {
-        graphRef.value.downloadChart();
-      }
-    }
-  };
-
-  function change() {
-    isGraph.value = !isGraph.value;
-    if (iconName.value == 'biaoge') {
-      iconName.value = 'bingtu';
-    } else {
-      iconName.value = 'biaoge';
-    }
-  }
+  // 使用 provide 函数来提供这个响应式对象
+  provide('pageData', pageData);
 </script>
-
-<style lang="less" scoped>
-  .ns-right-title {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    user-select: text;
-    margin-bottom: 5px;
-    padding-bottom: 10px;
-    padding-top: 10px;
-    border-bottom: 1px solid #e9e9e9;
-
-    > span {
-      padding-left: 10px;
-      line-height: 20px;
-    }
-  }
-  .button {
-    display: inline-block;
-    padding-right: 10px;
-  }
-</style>