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

2.对接设备类型接口

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

@@ -5,129 +5,62 @@
 <script lang="ts">
   import { defineComponent, onMounted, ref, watch } from 'vue';
   import * as echarts from 'echarts';
-
-  const data = [
-    {
-      date: '2023-12-01 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '21',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '36',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '5',
-        },
-      ],
-    },
-    {
-      date: '2023-12-02 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '26',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '25',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '47',
-        },
-      ],
-    },
-    {
-      date: '2023-12-03 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '18',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '22',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '26',
-        },
-      ],
-    },
-    {
-      date: '2023-12-04 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '40',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '15',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '12',
-        },
-      ],
-    },
-    {
-      date: '2023-12-05 0:00',
-      unit: 'V',
-      data: [
-        {
-          name: 'AC_002（暖通电表）',
-          value: '15',
-        },
-        {
-          name: 'AC_003（照明电表）',
-          value: '18',
-        },
-        {
-          name: 'AC_004（给排水电表）',
-          value: '15',
-        },
-      ],
-    },
-  ];
+  import { inject } from 'vue';
 
   export default defineComponent({
     // eslint-disable-next-line vue/multi-word-component-names
     name: 'Graph',
 
     setup() {
+      let data = ref<any[]>([]);
+      interface PageData {
+        tableList: any[];
+        tableColumns: any[];
+        graphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+      // 监听 pageData 的变化
+      watch(
+        () => pageData as PageData,
+        (_newValue, _oldValue) => {
+          // 执行你的逻辑代码
+          draw();
+        },
+        { deep: true },
+      );
       const graphChart = ref(null);
       let chartInstance: echarts.ECharts | null = null;
 
-      onMounted(() => {
+      const draw = () => {
+        data.value = pageData.graphList;
+        if (chartInstance) {
+          chartInstance.dispose();
+        }
         chartInstance = echarts.init(graphChart.value);
+
         var seriesList = [];
         var date = [];
         var legendList: string | any[] = [];
-        for (let i = 0; i < data.length; i++) {
-          date.push(data[i].date);
+        for (let i = 0; i < data.value.length; i++) {
+          date.push(data.value[i].date);
 
-          for (let j = 0; j < data[i].data.length; j++) {
+          for (let j = 0; j < data.value[i].data.length; j++) {
             if (seriesList.length < j + 1) {
               seriesList.push({
-                name: data[i].data[j].name,
-                data: [data[i].data[j].value],
+                name: data.value[i].data[j].name,
+                data: [data.value[i].data[j].value],
                 type: 'line',
                 smooth: true,
               });
             } else {
-              seriesList[j].data.push(data[i].data[j].value);
+              seriesList[j].data.push(data.value[i].data[j].value);
             }
             if (legendList.length == 0 || legendList.length < j + 1) {
-              legendList.push(data[i].data[j].name);
+              legendList.push(data.value[i].data[j].name);
             }
           }
         }
@@ -143,7 +76,7 @@
               const date = params[0].name;
               const values = params
                 .map((param: any) => {
-                  const unit = data.find((d) => d.date === date)?.unit || '';
+                  const unit = data.value.find((d) => d.date === date)?.unit || '';
                   return `<tr>
                           <td>${param.marker}${param.seriesName}</td>
                           <td style="text-align: right;">${param.value} ${unit}</td>
@@ -174,6 +107,9 @@
 
         chartInstance = echarts.init(graphChart.value);
         chartInstance.setOption(option);
+      };
+      onMounted(() => {
+        draw();
       });
       // 下载图表
       const downloadChart = () => {
@@ -190,6 +126,7 @@
       };
 
       return {
+        draw,
         graphChart,
         downloadChart,
       };

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>

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

@@ -0,0 +1,81 @@
+<!-- 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>
+</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';
+
+  const iconName = ref('biaoge');
+
+  const treeRef = ref();
+  const graphRef = ref();
+  const tableRef = ref();
+
+  let isGraph = ref(true);
+
+  defineOptions({
+    name: 'EnvironmentMonitorIndex', // 与页面路由name一致缓存才可生效
+  });
+
+  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';
+    }
+  }
+</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>

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

@@ -3,56 +3,44 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue';
-import type { TableColumnType } from 'ant-design-vue';
+  import { defineComponent, watch, ref, onMounted } from 'vue';
+  import type { TableColumnType } from 'ant-design-vue';
+  import { inject } from 'vue';
 
-const data = [
-  {
-    key: '1',
-    name: 'AC_002（暖通电表）',
-    position: 'A 相电压',
-    unit: 'V',
-    date: '2023-12-01',
-    '1:00': '3626',
-  },
-  {
-    key: '1',
-    name: 'AC_002（暖通电表）',
-    position: 'A 相电压',
-    unit: 'V',
-    date: '2023-12-01',
-    '1:00': '3626',
-  },
-  {
-    key: '2',
-    name: 'AC_003（照明电表）',
-    position: 'A 相电压',
-    unit: 'V',
-    date: '2023-12-01',
-    '1:00': '3626',
-  },
-  {
-    key: '2',
-    name: 'AC_003（照明电表）',
-    position: 'A 相电压',
-    unit: 'V',
-    date: '2023-12-01',
-    '1:00': '3626',
-  },
-  {
-    key: '3',
-    name: 'AC_004（给排水电表）',
-    position: 'A 相电压',
-    unit: 'V',
-    date: '2023-12-01',
-    '1:00': '3626',
-  },
-];
+  // let data: any[] = [];
 
-export default defineComponent({
+  export default defineComponent({
     name: 'EnvironmentTable',
     setup() {
-    const getRowSpan = (dataIndex: string, record, data, dependents: string[] = []) => {
+      let data = ref<any[]>([]);
+      let columns = ref<TableColumnType[]>([]);
+
+      interface PageData {
+        tableList: any[];
+        tableColumns: any[];
+        graphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+      // 监听 pageData 的变化
+      watch(
+        () => pageData as PageData,
+        (_newValue, _oldValue) => {
+          data.value = pageData.tableList;
+
+          let columnA: any[] = [...column];
+          columnA.push(...pageData.tableColumns);
+          columns.value = columnA;
+          // pageData.graphList;
+          // 执行你的逻辑代码
+        },
+        { deep: true },
+      );
+
+      const getRowSpan = (dataIndex: string, record: any, data: any, dependents: string[] = []) => {
         let rowSpan = 1;
         for (let i = data.indexOf(record) + 1; i < data.length; i++) {
           let shouldMerge = true;
@@ -71,116 +59,121 @@ export default defineComponent({
         return rowSpan;
       };
 
-    const columns: TableColumnType[] = [
+      const column: TableColumnType[] = [
         {
           title: '序号',
           dataIndex: 'key',
           customCell: (record, rowIndex) => {
-          const rowSpan = getRowSpan('name', record, data);
-          if (rowIndex != 0 && data[rowIndex-1].key == record.key) {
+            if (rowIndex == undefined) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
+              };
             }
+            const rowSpan = getRowSpan('name', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].key == record.key) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
             }
             return {
               rowSpan: rowSpan,
             };
-        
           },
         },
         {
           title: '设备名称',
           dataIndex: 'name',
           customCell: (record, rowIndex) => {
-          const rowSpan = getRowSpan('name', record, data);
-          if (rowIndex != 0 && data[rowIndex-1].name == record.name) {
+            if (rowIndex == undefined) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
+              };
             }
+            const rowSpan = getRowSpan('name', record, data.value);
+            if (rowIndex != 0 && data.value[rowIndex - 1].name == record.name) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
             }
             return {
               rowSpan: rowSpan,
             };
-          
-          // if (rowIndex === data.indexOf(record)) {
-          //   return {
-          //     rowSpan: rowSpan,
-          //   };
-          // }
-          // return {
-          //   rowSpan: 0,
-          //   colSpan: 0,
-          // };
           },
         },
         {
           title: '设备点位',
           dataIndex: 'position',
           customCell: (record, rowIndex) => {
-          const rowSpan = getRowSpan('position', record, data, ['name']);
-          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position) {
+            if (rowIndex == undefined) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
+              };
             }
+            const rowSpan = getRowSpan('position', record, data.value, ['name']);
+            if (
+              rowIndex != 0 &&
+              data.value[rowIndex - 1].name == record.name &&
+              data.value[rowIndex - 1].position == record.position
+            ) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
             }
             return {
               rowSpan: rowSpan,
             };
-          // if (rowIndex === data.indexOf(record)) {
-          //   return {
-          //     rowSpan: rowSpan,
-          //   };
-          // }
-          // return {
-          //   rowSpan: 0,
-          //   colSpan: 0,
-          // };
           },
         },
         {
           title: '计量单位',
           dataIndex: 'unit',
           customCell: (record, rowIndex) => {
-          const rowSpan = getRowSpan('unit', record, data, ['name', 'position']);
-          if (rowIndex != 0 && data[rowIndex-1].name == record.name && data[rowIndex-1].position == record.position && data[rowIndex-1].unit == record.unit) {
+            if (rowIndex == undefined) {
               return {
                 rowSpan: 0,
                 colSpan: 0,
+              };
             }
+            const rowSpan = getRowSpan('unit', record, data.value, ['name', 'position']);
+            if (
+              rowIndex != 0 &&
+              data.value[rowIndex - 1].name == record.name &&
+              data.value[rowIndex - 1].position == record.position &&
+              data.value[rowIndex - 1].unit == record.unit
+            ) {
+              return {
+                rowSpan: 0,
+                colSpan: 0,
+              };
             }
             return {
               rowSpan: rowSpan,
             };
-          // if (rowIndex === data.indexOf(record)) {
-          //   return {
-          //     rowSpan: rowSpan,
-          //   };
-          // }
-          // return {
-          //   rowSpan: 0,
-          //   colSpan: 0,
-          // };
           },
         },
-      {
-        title: '日期',
-        dataIndex: 'date',
-      },
-      {
-        title: '1:00',
-        dataIndex: '1:00',
-      },
       ];
 
+      onMounted(() => {
+        data.value = pageData.tableList;
+
+        let columnA: any[] = [...column];
+        columnA.push(...pageData.tableColumns);
+        columns.value = columnA;
+      });
       return {
         data,
+        column,
         columns,
+        pageData,
       };
     },
-});
+  });
 </script>
 
 <style lang="less" scoped></style>

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

@@ -8,7 +8,8 @@
       v-model:value="value"
       style="width: 100%"
       :tree-line="treeLine && { showLeafIcon }"
-      :tree-data="treeData1">
+      :tree-data="treeData1"
+      @change="">
       <!-- <template #title="{ value: val, title }">
         <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
         <template v-else>{{ title }}</template>
@@ -49,17 +50,24 @@
         @calendarChange="onCalendarChange"
         style="width: 100%; margin-bottom: 10px"
         :placeholder="['请选择日期', '请选择日期']" />
-      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect"
-        >查询</a-button
-      >
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect">
+        查询
+      </a-button>
+      <a-button type="primary" style="width: 100%; margin-bottom: 10px" @click="getSelect11">
+        模拟不同数据查询
+      </a-button>
     </div>
   </div>
 </template>
 
 <script lang="ts">
   import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
-  import { defineComponent, ref, watch, onMounted } from 'vue';
-  import dayjs, { Dayjs } from 'dayjs';
+  import { defineComponent, ref, onMounted } from 'vue';
+  import { Dayjs } from 'dayjs';
+  import { inject } from 'vue';
+  import { http } from '/nerv-lib/util';
+  import { device } from '/@/api/deviceManage';
+  // import { device } from '/@/api/deviceManage';
 
   const treeData2: TreeProps['treeData'] = [
     {
@@ -98,6 +106,10 @@
       const showLeafIcon = ref(false);
       const value = ref<string>();
 
+      const orgId = ref('');
+      const result = JSON.parse(sessionStorage.getItem('ORGID')!);
+      orgId.value = result;
+
       const treeData1 = ref<TreeSelectProps['treeData']>([
         {
           title: '3.电梯',
@@ -137,6 +149,18 @@
         },
       ]);
 
+      http.post(device.queryDeviceTree, { orgId: orgId.value }).then((res) => {
+        treeData1.value = formatTreeData(res.data);
+      });
+
+      const formatTreeData = (data) => {
+        return data.map((item) => ({
+          title: item.code + '.' + item.deviceType,
+          value: item.id,
+          children: item.children ? formatTreeData(item.children) : [],
+        }));
+      };
+
       const expandedKeys = ref<string[]>(['0-0-0', '0-0-1']);
       const selectedKeys = ref<string[]>(['0-0-0', '0-0-1']);
       const checkedKeys = ref<string[]>(['0-0-0', '0-0-1']);
@@ -177,7 +201,290 @@
         ];
       };
 
-      const getSelect = () => {};
+      interface PageData {
+        tableList: any[];
+        tableColumns: any[];
+        graphList: any[];
+      }
+      const pageData = inject<PageData>('pageData');
+      if (!pageData) {
+        throw new Error('pageData is not provided');
+      }
+      // 查询数据后放入pageData
+      const getSelect = () => {
+        pageData.tableList = [
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+          {
+            key: '3',
+            name: 'AC_004（给排水电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+          },
+        ];
+        pageData.tableColumns = [
+          {
+            title: '日期',
+            dataIndex: 'date',
+          },
+          {
+            title: '1:00',
+            dataIndex: '1:00',
+          },
+        ];
+        pageData.graphList = [
+          {
+            date: '2023-12-01 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '21',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '36',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '5',
+              },
+            ],
+          },
+          {
+            date: '2023-12-02 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '26',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '25',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '47',
+              },
+            ],
+          },
+          {
+            date: '2023-12-03 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '18',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '22',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '26',
+              },
+            ],
+          },
+          {
+            date: '2023-12-04 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '40',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '12',
+              },
+            ],
+          },
+          {
+            date: '2023-12-05 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '18',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '15',
+              },
+            ],
+          },
+          {
+            date: '2023-12-06 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '15',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '18',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '15',
+              },
+            ],
+          },
+        ];
+      };
+      // 测试查询 模拟不同数据
+      const getSelect11 = () => {
+        pageData.tableList = [
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '2222',
+          },
+          {
+            key: '1',
+            name: 'AC_002（暖通电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '2222',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '2222',
+          },
+          {
+            key: '2',
+            name: 'AC_003（照明电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '2222',
+          },
+          {
+            key: '3',
+            name: 'AC_004（给排水电表）',
+            position: 'A 相电压',
+            unit: 'V',
+            date: '2023-12-01',
+            '1:00': '3626',
+            '2:00': '2222',
+          },
+        ];
+        pageData.tableColumns = [
+          {
+            title: '日期',
+            dataIndex: 'date',
+          },
+          {
+            title: '1:00',
+            dataIndex: '1:00',
+          },
+          {
+            title: '2:00',
+            dataIndex: '2:00',
+          },
+        ];
+        pageData.graphList = [
+          {
+            date: '2023-12-01 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '21',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '36',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '5',
+              },
+              {
+                name: 'AC_005（1111111）',
+                value: '14',
+              },
+            ],
+          },
+          {
+            date: '2023-12-02 0:00',
+            unit: 'V',
+            data: [
+              {
+                name: 'AC_002（暖通电表）',
+                value: '26',
+              },
+              {
+                name: 'AC_003（照明电表）',
+                value: '25',
+              },
+              {
+                name: 'AC_004（给排水电表）',
+                value: '47',
+              },
+              {
+                name: 'AC_005（1111111）',
+                value: '28',
+              },
+            ],
+          },
+        ];
+      };
 
       type RangeValue = [Dayjs, Dayjs];
       const dates = ref<RangeValue>();
@@ -210,7 +517,7 @@
         getDianWeiList();
       });
 
-      const dateFormat = 'YYYY-MM-DD';
+      // const dateFormat = 'YYYY-MM-DD';
 
       return {
         treeLine,
@@ -228,11 +535,13 @@
         dateRange,
         getDianWeiList,
         getSelect,
+        getSelect11,
         disabledDate,
         onCalendarChange,
         onOpenChange,
         onChange,
         hackValue,
+        pageData,
       };
     },
   });