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

<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"
    >
      <!-- <template #title="{ value: val, title }">
        <b v-if="val === 'parent 1-1'" style="color: #08c">sss</b>
        <template v-else>{{ title }}</template>
      </template> -->
    </a-tree-select>

    <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>
      <a-select
        v-model:value="frequencyValue"
        placeholder="请选择频率"
        style="width: 100%; margin-bottom: 10px;"
        :options="options2"
      ></a-select>
      <a-range-picker v-model:value="dateRange" style="width: 100%; margin-bottom: 10px;" :placeholder="['请选择日期','请选择日期']"/>
      <a-button type="primary" style="width: 100%; margin-bottom: 10px;" @click="getDianWeiList">查询</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';

const treeData2: TreeProps['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',
      },
    ],
  },
];

export default defineComponent({
  name: 'Tree',
  setup() {
    const treeLine = ref(true);
    const showLeafIcon = ref(false);
    const value = ref<string>();

    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',
          },
        ],
      },
    ]);

    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']);

    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 项电流' },
      ];
    };

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

    const dateFormat = 'YYYY-MM-DD';



    return {
      treeLine,
      showLeafIcon,
      value,
      treeData1,
      treeData2,
      expandedKeys,
      selectedKeys,
      checkedKeys,
      options1,
      options2,
      selectedValue,
      frequencyValue,
      dateRange,
      getDianWeiList,
    };
  },
});
</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>