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

<!-- eslint-disable vue/v-on-event-hyphenation -->
<template>
  <div class="parent-container">
    <div class="ns-tree-title">
      <span>设备列表</span>
    </div>
    <a-tree-select
      v-model:value="value"
      style="width: 100%"
      :tree-line="treeLine && { showLeafIcon }"
      :tree-data="treeData1"
      @change="changeDeviceType" />

    <a-tree
      v-model:expandedKeys="expandedKeys"
      v-model:selectedKeys="selectedKeys"
      v-model:checkedKeys="checkedKeys"
      checkable
      style="width: 100%; margin-bottom: 10px"
      :tree-data="treeData2">
      <!-- <template #title="{ title, key }">
        <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{ title }}</span>
        <template v-else>{{ title }}</template>
      </template> -->
    </a-tree>

    <div class="fixed-bottom">
      <a-divider />
      <a-select
        ref="select"
        v-model:value="selectedValue"
        placeholder="请选择点位"
        style="width: 100%; margin-bottom: 10px"
        :options="options1" />
      <a-select
        v-model:value="frequencyValue"
        placeholder="请选择频率"
        style="width: 100%; margin-bottom: 10px"
        :options="options2" />
      <a-range-picker
        :value="hackValue || dateRange"
        :disabled-date="disabledDate"
        @change="onChange"
        @openChange="onOpenChange"
        @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="getSelect11">
        模拟不同数据查询
      </a-button>
    </div>
  </div>
</template>

<script lang="ts">
  import type { TreeSelectProps, TreeProps, SelectProps } from 'ant-design-vue';
  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';

  export default defineComponent({
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'Tree',
    setup() {
      const treeLine = ref(true);
      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.电梯',
        //   value: '3',
        //   children: [
        //     {
        //       title: '301.扶梯',
        //       value: '301',
        //     },
        //     {
        //       title: '302.直梯',
        //       value: '302',
        //     },
        //   ],
        // },
        // {
        //   title: '4.冷热源',
        //   value: '4',
        //   children: [
        //     {
        //       title: '401.冷水机组',
        //       value: '401',
        //     },
        //     {
        //       title: '402.热泵机组',
        //       value: '402',
        //     },
        //     {
        //       title: '403.锅炉',
        //       value: '403',
        //     },
        //     {
        //       title: '404.水处理机组',
        //       value: '404',
        //     },
        //   ],
        // },
      ]);

      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.code,
          children: item.children ? formatTreeData(item.children) : [],
        }));
      };

      // const treeData2: TreeProps['treeData'] = [
      const treeData2 = ref<TreeSelectProps['treeData']>([
        // {
        //   title: 'AC_001(总电表)',
        //   key: '1',
        //   children: [
        //     {
        //       title: 'AC_002(暖通电表)',
        //       key: '2',
        //     },
        //     {
        //       title: 'AC_003(照明电表)',
        //       key: '3',
        //     },
        //     {
        //       title: 'AC_004(给排水电表)',
        //       key: '4',
        //     },
        //     {
        //       title: 'AC_005(通风电表)',
        //       key: '5',
        //     },
        //     {
        //       title: 'AC_006(电动门电表)',
        //       key: '6',
        //     },
        //   ],
        // },
      ]);

      const changeDeviceType = (val, label, extra) => {
        http
          .post(device.queryDevicePage, { code: val, orgId: orgId.value, pageNum: 1, pageSize: 10 })
          .then((res) => {
            if (!val) {
              val = '999999999';
            }
            if (!label) {
              label = ['所有设备'];
            }
            let records = res.data.records;
            records.forEach((item: any) => {
              (item.title = item.deviceModel + ' ' + item.deviceName), (item.key = item.id);
            });
            let a: TreeSelectProps['treeData'] = [{ title: label[0], key: val, children: records }];
            treeData2.value = a;
            expandedKeys.value = [val];
          });
      };

      const expandedKeys = ref<string[]>([]);
      const selectedKeys = ref<string[]>([]);
      const checkedKeys = ref<string[]>([]);

      const options1 = ref<SelectProps['options']>([]);
      const options2 = ref<SelectProps['options']>([
        {
          value: '1',
          label: '5分钟',
        },
        {
          value: '2',
          label: '10分钟',
        },
        {
          value: '3',
          label: '30分钟',
        },
        {
          value: '4',
          label: '1小时',
        },
      ]);
      const selectedValue = ref<string | undefined>();
      const frequencyValue = ref<string | undefined>();
      const dateRange = ref<[Dayjs, Dayjs] | undefined>();

      const getDianWeiList = () => {
        console.log('getDianWeiList 被调用');
        options1.value = [
          { value: '1', label: 'A 项电压' },
          { value: '2', label: 'B 项电压' },
          { value: '3', label: 'C 项电压' },
          { value: '4', label: 'AB 线电压' },
          { value: '5', label: 'BC 线电压' },
          { value: '6', label: 'A 项电流' },
          { value: '7', label: 'B 项电流' },
        ];
      };

      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>();
      const hackValue = ref<RangeValue>();

      const onChange = (val: RangeValue) => {
        dateRange.value = val;
      };
      const onOpenChange = (open: boolean) => {
        if (open) {
          dates.value = [] as any;
          hackValue.value = [] as any;
        } else {
          hackValue.value = undefined;
        }
      };
      const disabledDate = (current: Dayjs) => {
        if (!dates.value || (dates.value as any).length === 0) {
          return false;
        }
        const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 2;
        const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 2;
        return tooEarly || tooLate;
      };
      const onCalendarChange = (val: RangeValue) => {
        dates.value = val;
      };

      onMounted(() => {
        getDianWeiList();
        changeDeviceType();
      });

      // const dateFormat = 'YYYY-MM-DD';

      return {
        treeLine,
        showLeafIcon,
        value,
        treeData1,
        treeData2,
        expandedKeys,
        selectedKeys,
        checkedKeys,
        options1,
        options2,
        selectedValue,
        frequencyValue,
        dateRange,
        getDianWeiList,
        getSelect,
        getSelect11,
        disabledDate,
        onCalendarChange,
        onOpenChange,
        onChange,
        hackValue,
        pageData,
        changeDeviceType,
      };
    },
  });
</script>

<style lang="less" scoped>
  .ns-tree-title {
    user-select: text;
    margin-bottom: 5px;
    padding-bottom: 10px;
    padding-top: 10px;
    border-bottom: 1px solid #e9e9e9;
    > span {
      padding-left: 10px;
      line-height: 20px;
    }
  }
  .parent-container {
    position: relative;
    height: 100%;
  }

  .fixed-bottom {
    position: absolute;
    bottom: 0;
    width: 100%;
    margin-bottom: 10px;
  }
</style>